اجرای این نوع صفحات کار سختی نیست؛ با کمی جستجو در اینترنت مثلا در اینجا میتوانید چیزهای خوبی پیدا کنید. اما متاسفانه اکثر مثالها چیزی شبیه قرار دادن پارشال "ورود اعضا" در کنار پارشال "ثبت نام" هستند. حتما متوجه شدهاید که معمولا این دو صفحه پس از PostBack به صفحهای جدید هدایت میشوند و یا در بهترین حالت به کمک Ajax ، پس از انجام عملیات، پیامی به کاربر نمایش میدهیم.
در این مقاله سعی شده روشی برای ایجاد چند فرم در یک View توضیح داده شود با این شرط که:
اولا : از Ajax یا هلپر ایجکسی استفاده نکنیم.
ثانیا : پس از post-back، عملیات Redirect را انجام ندهیم و صفحه جاری را حفظ کنیم؛ چه قرار باشد همه چیز درست انجام شده باشد و چه مشکلی پیش آمده باشد و پیام خطایی در کنار فیلدها نمایش داده شود.
در این روش به این نکته توجه شده که هر مدل پس از Post-back حفظ شود و مستقل از دیگری رفتار کند. مثلا
اگر یکی از فرمها ناقص پر شد و دکمهی ارسال آن فشرده شد، پس از Post-back، فقط و فقط اجزای همین فرم Validate شود و فرم دوم بدون تغییر باقی بماند.
ویوی زیر را در نظر بگیرید. در layout، دو پارشال، به
کمک اکشنمتد فراخوانی شدهاند:
ViewModelهای مرتبط با این دو بخش به شکل زیر هستند :
ContactVM .cs
public class ContactVM { [Display(Name = "نام")] [Required(ErrorMessage = "لطفا {0} را وارد کنید")] public string Name { get; set; } [EmailAddress(ErrorMessage = "آدرس ایمیل صحیح نیست")] [DataType(DataType.EmailAddress)] [Display(Name = "آدرس ایمیل")] [Required(ErrorMessage = "لطفا {0} را وارد کنید")] public string EmailAddress { get; set; } [Display(Name = "متن پیام")] [Required(ErrorMessage = "حرفی برای گفتن ندارید؟")] public string Description { get; set; } [Required(ErrorMessage = "لطفا {0} را وارد کنید")] [Display(Name = "حاصل جمع")] public string Captcha { get; set; } }
SubscriberVM .cs
public class SubscriberVM { /*[RegularExpression("^[a-zA-Z0-9_\\.-]+@([a-zA-Z0-9-]+\\.)+[a-zA-Z]{2,6}$", ErrorMessage = "آدرس ایمیل صحیح نیست")]*/ [EmailAddress(ErrorMessage = "آدرس ایمیل صحیح نیست")] /*.Net4.5*/ [Display(Name = "ایمیل")] [Required(ErrorMessage = "لطفا {0} را وارد کنید")] public string Email { get; set; } [Display(Name = "وضعیت")] public bool IsActive { get; set; } }
در Layout، دو اکشن متد صدا زده شدهاند که وظیفه ارسال ویوهای هر کدام به Layout را به عهده دارند :
<div class="row footerclass"> <div class="col-md--6"> @Html.Action("Subscribers", "Home") </div> <div class="col-md-6"> @Html.Action("Contact", "Home") </div> </div>
اکشن متدهای این دو پارشال به شکل زیر هستند :
public ActionResult Contact() { return PartialView("_Contact", model); } [HttpPost] [AllowAnonymous] [ValidateAntiForgeryToken] public ActionResult Contact(ContactVM model) { if (ModelState.IsValid) { //Do Something } return PartialView("_Contact", model); } public ActionResult Subscribers() { return PartialView("_Subscribers"); } [HttpPost] [AllowAnonymous] [ValidateAntiForgeryToken] public ActionResult Subscribers(SubscriberVM model) { if (ModelState.IsValid) { //Do Something } } return PartialView("_Subscribers",model); }
و اما ویوهایی که قرار است نمایش داده شوند:
Contact.Cshtml _
@model IrsaShop.Models.ViewModel.ContactVM <span></span><span>تماس با ما</span> <hr /> @using (Html.BeginForm()) { @Html.AntiForgeryToken() @Html.ValidationSummary(true) <div> @Html.TextBoxFor(m => m.Name, new { @class = "form-control", @id = "name", @name = "name", placeholder = "نام" }) @Html.ValidationMessageFor(m => m.Name) </div> <div> @Html.TextBoxFor(m => m.EmailAddress, new { @class = "form-control", @id = "email", @name = "email", placeholder = "ایمیل", @style = "direction: ltr" }) @Html.ValidationMessageFor(m => m.EmailAddress) </div> <div> @Html.TextAreaFor(model => model.Description, new { @class = "form-control", @id = "message", @name = "message", placeholder = "پیام", @style = "max-width: 100%;height: 90px;" }) </div> <div> <input type="button" value="" id="refresh" /> <img alt="Captcha" id="imgcpatcha" src="@Url.Action("CaptchaImage","Captcha")" /> </div> <div> @Html.TextBoxFor(model => model.Captcha, new { @class = "form-control", placeholder = "حاصل جمع؟" }) @Html.ValidationMessageFor(model => model.Captcha) </div> <div> <input type="submit" value="ارسال" name="submitValue" /> </div> }
_Subscriber.Csh tml
@model IrsaShop.Models.SubscriberVM <span></span><span>خبرنامه</span> <hr/> @using (Html.BeginForm()) { @Html.AntiForgeryToken() @Html.ValidationSummary(true) <div> <div> @Html.TextBoxFor(m => m.Email, new { @class = "form-control right-buffer top-buffer pull-right", @id = "email", @name = "email", placeholder = "ایمیل", @style = "direction: ltr;width: 50%", @required = "required" }) @* <button type="submit" name="submitValue">ثبت ایمیل</button>*@ <input type="submit" value="ثبت ایمیل" name="submitValue" /> </div> </div> @Html.ValidationMessageFor(m => m.Email,"",new { @class = "right-buffer pull-right"}) }
نکته اول : هیچ نوع ورودی برای Html.BeginForm در نظر گرفته نشده است.
اگر اکشن متدی را برای صدا زدن در این بخش در نظر بگیرید، هنگام Postback به مشکل
برخورد خواهید کرد؛ چون آدرس آن اکشن متد به شکل صریح در آدرس مرورگر فراخوانی میشود و
پارشال ما پس از Post-back به تنهایی
و بدون Layout نمایش داده خواهد شد. اسم بردن از اکشن متد وقتی کارساز است که آن اکشن متد
قرار باشد یک Redirect انجام دهد ولی هدف ما این
است که صفحه را از دست ندهیم و پیامهای خطای ModelState را در همان صفحه قبل و پس
از Post-back ببینیم و همچنین پس از انجام عملیات (مثلا
ارسال پیام) همین صفحه نمایش داده شود.
نکته دوم : نکته اول یک مشکل دارد! اگر به شکل صریح اکشن متد مربوط به Post-back مشخص نشود، بطور اتوماتیک تمامی اکشن متدهایی که ویژگی [HttpPost] دارند اجرا خواهند شد. این یعنی هر دو اکشن متد Contact و Subscriber اجرا میشوند و بنابر آنچه در اکشن متدها نوشتهایم هر دو ModelState بررسی میشود که این هدف ما نیست. مثلا فرم سمت چپ را تکمیل کرده ایم و دکمه "ثبت ایمیل" را فشار دادهایم و صفحه Postback میشود و با اینکه ایمیل در بانک ثبت شده اما فرم سمت راستی با خطا ظاهر میشود که چرا فیلدها خالی هستند!؟
برای حل این مشکل کافیست خاصیت name مربوط به دکمهها را به شکل یک ورودی برای اکشن متدها بفرستیم و بر اساس وضعیت آن تنها state مدل مورد نظر خودمان را بررسی کنیم. پس اصلاح زیر را برای اکشن متدهای دارای ویژگی [HttpPost] انجام میدهیم.
[HttpPost] [AllowAnonymous] [ValidateAntiForgeryToken] public ActionResult Contact(ContactVM model, , string submitValue) { if (submitValue == "ارسال") { if (ModelState.IsValid) { //Do Something } } else { ModelState.Clear(); } return PartialView("_Subscribers", model); } [HttpPost] [AllowAnonymous] [ValidateAntiForgeryToken] public ActionResult Subscribers(SubscriberVM model, string submitValue) { if (submitValue == "ثبت ایمیل") { if (ModelState.IsValid) { //Do Something } } else { ModelState.Clear(); } return PartialView("_Subscribers"); }
نکته سوم : در این روش سعی کنید از ViewModel استفاده کنید و سعی کنید ویو مدلها پراپرتیهای با نام یکسان نداشته باشند. مثلا پراپرتی Email در ویو مدلها نامهای متفاوتی داشته باشند (مثل EmailAddress ، Email ، ContactMail و ...). با اینکار در زمان Postback احتمال اینکه فیلدهای مشترک اتوماتیک پر شده به ما نمایش داده باشند صفر خواهد شد.
نکته چهارم : حواستان باشد پس از انجام عملیات مرتبط با هر فرم در اکشن متد مربوط به آن (مثلا ارسال ایمیل، ثبت در بانک یا ...) در صورتی که عملیات با موفقیت انجام شد حتما ModelState را clear کنید. با اینکار پس از Post-back فیلدهای پارشالها خالی میشوند.
نکته پنجم : میتوانید به سادگی مدیریت خطا را به کمک جی کوئری انجام دهید؛ مثلا فرض کنید میخواهیم اگر ایمیل کاربر برای دریافت خبرنامه با موفقیت ثبت شد، پیامی مبنی بر موفقیت برای وی بفرستیم؛ اکشن متد HttPost مربوط به Subscriber را به شکل زیر تکمیل میکنیم :
[HttpPost] [AllowAnonymous] [ValidateAntiForgeryToken] public ActionResult Subscribers(SubscriberVM model, string submitValue) { if (submitValue == "ثبت ایمیل") { if (ModelState.IsValid) { Subscriber mail = new Subscriber() { Email = model.EmailSubscriber, IsActive = true }; context.Subscribers.Add(mail); context.SaveChanges(); ViewBag.info = "ایمیل شما با موفقیت ثبت شد."; ViewBag.color = "alert-success"; ModelState.Clear(); } } else { ModelState.Clear(); } return PartialView("_Subscribers "); }
در انتهای پارشال _Subscriber هم چند خط کد زیر را مینویسیم :
@if (!String.IsNullOrEmpty(ViewBag.info)) { <div id="info" style="position: fixed; bottom: 0; right: 0; margin-right: 1%;"> <div class="alert @ViewBag.color alert-dismissable"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> <strong> @ViewBag.info</strong> </div> </div> <script> $(function () { $("#info").fadeOut(15000); }); </script> }
نتیجه این خواهد بود که پس از PostBack در صورت موفقیت تصویر زیر را خواهیم دید و 15 ثانیه المان سبزرنگ بوت استرپِ زیر نمایش داده خواهد شد.
این روش نوعی مدیریت میان اکشن متدهای دارای ویژگی HttpPost است و همانطور که گفتیم به علت اینکه پس از Post-Back نیاز به ساختار به هم نخوردهی صفحهی قبلی داریم، نمیتوانستیم به شکل صریح، اکشن متد برای Html.BeginForm تعریف کنیم تا این دردسرها را نداشته باشیم.
حین نوشتن این مقاله به علت وجود if های تو در تو، امیدوار بودم که روشهای بهتری برای اینکار موجود باشند و هنوز هم امیدوارم نظرات شما چنین چیزی را نشان دهد.
لیست جلسات کنفرانس Focus on Windows
.NET Conf: Focus on Windows is a free, one-day livestream event that features speakers from the community and Microsoft teams working on Windows desktop apps and making them fantastic on the latest .NET 5. Learn why and how to upgrade WPF and Windows Forms apps to .NET 5, see Visual Studio tooling improvements, learn how to leverage cloud services from your client apps, and a whole lot more. You'll...
راهنمای مصور Flexbox
افزودن و اعتبارسنجی خودکار Anti-Forgery Tokens در برنامههای Angular مبتنی بر ASP.NET Core
هدف، ارائه راهحلی برای نمایش جدولی اطلاعات، جستجو، مرتب سازی و صفحه بندی و همچنین انجام عملیات ثبت، ویرایش و حذف بر روی آنها به صورت Ajaxای در بخش back office نرم افزار میباشد.
پیش نیازها:
- طراحی یک گرید با Angular و ASP.NET Core - قسمت اول - پیاده سازی سمت سرور (قسمت اول این سری 3 قسمتی، شامل توضیحات کاملی در مورد دلیل وجود یکسری واسط، کلاس پایه و متدهای کمکی است که در مقاله جاری هم آنها را مشاهده خواهید کرد.)
ایده کار به این شکل میباشد که برای نمایش اطلاعات به صورت جدولی با قابلیتهای مذکور، لازم است یک اکشن Index برای نمایش اولیه و صفحه اول اطلاعات صفحه بندی شده و اکشن متدی به نام List برای پاسخ به درخواستهای صفحه بندی، مرتب سازی، تغییر تعداد آیتمها در هر صفحه و همچنین جستجو، داشته باشیم که این اکشن متد List، بعد از واکشی اطلاعات مورد نظر از منبع داده، آنها را به همراه اطلاعاتی که در کوئری استرینگ درخواست جاری وجود دارد در قالب یک PartialView به کلاینت ارسال کند.
ایجاد مدلهای پایه
همانطور که در مقاله «طراحی و پیاده سازی ServiceLayer به همراه خودکارسازی Business Validationها» مطرح شد، برای پیاده سازی متدهای GetPagedList در ApplicationServiceها از الگوی Request/Response استفاده میکنیم. برای این منظور واسط و کلاسهای زیر را خواهیم داشت:
واسط IPagedQueryModel
public interface IPagedQueryModel { int Page { get; set; } int PageSize { get; set; } /// <summary> /// Expression of Sorting. /// </summary> /// <example> /// Examples: /// "Name_ASC" /// </example> string SortExpression { get; set; } }
این واسط قراردادی میباشد برای نوع و نام پارامترهایی که توسط کلاینت به سرور ارسال میشود. پراپرتی SortExpression آن، نام و ترتیب مرتب سازی را مشخص میکند؛ برای این منظور FieldName_ASC و FieldName_DESC به ترتیب برای حالات مرتب سازی صعودی و نزولی براساس FieldName مقدار دهی خواهد شد.
برای جلوگیری از تکرار این خصوصیات در مدلهای کوئری مربوط به موجودیتها، میتوان کلاس پایهای به شکل زیر در نظر گرفت که پیاده ساز واسط بالا میباشد:
public class PagedQueryModel : IPagedQueryModel, IShouldNormalize { public int Page { get; set; } public int PageSize { get; set; } /// <summary> /// Expression of Sorting. /// </summary> /// <example> /// Examples: /// "Name_ASC" /// </example> public string SortExpression { get; set; } public virtual void Normalize() { if (Page < 1) Page = 1; if (PageSize < 1) PageSize = 10; if (SortExpression.IsEmpty()) SortExpression = "Id_DESC"; } }
مدل بالا علاوه بر پیاده سازی واسط IPagedQueryModel، پیاده ساز واسط IShouldNormalize نیز میباشد؛ دلیل وجود چنین واسطی در مقاله «طراحی و پیاده سازی ServiceLayer به همراه خودکارسازی Business Validationها» توضیح داده شده است:
پیاده سازی واسط IShouldNormalize باعث خواهد شد که قبل از اجرای خود متد، این نوع پارامترها با استفاده از یک Interceptor شناسایی شده و متد Normalize آنها اجرا شود.
کلاس PagedQueryResult
public class PagedQueryResult<TModel> { public PagedQueryResult() { Items = new List<TModel>(); } public IEnumerable<TModel> Items { get; set; } public long TotalCount { get; set; } }
دلیل وجود کلاس بالا در مقاله «طراحی یک گرید با Angular و ASP.NET Core - قسمت اول - پیاده سازی سمت سرور» توضیح داده شده است:
عموما ساختار اطلاعات صفحه بندی شده، شامل تعداد کل آیتمهای تمام صفحات (خاصیت TotalItems) و تنها اطلاعات ردیفهای صفحهی جاری درخواستی (خاصیت Items) است و چون در اینجا این Items از هر نوعی میتواند باشد، بهتر است آنرا جنریک تعریف کنیم.
کلاس PagedListModel
همانطور که در اول بحث توضیح داده شد، لازم است اطلاعاتی را که کلاینت از طریق کوئری استرینگ برای صفحه بندی و ... ارسال کرده بود نیز به PartialView ارسال کنیم. این قسمت کار ایده اصلی این روش را در بر میگیرد؛ اگر نخواهیم اطلاعات کوئری استرینگ دریافتی از کلاینت را دوباره به PartialView ارسال کنیم، مجبور خواهیم بود تمام کارهای مربوط به تشخیص آیکن مرتب سازی ستونهای جدول، ریست کردن المنتهای مربوط به صفحه بندی و مرتب سازی را در در زمان انجام جستجو و یکسری کارهای از این قبل را در سمت کلاینت مدیریت کنیم که هدف مقاله جاری پیاده سازی این روش نمیباشد.
public class PagedListModel<TModel> { public IPagedQueryModel Query { get; set; } public PagedQueryResult<TModel> Result { get; set; } }
پراپرتی Query در برگیرنده پارامتر ورودی اکشن متد List میباشد که پراپرتیهای آن با مقادیر موجود در کوئری استرینگ درخواست جاری مقدار دهی شدهاند؛ البته بدون وجود کلاس بالا نیز به کمک ViewBag میشود این اطلاعات ترکیبی را به ویو ارسال کرد که پیشنهاد نمیشود.
متد GetPagedListAsync موجود در CrudApplicationService
public abstract class CrudApplicationService<TEntity, TModel, TCreateModel, TEditModel, TDeleteModel, TPagedQueryModel, TDynamicQueryModel> : ApplicationService, ICrudApplicationService<TModel, TCreateModel, TEditModel, TDeleteModel, TPagedQueryModel, TDynamicQueryModel> where TEntity : Entity, new() where TCreateModel : class where TEditModel : class, IModel where TModel : class, IModel where TDeleteModel : class, IModel where TPagedQueryModel : PagedQueryModel, new() where TDynamicQueryModel : DynamicQueryModel { #region Properties protected IQueryable<TEntity> UnTrackedEntitySet => EntitySet.AsNoTracking(); public IUnitOfWork UnitOfWork { get; set; } public IMapper Mapper { get; set; } protected IDbSet<TEntity> EntitySet => UnitOfWork.Set<TEntity>(); #endregion #region ICrudApplicationService Members #region Methods public virtual async Task<PagedQueryResult<TModel>> GetPagedListAsync(TPagedQueryModel model) { Guard.ArgumentNotNull(model, nameof(model)); var query = ApplyFiltering(model); var totalCount = await query.LongCountAsync().ConfigureAwait(false); var result = query.ProjectTo<TModel>(Mapper.ConfigurationProvider); result = result.ApplySorting(model); result = result.ApplyPaging(model); return new PagedQueryResult<TModel> { Items = await result.ToListAsync().ConfigureAwait(false), TotalCount = totalCount }; } #endregion #endregion #region Protected Methods /// <summary> /// Apply Filtering To GetPagedList and GetPagedListAsync /// </summary> /// <param name="model"></param> /// <returns></returns> protected virtual IQueryable<TEntity> ApplyFiltering(TPagedQueryModel model) { Guard.ArgumentNotNull(model, nameof(model)); return UnTrackedEntitySet; } #endregion }
در بدنه این متد، ابتدا عملیات جستجو توسط متد ApplyFiltering انجام میشود. این متد به صورت پیش فرض هیچ شرطی را بر روی کوئری ارسالی به منبع داده اعمال نمیکند؛ مگر اینکه توسط زیر کلاسها بازنویسی شود و فیلترهای مورد نیاز اعمال شوند. سپس تعداد کل آیتمهای فیلتر شده محاسبه شده و بعد از عملیات Projection، مرتب سازی و صفحه بندی انجام میگیرد. برای مباحث مرتب سازی و صفحه بندی از دو متد زیر کمک گرفته شدهاست:
public static class QueryableExtensions { public static IQueryable<TModel> ApplySorting<TModel>(this IQueryable<TModel> query, IPagedQueryModel request) { Guard.ArgumentNotNull(request, nameof(request)); Guard.ArgumentNotNull(query, nameof(query)); return query.OrderBy(request.SortExpression.Replace('_', ' ')); } public static IQueryable<TModel> ApplyPaging<TModel>(this IQueryable<TModel> query, IPagedQueryModel request) { Guard.ArgumentNotNull(request, nameof(request)); Guard.ArgumentNotNull(query, nameof(query)); return request != null ? query.Page((request.Page - 1) * request.PageSize, request.PageSize) : query; } }
به منظور مرتب سازی از کتابخانه System.Liq.Dynamic کمک گرفته شدهاست.
نکته: مشخص است که این روش، وابستگی به وجود متد GetPagedListAsync ندارد و صرفا برای تشریح ارتباط مطالبی که قبلا منتشر شده بود، مطرح شد.
پیاده سازی اکشن متدهای Index و List
public partial class RolesController : BaseController { #region Fields private readonly IRoleService _service; private readonly ILookupService _lookupService; #endregion #region Constractor public RolesController(IRoleService service, ILookupService lookupService) { Guard.ArgumentNotNull(service, nameof(service)); Guard.ArgumentNotNull(lookupService, nameof(lookupService)); _service = service; _lookupService = lookupService; } #endregion #region Index / List [HttpGet] public virtual async Task<ActionResult> Index() { var query = new RolePagedQueryModel(); var result = await _service.GetPagedListAsync(query).ConfigureAwait(false); var pagedList = new PagedListModel<RoleModel> { Query = query, Result = result }; var model = new RoleIndexViewModel { PagedListModel = pagedList, Permissions = _lookupService.GetPermissions() }; return View(model); } [HttpGet, AjaxOnly, NoOutputCache] public virtual async Task<ActionResult> List(RolePagedQueryModel query) { var result = await _service.GetPagedListAsync(query).ConfigureAwait(false); var model = new PagedListModel<RoleModel> { Query = query, Result = result }; return PartialView(MVC.Administration.Roles.Views._List, model); } #endregion }
به عنوان مثال در بالا کنترلر مربوط به گروههای کاربری را مشاهده میکنید. به دلیل اینکه علاوه بر مباحث صفحه بندی و مرتب سازی، امکان جستجو بر اساس نام و دسترسیهای گروه کاربری را نیز نیاز داریم، لازم است مدل زیر را ایجاد کنیم:
public class RolePagedQueryModel : PagedQueryModel { public string Name { get; set; } public string Permission { get; set; } }
در این مورد خاص لازم است لیست دسترسیهای موجود درسیستم به صورت لیستی برای انتخاب در فرم جستجو مهیا باشد. فرم جستجو در ویو مربوط به اکشن Index قرار میگیرد و قرار نیست به همراه پارشال ویو List_ در هر درخواستی از سرور دریافت شود. لذا لازم است مدلی برای ویو Index در نظر بگیریم که به شکل زیر میباشد:
public class RoleIndexViewModel { public RoleIndexViewModel() { Permissions = new List<LookupItem>(); } public IReadOnlyList<LookupItem> Permissions { get; set; } public PagedListModel<RoleModel> PagedListModel { get; set; } }
پراپرتی PagedListModel در برگیرنده اطلاعات مربوط به نمایش اولیه جدول اطلاعات میباشد و پراپرتی Permissions لیست دسترسیهای موجود درسیستم را به ویو منتقل خواهد کرد. اگر ویو ایندکس شما به داده اضافه ای نیاز ندارد، از ایجاد مدل بالا صرف نظر کنید.
ویو Index.cshtml
@model RoleIndexViewModel @{ ViewBag.Title = L("Administration.Views.Role.Index.Title"); ViewBag.ActiveMenu = AdministrationMenuNames.RoleManagement; } <div class="row"> <div class="col-md-12"> <div id="filterPanel" class="panel-collapse collapse" role="tabpanel" aria-labelledby="filterPanel"> <div class="panel panel-default margin-bottom-5"> <div class="panel-body"> @using (Ajax.BeginForm(MVC.Administration.Roles.List(), new AjaxOptions { UpdateTargetId = "RolesList", HttpMethod = "GET" }, new { id = "filterForm", data_submit_on_reset = "true" })) { <div class="row"> <div class="col-md-3"> <input type="text" name="Name" class="form-control" value="" placeholder="@L("Administration.Role.Fields.Name")" /> </div> <div class="col-md-3"> @Html.DropDownList("Permission", Model.Permissions.ToSelectListItems(), L("Administration.Views.Role.FilterBy.Permission"),new {@class="form-control"}) </div> <div class="col-md-3"> <button type="submit" role="button" class="btn btn-info"> @L("Commands.Filter") </button> <button type="reset" role="button" class="btn btn-default"> <i class="fa fa-close"></i> @L("Commands.Reset") </button> </div> </div> } </div> </div> </div> </div> </div> <div class="row"> <div class="col-md-12" id="RolesList"> @{Html.RenderPartial(MVC.Administration.Roles.Views._List, Model.PagedListModel);} </div> </div>
فرم جستجو باید دارای ویژگی data_submit_on_reset با مقدار "true" باشد. به منظور پاکسازی فرم جستجو و ارسال درخواست جستجو با فرمی خالی از داده، برای بازگشت به حالت اولیه از تکه کد زیر استفاده خواهد شد:
$(document).on("reset", "form[data-submit-on-reset]", function () { var form = this; setTimeout(function () { $(form).submit(); }); });
در ادامه پارشال ویو List_ با داده ارسالی به ویو Index، رندر شده و کار نمایش اولیه اطلاعات به صورت جدولی به اتمام میرسد.
پارشال ویو List.cshtml_
@model PagedListModel<RoleModel> @{ Layout = null; var rowNumber = (Model.Query.Page - 1) * Model.Query.PageSize + 1; var refreshUrl = Url.Action(MVC.Administration.Roles.List().AddRouteValues(new RouteValueDictionary(Model.Query.ToDictionary()))); } <div class="panel panel-default margin-bottom-5"> <table class="table table-bordered table-hover" id="RolesListTable" data-ajax-refresh-url="@refreshUrl" data-ajax-refresh-update="#RolesList"> <thead> <tr> <th style="width: 5%;"> # </th> <th class="col-md-3 sortable"> @Html.SortableColumn("Name", L("Administration.Role.Fields.Name"), Model.Query, "RolesList", routeValueDictionary => Url.Action(MVC.Administration.Roles.List().AddRouteValues(routeValueDictionary))) </th> <th class="col-md-3 sortable"> @Html.SortableColumn("DisplayName", L("Administration.Role.Fields.DisplayName"), Model.Query, "RolesList", routeValueDictionary => Url.Action(MVC.Administration.Roles.List().AddRouteValues(routeValueDictionary))) </th> <th class="col-md-3 sortable"> @Html.SortableColumn("IsDefault", L("Administration.Role.Fields.IsDefault"), Model.Query, "RolesList", routeValueDictionary => Url.Action(MVC.Administration.Roles.List().AddRouteValues(routeValueDictionary))) </th> <th style="width: 5%;"></th> </tr> </thead> <tbody> @foreach (var role in Model.Result.Items) { <tr> <td>@(rowNumber++.ToPersianNumbers())</td> <td>@role.Name</td> <td>@role.DisplayName</td> <td class="text-center">@Html.DisplayFor(a => role.IsDefault)</td> <td class="text-center operations"> <div class="btn-group"> <span class="fa fa-ellipsis-h dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span> <ul class="dropdown-menu dropdown-menu-left"> <li> <a href="#" role="button" data-ajax="true" data-ajax-method="GET" data-ajax-update="#main-modal div.modal-content" data-ajax-url="@Url.Action(MVC.Administration.Roles.Edit(role.Id))" data-toggle="modal" data-target="#main-modal"> <i class="fa fa-pencil"></i> @L("Commands.Edit") </a> </li> <li> <a href="#" role="button" id="delete-@role.Id" data-delete-url="@Url.Action(MVC.Administration.Roles.Delete())" data-delete-model='{"Id":"@role.Id","RowVersion":"@Convert.ToBase64String(role.RowVersion)"}'> <i class="fa fa-trash"></i> @L("Commands.Delete") </a> </li> </ul> </div> </td> </tr> } </tbody> </table> </div> <div class="row"> <div class="col-md-8"> @Html.Pager(Model, "RolesList", routeValueDictionary => Url.Action(MVC.Administration.Roles.List().AddRouteValues(routeValueDictionary))) @Html.PageSize("RolesList", Model.Query, routeValueDictionary => Url.Action(MVC.Administration.Roles.List().AddRouteValues(routeValueDictionary)), new { @class = "margin-right-5" }, "filterForm") @Html.Refresh("RolesList", Model.Query, routeValueDictionary => Url.Action(MVC.Administration.Roles.List().AddRouteValues(routeValueDictionary)), L("Commands.Refresh")) </div> </div>
به ترتیب فایل بالا را بررسی میکنیم:
var refreshUrl = Url.Action(MVC.Administration.Roles.List().AddRouteValues(new RouteValueDictionary(Model.Query.ToDictionary())));
refreshUrl برای ارسال درخواست به اکشن متد List در نظر گرفته شدهاست که در کوئری استرینگ مربوط به خود، اطلاعاتی (مرتب سازی، شماره صفحه، اطلاعات جستجو و همچنین تعداد آیتمهای موجود در هر صفحه) را دارد که حالت فعلی گرید را میتوانیم دوباره از سرور درخواست کنیم.
<table class="table table-bordered table-hover" id="RolesListTable" data-ajax-refresh-url="@refreshUrl" data-ajax-refresh-update="#RolesList">
دو ویژگی data-ajax-refresh-url و data-ajax-refresh-update برای جدولی که لازم است عملیات CRUD را پشتیبانی کند، لازم میباشد. در قسمت دوم به استفاده از این دو ویژگی در هنگام عملیات ثبت، ویرایش و حذف خواهیم پرداخت.
<th class="col-md-3 sortable"> @Html.SortableColumn("Name", L("Administration.Role.Fields.Name"), Model.Query, "RolesList", routeValueDictionary => Url.Action(MVC.Administration.Roles.List().AddRouteValues(routeValueDictionary))) </th>
ستونی که امکان مرتب سازی را دارد باید th آن، کلاس sortable را داشته باشد. همچنین باید از هلپری که پیاده سازی آن را در ادامه خواهیم دید، استفاده کنیم. این هلپر، نام فیلد، عنوان ستون، مدل Query و همچین یک urlFactory را در قالب یک Func<RouteValueDictionary,string> دریافت میکند.
پیاده سازی هلپر SortableColumn
public static MvcHtmlString SortableColumn(this HtmlHelper html, string columnName, string columnDisplayName, IPagedQueryModel queryModel, string updateTargetId, Func<RouteValueDictionary, string> urlFactory) { var dictionary = queryModel.ToDictionary(); var routeValueDictionary = new RouteValueDictionary(dictionary) { ["SortExpression"] = !queryModel.SortExpression.StartsWith(columnName) ? $"{columnName}_DESC" : queryModel.SortExpression.EndsWith("DESC") ? $"{columnName}_ASC" : queryModel.SortExpression.EndsWith("ASC") ? string.Empty : $"{columnName}_DESC" }; var url = urlFactory(routeValueDictionary); var aTag = new TagBuilder("a"); aTag.Attributes.Add("href", "#"); aTag.Attributes.Add("data-ajax", "true"); aTag.Attributes.Add("data-ajax-method", "GET"); aTag.Attributes.Add("data-ajax-update", updateTargetId.StartsWith("#") ? updateTargetId : $"#{updateTargetId}"); aTag.Attributes.Add("data-ajax-url", url); aTag.InnerHtml = columnDisplayName; var iconCssClass = !queryModel.SortExpression.StartsWith(columnName) ? "fa-sort" : queryModel.SortExpression.EndsWith("DESC") ? "fa-sort-down" : "fa-sort-up"; var iTag = new TagBuilder("i"); iTag.AddCssClass($"fa {iconCssClass}"); return new MvcHtmlString($"{aTag}\n{iTag}"); }
ابتدا مدل Query با متد الحاقی زیر تبدیل به دیکشنری میشود. این کار از این جهت مهم است که پراپرتیهای لیست موجود در مدل Query، لازم است به فرم خاصی به سرور ارسال شوند که در تکه کد زیر مشخص میباشد.
public static IDictionary<string, object> ToDictionary(this object source) { return source.ToDictionary<object>(); } public static IDictionary<string, T> ToDictionary<T>(this object source) { if (source == null) throw new ArgumentNullException(nameof(source)); var dictionary = new Dictionary<string, T>(); foreach (PropertyDescriptor property in TypeDescriptor.GetProperties(source)) { AddPropertyToDictionary(property, source, dictionary); } return dictionary; } private static void AddPropertyToDictionary<T>(PropertyDescriptor property, object source, IDictionary<string, T> dictionary) { var value = property.GetValue(source); var items = value as IEnumerable; if (items != null && !(items is string)) { var i = 0; foreach (var item in items) { dictionary.Add($"{property.Name}[{i++}]", (T)item); } } else if (value is T) { dictionary.Add(property.Name, (T)value); } }
در متد بالا، از TypeDescriptor که یکی دیگر از ابزارهای دسترسی به متا دیتای انوع دادهای است، استفاده شده و خروجی نهایی آن یک دیکشنری با کلیدهایی با اسامی پراپرتیهای وهله ورودی میباشد.
در ادامه پیاده سازی هلپر SortableColumn، از دیکشنری حاصل، یک وهله از RouteValueDictionary ساخته میشود. در زمان رندر شدن PartialView لازم است مشخص شود که برای دفعه بعدی که بر روی این ستون کلیک میشود، باید چه مقداری با پارامتر SortExpression موجود در کوئری استرینگ ارسال شود. از این جهت برای پشتیبانی ستون، از حالتهای مرتب سازی صعودی، نزولی و برگشت به حالت اولیه بدون مرتب سازی، کد زیر را خواهیم داشت:
var routeValueDictionary = new RouteValueDictionary(dictionary) { ["SortExpression"] = !queryModel.SortExpression.StartsWith(columnName) ? $"{columnName}_DESC" : queryModel.SortExpression.EndsWith("DESC") ? $"{columnName}_ASC" : queryModel.SortExpression.EndsWith("ASC") ? string.Empty : $"{columnName}_DESC" };
در ادامه urlFactory با routeValueDictionary حاصل، Invoke میشود تا url نهایی برای مرتب سازیهای بعدی را از طریق یک لینک تزئین شده با data اتریبیوتهای Unobtrusive Ajax در th مربوطه قرار دهیم.
برای مباحث صفحه بندی، بارگزاری مجدد و تغییر تعداد آیتمها در هر صفحه، از سه هلپر زیر کمک خواهیم گرفت:
<div class="row"> <div class="col-md-8"> @Html.Pager(Model, "RolesList", routeValueDictionary => Url.Action(MVC.Administration.Roles.List().AddRouteValues(routeValueDictionary))) @Html.PageSize("RolesList", Model.Query, routeValueDictionary => Url.Action(MVC.Administration.Roles.List().AddRouteValues(routeValueDictionary)), new { @class = "margin-right-5" }, "filterForm") @Html.Refresh("RolesList", Model.Query, routeValueDictionary => Url.Action(MVC.Administration.Roles.List().AddRouteValues(routeValueDictionary)), L("Commands.Refresh")) </div> </div>
پیاده سازی هلپر Pager
public static MvcHtmlString Pager<TModel>(this HtmlHelper html, PagedListModel<TModel> model, string updateTargetId, Func<RouteValueDictionary, string> urlFactory) { return html.PagedListPager( new StaticPagedList<TModel>(model.Result.Items, model.Query.Page, model.Query.PageSize, (int)model.Result.TotalCount), page => { var dictionary = model.Query.ToDictionary(); var routeValueDictionary = new RouteValueDictionary(dictionary) { ["Page"] = page }; return urlFactory(routeValueDictionary); }, PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing( new PagedListRenderOptions { DisplayLinkToFirstPage = PagedListDisplayMode.Always, DisplayLinkToLastPage = PagedListDisplayMode.Always, DisplayLinkToPreviousPage = PagedListDisplayMode.Always, DisplayLinkToNextPage = PagedListDisplayMode.Always, MaximumPageNumbersToDisplay = 6, DisplayItemSliceAndTotal = true, DisplayEllipsesWhenNotShowingAllPageNumbers = true, ItemSliceAndTotalFormat = $"تعداد کل: {model.Result.TotalCount.ToPersianNumbers()}", FunctionToDisplayEachPageNumber = page => page.ToPersianNumbers(), }, new AjaxOptions { AllowCache = false, HttpMethod = "GET", InsertionMode = InsertionMode.Replace, UpdateTargetId = updateTargetId })); }
در متد بالا از کتابخانه PagedList.Mvc استفاده شدهاست. یکی از overloadهای متد PagedListPager آن، یک پارامتر از نوع Func<int, string> به نام generatePageUrl را دریافت میکند که امکان شخصی سازی فرآیند تولید لینک به صفحات بعدی و قبلی را به ما میدهد. ما نیز از این امکان برای افزودن اطلاعات موجود در مدل Query، به کوئری استرینگ لینکهای تولیدی استفاده کردیم و صرفا برای لینکهای ایجادی لازم بود مقادیر پارامتر Page موجود در کوئری استرینگ تغییر کند که در کد بالا مشخص میباشد.
پیاده سازی هلپر PageSize
public static MvcHtmlString PageSize(this HtmlHelper html, string updateTargetId, IPagedQueryModel queryModel, Func<RouteValueDictionary, string> urlFactory, object htmlAttributes = null, string filterFormId = null, params int[] numbers) { if (numbers.Length == 0) numbers = new[] { 10, 20, 30, 50, 100 }; var dictionary = queryModel.ToDictionary(); var routeValueDictionary = new RouteValueDictionary(dictionary) { [nameof(IPagedQueryModel.Page)] = 1 }; routeValueDictionary.Remove(nameof(IPagedQueryModel.PageSize)); var url = urlFactory(routeValueDictionary); var formTag = new TagBuilder("form"); formTag.Attributes.Add("action", url); formTag.Attributes.Add("method", "GET"); formTag.Attributes.Add("data-ajax", "true"); formTag.Attributes.Add("data-ajax-method", "GET"); formTag.Attributes.Add("data-ajax-update", updateTargetId.StartsWith("#") ? updateTargetId : $"#{updateTargetId}"); formTag.Attributes.Add("data-ajax-url", url); if (htmlAttributes != null) formTag.MergeAttributes(HtmlHelper.AnonymousObjectToHtmlAttributes(htmlAttributes)); formTag.AddCssClass("form-inline inline"); var items = numbers.Select(number => new SelectListItem { Value = number.ToString(), Text = number.ToString().ToPersianNumbers(), Selected = queryModel.PageSize == number }); formTag.InnerHtml = html.DropDownList(nameof(IPagedQueryModel.PageSize), items, new { @class = "form-control page-size", onchange = "$(this.form).submit();" }).ToString(); if (filterFormId.IsEmpty()) return new MvcHtmlString($"{formTag}"); // ReSharper disable once MustUseReturnValue var scriptBlock = $"<script type=\"text/javascript\"> if(window.jQuery){{$('form#{filterFormId}').find('input[name=\"{nameof(IPagedQueryModel.PageSize)}\"]').remove();\n $('form#{filterFormId}').append(\"<input type='hidden' name='{nameof(IPagedQueryModel.PageSize)}' value='{queryModel.PageSize}'/>\")}}</script>"; return new MvcHtmlString($"{formTag}\n{scriptBlock}"); }
ایده کار به این صورت است که یک المنت select، درون یک المنت form قرار میگیرد و در زمان change آن، فرم مربوطه submit میشود.
formTag.InnerHtml = html.DropDownList(nameof(IPagedQueryModel.PageSize), items, new { @class = "form-control page-size", onchange = "$(this.form).submit();" }).ToString();
در زمان تغییر تعداد نمایشی آیتمها در هر صفحه، لازم است حالت فعلی گرید حفظ شود و صرفا پارامتر Page ریست شود.
نکته مهم: در این طراحی اگر فرم جستجویی دارید، در زمان جستجو هیچیک از پارامترهای مربوط به صفحه بندی و مرتب سازی به سرور ارسال نخواهند شد (در واقع ریست میشوند) و کافیست یک درخواست GET معمولی با ارسال محتویات فرم به سرور صورت گیرد؛ ولی لازم است PageSize تنظیم شده، در زمان اعمال فیلتر نیز به سرور ارسال شود. از این جهت اسکریپتی برای ایجاد یک input مخفی در فرم جستجو نیز هنگام رندر شدن PartialView در صفحه تزریق میشود.
var scriptBlock = $"<script type=\"text/javascript\"> if(window.jQuery){{$('form#{filterFormId}').find('input[name=\"{nameof(IPagedQueryModel.PageSize)}\"]').remove();\n $('form#{filterFormId}').append(\"<input type='hidden' name='{nameof(IPagedQueryModel.PageSize)}' value='{queryModel.PageSize}'/>\")}}</script>";
پیاده سازی هلپر Refresh
public static MvcHtmlString Refresh(this HtmlHelper html, string updateTargetId, IPagedQueryModel queryModel, Func<RouteValueDictionary, string> urlFactory, string label = null) { var dictionary = queryModel.ToDictionary(); var routeValueDictionary = new RouteValueDictionary(dictionary); var url = urlFactory(routeValueDictionary); var aTag = new TagBuilder("a"); aTag.Attributes.Add("href", "#"); aTag.Attributes.Add("role", "button"); aTag.Attributes.Add("data-ajax", "true"); aTag.Attributes.Add("data-ajax-method", "GET"); aTag.Attributes.Add("data-ajax-update", updateTargetId.StartsWith("#") ? updateTargetId : $"#{updateTargetId}"); aTag.Attributes.Add("data-ajax-url", url); aTag.AddCssClass("btn btn-default"); var iTag = new TagBuilder("i"); iTag.AddCssClass("fa fa-refresh"); aTag.InnerHtml = $"{iTag} {label}"; return new MvcHtmlString(aTag.ToString()); }
متد بالا نیز به مانند refreshUrl که پیشتر مطرح شد، برای بارگزاری مجدد حالت فعلی گرید استفاده میشود و از این جهت است که مقادیر مربوط به کلیدهای routeValueDictionary را تغییر ندادهایم.
روش دیگر برای مدیریت این چنین کارهایی، استفاده از یک المنت form و قرادادن کل گرید به همراه یک سری input مخفی معادل با پارامترهای دریافتی اکشن متد List و مقدار دهی آنها در زمان کلیک بر روی دکمههای صفحه بندی، بارگزاری مجدد، دکمه اعمال فیلتر و لیست آبشاری تنظیم تعداد آیتمها، درون آن نیز میتواند کار ساز باشد؛ اما در زمان پیاده سازی خواهید دید که پیاده سازی آن خیلی سرراست، به مانند پیاده سازی موجود در مطلب جاری نخواهد بود.
در قسمت دوم، به پیاده سازی عملیات ثبت، ویرایش و حذف برپایه مودالهای بوت استرپ و افزونه Unobtrusive Ajax خواهیم پرداخت.
کدهای کامل قسمت جاری، بعد از انتشار قسمت دوم، در مخزن گیت هاب شخصی قرار خواهد گرفت.
مدرسه هوش مصنوعی
Dive in and learn how to start building intelligence into your solutions with the Microsoft AI platform, including pre-trained AI services like Cognitive Services and Bot Framework, as well as deep learning tools like Azure Machine Learning, Visual Studio Code Tools for AI, and Cognitive Toolkit. Our platform enables any developer to code in any language and infuse AI into your apps. Whether your solutions are existing or new, this is the intelligence platform to build on.