فرض کنید تعدادی ردیف در گزارشی نمایش داده شدهاند. قصد داریم برای هر
ردیف یک دکمه حذف را قرار دهیم. این حذف باید Ajax ایی باشد؛ به علاوه در
حین حذف ردیف، پویانمایی محو آن ردیف را نیز سبب شود.
مدل و منبع داده برنامه
در اینجا مدل برنامه که ساختار نمایش یک سری مطلب را تهیه
میکند، ملاحظه میکنید؛ به علاوه یک منبع داده فرضی تشکیل شده در حافظه
جهت سهولت دموی برنامه.
کنترلر برنامه
کنترلر برنامه بسیار ساده بوده و نکته خاصی ندارد. در حین
اولین بار نمایش صفحه، لیست مطالب را به View مرتبط ارسال میکند. همچنین
یک اکشن متد حذف ردیفهای نمایش داده شده را نیز در اینجا تدارک دیدهایم.
این اکشن متد از طریق ارسال اطلاعات به صورت Ajax، شماره مطلب را در اختیار
برنامه قرار میدهد که توسط آن در ادامه برای مثال میتوان این رکورد را
از بانک اطلاعاتی حذف کرد. امضای متد DeleteRow بر اساس پارامترهای ارسالی توسط jQuery Ajax مشخص و تنظیم شدهاند:
View برنامه
کدهای View برنامه را در ادامه ملاحظه میکنید. اطلاعات مطالب
دریافتی به صورت یک جدول در صفحه نمایش داده شدهاند. در هر ردیف توسط یک
span که با css تزئین گردیده است، یک دکمه حذف را تدارک دیدهایم. برای
اینکه در حین کار با jQuery بتوانیم id هر ردیف را بدست بیاوریم، این id را
در قسمتی از id این span اضافه شده قرار دادهایم.
در کدهای اسکریپتی صفحه، ابتدا کلیک بر روی کلیه spanهایی که id آنها با row شروع میشود را مونیتور خواهیم کرد:
سپس هر زمان که بر روی یکی از این spanها کلیک شد، میتوان بر اساس span جاری، id و همچنین tableRow مرتبط را استخراج کرد:
اکنون که به این
اطلاعات دسترسی پیدا کردهایم، تنها کافی است آنها را توسط متد ajax به
کنترلر برنامه برای پردازش نهایی ارسال نمائیم. همچنین در پایان کار
عملیات، توسط متدهای fadeTo و remove ایی که ملاحظه میکنید، سبب حذف
نمایشی یک ردیف به همراه پویانمایی محو آن خواهیم شد.
دریافت کدها و پروژه کامل این قسمت
jQueryMvcSample06.zip
مدل و منبع داده برنامه
namespace jQueryMvcSample06.Models { public class BlogPost { public int Id { set; get; } public string Title { set; get; } public string Body { set; get; } } }
using System.Collections.Generic; using jQueryMvcSample06.Models; namespace jQueryMvcSample06.DataSource { /// <summary> /// منبع داده فرضی جهت سهولت دموی برنامه /// </summary> public static class BlogPostDataSource { private static IList<BlogPost> _cachedItems; static BlogPostDataSource() { _cachedItems = createBlogPostsInMemoryDataSource(); } /// <summary> /// هدف صرفا تهیه یک منبع داده آزمایشی ساده تشکیل شده در حافظه است /// </summary> private static IList<BlogPost> createBlogPostsInMemoryDataSource() { var results = new List<BlogPost>(); for (int i = 1; i < 30; i++) { results.Add(new BlogPost { Id = i, Title = "عنوان " + i, Body = "متن ... متن ... متن " + i}); } return results; } public static IList<BlogPost> LatestBlogPosts { get { return _cachedItems; } } } }
کنترلر برنامه
using System.Web.Mvc; using System.Web.UI; using jQueryMvcSample06.DataSource; using jQueryMvcSample06.Security; namespace jQueryMvcSample06.Controllers { public class HomeController : Controller { [HttpGet] public ActionResult Index() { var postsList = BlogPostDataSource.LatestBlogPosts; return View(postsList); } [AjaxOnly] [HttpPost] [OutputCache(Location = OutputCacheLocation.None, NoStore = true)] public ActionResult DeleteRow(int? postId) { if (postId == null) return Content(null); //todo: delete post from db return Content("ok"); } } }
data: JSON.stringify({ postId: postId }),
View برنامه
@model IEnumerable<jQueryMvcSample06.Models.BlogPost> @{ ViewBag.Title = "Index"; var postUrl = Url.Action(actionName: "DeleteRow", controllerName: "Home"); } <h2> حذف یک ردیف از اطلاعات به همراه پویانمایی محو شدن اطلاعات آن</h2> <table> <tr> <th> عملیات </th> <th> عنوان </th> </tr> @foreach (var item in Model) { <tr> <td> <span id="row-@item.Id">حذف</span> </td> <td> @item.Title </td> </tr> } </table> @section JavaScript { <script type="text/javascript"> $(function () { $('span[id^="row"]').click(function () { var span = $(this); var postId = span.attr('id').replace('row-', ''); var tableRow = span.parent().parent(); $.ajax({ type: "POST", url: '@postUrl', data: JSON.stringify({ postId: postId }), contentType: "application/json; charset=utf-8", dataType: "json", complete: function (xhr, status) { var data = xhr.responseText; if (xhr.status == 403) { window.location = "/login"; } else if (status === 'error' || !data || data == "nok") { alert('خطایی رخ داده است'); } else { $(tableRow).fadeTo(600, 0, function () { $(tableRow).remove(); }); } } }); }); }); </script> }
در کدهای اسکریپتی صفحه، ابتدا کلیک بر روی کلیه spanهایی که id آنها با row شروع میشود را مونیتور خواهیم کرد:
$('span[id^="row"]').click(function () {
var span = $(this); var postId = span.attr('id').replace('row-', ''); var tableRow = span.parent().parent();
دریافت کدها و پروژه کامل این قسمت
jQueryMvcSample06.zip