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 به این فایل اضافه کنید.
1 2 3 4 5 | <appSettings> <add key="webpages:Version" value="3.0.0.0" /> <add key="webpages: Enabled" value="false" /> <add key="Unobtrusive JavaScript enabled" value="true" > </appSettings> |
1 2 | <script src="~/Scripts/jquery-1.10.2.js"></script> <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script> |
ایجاد لینک 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 نام این رویداد قرار خواهد گرفت.
1 2 3 | public Partial Views Result Student(){ return Partial Views (db.Students.ToList()); } |
پس از ایجاد رویداد باید PartialViews Result متناظر با این رویداد ساخته شود.
گام سوم: ایجاد تگ HTML مربوط برای نمایش اطلاعات
در قسمت نما، باید تگی تعریف شود که اطلاعات برگشتی در آن نمایش داده شود. در این مثال از نوع تگ div برای نمایش اطلاعات استفاده خواهیم کرد.
<div id=”Student”></div>
گام چهارم: استفاده از دستور Ajax.ActionLink
پارامتر اول این دستور، محتوی لینک می باشد. در این جا گزینه «دانشجو» انتخاب شده است. کاربر در صورت کلیک روی این گزینه اطلاعات دانشجویان را بدون Refresh شدن کل صفحه مشاهده خواهد کرد. پارامتر دوم رویداد برای انجام درخواست مورد استفاده قرار می گیرد که در این جا نام رویدادهایی که در گام دوم ایجاد شده است قرار داده می شود. ویژگی UpdateTargetld محل نمایش اطلاعات است که نام تگ ساخته شده در گام سوم در این قسمت وارد خواهد شد. به دلیل این که InsertionMode از نوع Replace تعریف شده است محتوی اطلاعات، جایگزین دستورات تگ Div انتخابی خواهد شد.
1 2 3 4 5 | @Ajax.Actionlink("Student" “Student", new AjaxOptions { UpdateTargetId="Student', InsertionMode = InsertionMode.Replace, HttpMethod = "GET" }) |
ایجاد فرم 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 اطلاعات بخشی از دانشجویان که نام خانوادگی آنها شامل پارمتر ورودی باشد فیلتر شده و نمایش داده خواهد شد.
1 2 3 4 5 | public PartialViewResult SearchStudent(string Data) { return PartialView (db.Students.Where(c=>c.LastName==Data).ToList()); } |
در قسمت نما نیز اطلاعات دانشجو قرار خواهد گرفت:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | @model IEnumerable<Add_Model.Models.Student> <p> </p> <table> <tr> <th> @Html.DisplayNameFor(model => model.LastName) </th> <th> @Html.DisplayNameFor(model => model.First MidName) </th> <th> @Html.DisplayNameFor(model => model.EnrollmentDate) </th> <th></th> </tr> @foreach (var item in model) { <tr> <td> @Html.DisplayFor(modelltem => item.LastName) </td> <td> @Html.DisplayFor(modelltem => item.First MidName) </td> <td> @Html.DisplayFor(modelltem => item.EnrollmentDate) </td> </tr> </table> |
1 |
گام سوم: ایجاد تگ HTML مربوط برای نمایش اطلاعات
همانند دستور قبل در قسمت نما، باید تگی تعریف شود که اطلاعات برگشتی در آن نمایش داده شود. در این مثال از نوع تگ div برای نمایش اطلاعات استفاده خواهیم کرد.
<div id=”Search Student”></div>
گام چهارم: استفاده از دستور Ajax.BeginForm
ویژگی های این دستور بسیار شبیه دستور ActionLink است. در قسمت اول، نام رویداد و کنترلر پاسخ دهنده به درخواست مشخص خواهد شد. بقیه گزینه ها نیز به ترتیب مشخص کننده نوع ارتباط، حالت ارتباط و در نهایت محل نمایش اطلاعات است.
1 2 3 4 5 6 7 8 | @using (Ajax.BeginForm(actionName: “Search Student", controllerName: “School”, ajaxOptions: new AjaxOptions { HttpMethod = “POST", InsertionMode = InsertionMode.Replace, Update TargetId = “ SearchStudent })) |
