ASP.NET MVC آموزش c# برنامه نویسی معماری

آموزش Ajax در ASP.NET MVC

MVC c# Ajax
نوشته شده توسط sabio_admin

MVC تکنولوژی Ajax را به خوبی پشتیبانی می کند. با استفاده از Ajax ارسال غیر همزمان بخش هایی از یک فرم به سمت سرور فراهم خواهد شد. همچنین با کمک Ajax می توان تنها بخش هایی از صفحه را به روز رسانی کرد. helperهایی برای کار با Ajax ایجاد شده است که کار با این تکنولوژی را ساده تر کرده است. Ajax موجود در MVC از ویژگیهای jQuery استفاده می کند. برای نصب بسته Ajax می توانید از امکان NuGet استفاده کنید. برای این منظور دستورات زیر را Console Package Manager وارد کنید.

Install-Package jQuery -version 1.10.2
Install-Package Microsoft.jQuery.Unobtrusive. Ajax-version 3.0.0

آماده سازی پروژه برای کار با Ajax

برای کار با Ajax باید در دو فایل پروژه تغییراتی را انجام دهید. یکی از تغییرات مربوط به فایل Web.Config است. برای این منظور دستور UnobtrusiveJavaScriptEnabled را با مقدار True به این  فایل اضافه کنید.

همچنین باید مطمئن شوید که مسیرهای مربوط به jQuery نصب شده در این فایل اضافه شده است. تغییر دوم مربوط به نماهای استفاده کننده از Ajax است. برای راحتی کار بهتر است این تغییرات در layout ای که تمام نماها از آن استفاده می کنند انجام شود. برای این منظور از مسیر /Views/Shared/ فایل  Layout.cshtml_ را باز کنیدو دستورات زیر را برای اضافه کردن کتابخانه  JavaScript به آن وارد کنید.
 

ایجاد لینک Ajax

دستور Ajax.ActionLink برای ایجاد لینک های Ajax استفاده می شود. این دستور همانند دستور Html.ActionLink برای ایجاد لینک استفاده می شود. اما در صورت کلیک روی این نوع لینک ها JavaScript مرورگر فعال خواهد شد. و در خواست به صورت غیر همزمان فرستاده خواهد شد.این دستور شامل ویژگی هایی می باشد که بسیاری از درخواست های request مانند رویداد در زمان موفقیت یا عدم موفقیت درخواست را مدیریت می کند. جدول زیر لیست این ویژگی ها را نشان می دهد.

 

 

URL

 آدرس فرمی که درخواست به آن ارسال می گردد در این قسمت مشخص می شود. البته در این قسمت می توانید کنترلر و رویداد قرار دهید، تا این بخش ها درخواست ها را پاسخ دهند.

HttpMethod

 این ویژگی نوع متد مربوط به HTTP را مشخص می کند، که می تواند GET یا POST تعریف شود.
Confirm ویژگی Confirm برای پیغام هایی مورد استفاده قرار می گیرد که به کاربر نهایی به منظور تأیید نمایش داده میشود. زمانی که کاربر پیغام تأیید را مشاهده و سپس گزینه OK را انتخاب کند فراخوانی Ajax انجام خواهد شد.
InsertionMode حالت های مختلفی در ارتباط با نحوه برخورد با عنصری که در ویژگی UpdateTargetld مشخص می شود وجود دارد. این حالت ها عبارتند از InsertAfter: در صورت انتخاب این گزینه دستورات پس از عنصر مشخص شده | قرار خواهد گرفت. InsertBefore: در صورت انتخاب این گزینه دستورات قبل از عنصر مشخص شده قرار خواهد گرفت. Replace: در صورتی که بخواهید کدهای دستور Ajaxای جایگزین دستورات عنصر انتخابی شود این گزینه را باید انتخاب کرد.
LoadingElementId در زمان ساخته شدن در خواست Ajax می توان یک پیام و یا یک انیمیشن به کاربر نهایی نمایش داد که توسط ویژگی LoadineElementld این کار انجام می شود. در این قسمت Id عنصری از نوع DOM که این پیام را انجام میدهد قرار می گیرد. همچنین توسط ویژگی LoadineElementDuration زمان نمایش پیام و یا انیمیشن را بر حسب میلی ثانیه مشخص می شود.
 OnBegin در این قسمت نام تابع جاوا اسکریپتی مشخص می شود که بخواهد در ابتدای درخواست Ajax فراخوانی شود
OnComplete  نام تابع جاوا اسکریپتی که در انتهای درخواست Ajax اجرا خواهد شد در این قسمت مشخص خواهد شد.
OnSuccess
OnFailure
نام تابع جاوا اسکریپتی در OnSuccess تعریف خواهد شد که بخواهد در صورت اجرای موفقیت آمیز درخواست Ajax، فراخوانی شود. همچنین در ویژگی OnFailure، نام تابع جاوا اسکریپتی که در صورت شکست درخواست Ajax فراخوانی می شود مشخص خواهد شد.
UpdateTargetId در این ویژگی ID عنصری از نوع HTML قرار می گیرد. خروجی متد رویداد مربوط به Ajax به این ID ارسال خواهد شد.

 

گام اول :گام اول: اضافه کردن مسیر مربوط به jquery و jquery.unobtrusive-ajax.min.js

پس از اضافه کردن مسیرهای jqueryهای نسخه نصب شده، باید مسیر مربوط jquery.unobtrusive ajax.js نیز به پروژه اضافه گردد.

<script src=”-/Scripts/jquery.unobtrusive-ajax.min.js”></script>

گام دوم: ایجاد رویداد مربوطه

این رویداد از نوع PartialViewsResult تعریف شده است. در ویژگی URL نام این رویداد قرار خواهد گرفت.

 

پس از ایجاد رویداد باید PartialViews Result متناظر با این رویداد ساخته شود.

گام سوم: ایجاد تگ HTML مربوط برای نمایش اطلاعات

در قسمت نما، باید تگی تعریف شود که اطلاعات برگشتی در آن نمایش داده شود. در این مثال از نوع تگ div برای نمایش اطلاعات استفاده خواهیم کرد.

<div id=”Student”></div>

گام چهارم: استفاده از دستور Ajax.ActionLink

پارامتر اول این دستور، محتوی لینک می باشد. در این جا گزینه «دانشجو» انتخاب شده است. کاربر در صورت کلیک روی این گزینه اطلاعات دانشجویان را بدون Refresh شدن کل صفحه مشاهده خواهد کرد. پارامتر دوم رویداد برای انجام درخواست مورد استفاده قرار می گیرد که در این جا نام رویدادهایی که در گام دوم ایجاد شده است قرار داده می شود. ویژگی UpdateTargetld محل نمایش اطلاعات است که نام تگ ساخته شده در گام سوم در این قسمت وارد خواهد شد. به دلیل این که InsertionMode از نوع Replace تعریف شده است محتوی اطلاعات، جایگزین دستورات تگ Div انتخابی خواهد شد.

 

ایجاد فرم Ajax

برای تعریف فرمهای Ajax باید از دستور Ajax.BeginForm@ استفاده کرد. این متد باعث ایجاد تگ <Form> در صفحه خواهد شد اما توسط این دستور، ارسال و دریافت اطلاعات به صورت غیر همزمان امکان پذیر خواهد شد. عملکرد این دستور بسیار شبیه دستور Ajax.ActionLink@ می باشد و گزینه های آن مشابه دستور Action Link است. در ادامه با ارائه مثالی این دستور را توضیح خواهیم داد. در این مثال قصد داریم عملیات جست و جوی اطلاعات را با کمک دستور Ajax.BeginForm@ انجام دهیم. به کمک امکانی که این دستور در اختیار ما قرار می دهد تنها بخش مربوط به اطلاعات دانشجویان Refresh خواهد شد.

گام اول: اضافه کردن مسیر مربوط به jquery و jquery.unobtrusive-ajax.min.js

همانند مثال قبلی باید مسیرهای jqueryهای نسخه نصب شده و jquery.unobtrusive-ajax.js  پروژه اضافه گردد.

گام دوم: ایجاد رویداد مربوطه

همان طور که در دستورات زیر مشاهده می کنید پارامتر ورودی Data برای دریافت اطلاعات در نظر گرفته شده است. همچنین توسط Entity Framework اطلاعات بخشی از دانشجویان که نام خانوادگی آنها شامل پارمتر ورودی باشد فیلتر شده و نمایش داده خواهد شد.

 

در قسمت نما نیز اطلاعات دانشجو قرار خواهد گرفت:

 

گام سوم: ایجاد تگ HTML مربوط برای نمایش اطلاعات

همانند دستور قبل در قسمت نما، باید تگی تعریف شود که اطلاعات برگشتی در آن نمایش داده شود. در این مثال از نوع تگ div برای نمایش اطلاعات استفاده خواهیم کرد.
<div id=”Search Student”></div>

 

 گام چهارم: استفاده از دستور Ajax.BeginForm

 ویژگی های این دستور بسیار شبیه دستور ActionLink است. در قسمت اول، نام رویداد و کنترلر پاسخ دهنده به درخواست مشخص خواهد شد. بقیه گزینه ها نیز به ترتیب مشخص کننده نوع ارتباط، حالت ارتباط و در نهایت محل نمایش اطلاعات است.

 

[تعداد رای:3]

درباره نویسنده

sabio_admin

درج دیدگاه