به عنوان آخرین قسمت مرتبط با تفکر مبتنی‌بر CRUD (CRUD-based thinking)، روش پیاده‌سازی عملیات CRUD موجودیت‌ها را با استفاده از ASP.NET Core MVC و افزونه jquery-unobtrusive-ajax بررسی خواهیم کرد.
در اینجا مشخص کردن ViewName متناظر با موجودیت جاری، الزامی می‌باشد. همانطور که عنوان شد، یک پارشال‌ویو برای عملیات ثبت و ویرایش کفایت میکند و طراحی پشت این کنترلر پایه نیز بر این اساس می‌باشد. گام بعدی، طراحی پارشال‌ویو مذکور می‌باشد.
با استفاده از متد IsNew مدل جاری، اکشن متد متناظر با درخواست POST مشخص شده و سپس از طریق تگ‌هلپر asp-modal-form، فرآیند افزودن ویژگی‌های data-ajax به فرم را خودکار کرده‌ایم. سپس با استفاده از یک Hidden Input با نام save-continue و مقدار true به فرم، عملیات ذخیره کردن بدون بسته شدن فرم را شبیه سازی کرده‌ایم؛ این Input می‌تواند به صورت شرطی به فرم اضافه شود (دکمه‌های ذخیره/ذخیره و بستن و ...) که در سمت سرور با توجه به مقدار ارسالی تصمیم گرفته میشود که دوباره فرم با اطلاعات جدید (در اینجا Id و RowVersion) به کلاینت ارسال شود یا خیر.
بخش فوتر این مودال در برگیرنده دکمه‌های متناظر با اکشن‌های قابل انجام بر روی موجودیت جاری می‌باشد.
مثال دوم: پیاده‌سازی RolesController و طراحی فرم ثبت و ویرایش
در اینجا با ارث‌بری از RoleModel متناظر با موجودیت گروه کاربری، لیست دسترسی‌ها نیز در طریق خصوصیت PermissionList قابل استفاده می‌باشد. حال برای مقداردهی خصوصیت اضافه شده و به طور کلی برای ارسال اطلاعات اضافه به کلاینت در زمان بارگذاری فرم، نیاز است متد RenderView را به شکل زیر بازنویسی کنید:
به عنوان مثال در اینجا از AutoMapper برای وهله سازی از RoleModalViewModel و نگاشت خصوصیات RoleModel، استفاده شده است. به این ترتیب خروجی نهایی در حالت ویرایش به شکل زیر می‌باشد:
برای بررسی بیشتر، پیشنهاد میکنم پروژه DNTFrameworkCore.TestWebApp موجود در مخزن این زیرساخت را بازبینی کنید.
برای شروع لازم است بسته نیوگت زیر را نصب کنید:
PM> Install-Package DNTFrameworkCore.Web
قراردادها، مفاهیم و نکات اولیه
- Refactor کردن فرم‌های ثبت و ویرایش مرتبط با یک Aggregate، به یک PartialView که با یک ViewModel کار میکند. برای موجودیت‌های ساده و پایه، همان Model/DTO، به عنوان Model متناظر با یک ویو یا به اصطلاح ViewModel استفاده میشود؛ ولی برای سایر موارد، از مدلی که نام آن با نام موجودیت + کلمه ModalViewModel یا FormViewModel تشکیل میشود، استفاده خواهیم کرد.
- یک فرم، در قالب یک پارشال‌ویو، به صورت Ajaxای با استفاده از افزونه jquery-unobtrusive-ajax بارگذاری شده و به سرور ارسال خواهد شد.
- یک فرم براساس طراحی خود می‌تواند در قالب یک مودال باز شود، یا به منظور inline-editing آن را بارگذاری و به قسمتی از صفحه که مدنظرتان می‌باشد اضافه شود.
- وجود ویو Index به همراه پارشال‌ویو _List برای نمایش لیستی و یک پارشال‌ویو برای عملیات ثبت و ویرایش الزامی می‌باشد. البته اگر از مکانیزمی که در مطلب « طراحی یک گرید با jQuery Ajax و ASP.NET MVC به همراه پیاده سازی عملیات CRUD» مطرح شد، استفاده نمی‌کنید و نیاز دارید تا اطلاعات صفحه‌بندی شده، مرتب شده و فیلتر شده‌ای را در قالب JSON دریافت کنید، از اکشن‌متد ReadPagedList کنترلر پایه استفاده کنید.
مثال اول: پیاده‌سازی BlogsController و طراحی فرم ثبت و ویرایش
کار با ارث‌بری از کنترلر پایه طراحی شده در زیرساخت به شکل زیر آغاز میشود:
public class BlogsController : CrudController<IBlogService, int, BlogModel>
{
public BlogsController(IBlogService service) : base(service)
{
}
protected override string CreatePermissionName => PermissionNames.Blogs_Create;
protected override string EditPermissionName => PermissionNames.Blogs_Edit;
protected override string ViewPermissionName => PermissionNames.Blogs_View;
protected override string DeletePermissionName => PermissionNames.Blogs_Delete;
protected override string ViewName => "_BlogModal";
}
<form asp-action="@(Model.IsNew() ? "Create" : "Edit")" asp-controller="Blogs" asp-modal-form="BlogForm">
<div>
<input type="hidden" name="save-continue" value="true"/>
<input asp-for="RowVersion" type="hidden"/>
<input asp-for="Id" type="hidden"/>
<div>
<div>
<label asp-for="Title"></label>
<input asp-for="Title" autocomplete="off"/>
<span asp-validation-for="Title"></span>
</div>
</div>
<div>
<div>
<label asp-for="Url"></label>
<input asp-for="Url" type="url"/>
<span asp-validation-for="Url"></span>
</div>
</div>
</div>
...
</form> 
<div>
<a asp-modal-delete-link asp-model-id="@Model.Id" asp-modal-toggle="false"
asp-controller="Blogs" asp-action="Delete" asp-if="!Model.IsNew()" asp-permission="@PermissionNames.Blogs_Delete"
title="Delete Blog">
<i></i>
</a>
<a title="Refresh Blog" asp-if="!Model.IsNew()" asp-modal-link asp-modal-toggle="false"
asp-controller="Blogs" asp-action="Edit" asp-route-id="@Model.Id">
<i></i>
</a>
<a title="New Blog" asp-modal-link asp-modal-toggle="false"
asp-controller="Blogs" asp-action="Create">
<i></i>
</a>
<button type="button" data-dismiss="modal">
<i></i> Cancel
</button>
<button type="submit">
<i></i> Save Changes
</button>
</div> در این فرم ابتدا 3 دکمه میانبر برای عملیات حذف، بازنشانی و جدید درنظر گرفته شده‌اند؛ برای حذف که از طریق تگ‌هلپر asp-modal-delete-link کار افزودن خودکار ویژگی‌های data-ajax انجام شده و در نهایت با توجه به اکشن‌متد و کنترلر مشخص شده، یک مودال، برای گرفتن تأیید از کاربر باز میشود و در زمان پذیرش درخواست، حذف مدل جاری به سرور ارسال خواهد شد. با استفاده از تگ‌هلپر asp-permission نیز دسترسی مورد نیاز برای مشاهده دکمه مورد نظر را مشخص کرده‌ایم. دکمه‌های بازنشانی و جدید، در اینجا از طریق تگ‌هلپر asp-modal-link تبدیل به یک لینک Ajaxای شده است که کار بارگذاری یک پارشال‌ویو را انجام می‌دهند؛ همچنین با استفاده از ویژگی asp-modal-toggle متناظر با تگ‌هلپر مذکور با مقدار false، مشخص کرده‌ایم که صرفا محتوای مودال جاری جایگزین شود و نیاز به گشوده شدن دوباره آن نیست.
خروجی نهایی در حالت ویرایش به شکل زیر می‌باشد:
نکته قابل توجه در طراحی فرم‌های ثبت و ویرایش موجودیت‌های پیچیده‌تر مربوط است به ارسال اطلاعات اضافه‌تر از هر آنچه در مدل وجود دارد به کلاینت و همچنین دریافت اطلاعات در ساختار تودرتو یا به اصطلاح یک گراف از اشیاء. به عنوان مثال برای ثبت یک گروه کاربری نیاز است لیست دسترسی‌ها را نیز در فرم نمایش دهیم تا توسط کاربر انتخاب شود؛ در این حالت نیاز است یک مدل متناظر و متناسب را به شکل زیر طراحی کرد:
public class RoleModalViewModel : RoleModel
{
public IReadOnlyList<LookupItem> PermissionList { get; set; }
} protected override IActionResult RenderView(RoleModel role)
{
var model = _mapper.Map<RoleModalViewModel>(role);
model.PermissionList = ReadPermissionList();
return PartialView(ViewName, model);
} 
برای مدیریت سناریوهای Master-Detail به مانند قسمت مدیریت دسترسی‌ها در تب Permissions فرم بالا، امکاناتی در زیرساخت تعبیه شده است ولی پیاده‌سازی آن را به عنوان یک تمرین و با توجه به سری مطالب «Editing Variable Length Reorderable Collections in ASP.NET MVC» به شما واگذار میکنم.
نکته تکمیلی: برای ارسال اطلاعات اضافی به ویو Index متناظر با یک موجودیت میتوانید متد RenderIndex را به شکل زیر بازنویسی کنید:
protected override IActionResult RenderIndex(IPagedQueryResult<RoleReadModel> model)
{
var indexModel = new RoleIndexViewModel
{
Items = model.Items,
TotalCount = model.TotalCount,
Permissions = ReadPermissionList()
};
return Request.IsAjaxRequest()
? (IActionResult) PartialView(indexModel)
: View(indexModel);
} مدل RoleIndexViewModel استفاده شده در تکه کد بالا نیز به شکل زیر خواهد بود:
public class RoleIndexViewModel : PagedQueryResult<RoleReadModel>
{
public IReadOnlyList<LookupItem> Permissions { get; set; }
}
فرآیند بارگذاری یک پارشال‌ویو در مودال
به عنوان مثال برای استفاده از مودال‌های بوت استرپ، ایده کار به این شکل است که یک مودال را به شکل زیر در فایل Layout قرار دهید:
<div class="modal fade" @*tabindex="-1"*@ id="main-modal" data-keyboard="true" data-backdrop="static" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-body">
Loading...
</div>
</div>
</div>
</div> سپس در زمان کلیک بروی یک دکمه Ajaxای، ابتدا main-modal را نمایش داده و بعد از دریافت پارشال‌ویو از سرور، آن را با محتوای modal-content جایگزین می‌کنیم. به همین دلیل Tag Halperهای مطرح شده در مطلب جاری، callbackهای failure/complete/success متناظر با unobtrusive-ajax را نیز مقداردهی می‌کنند. برای این منظور نیاز است تا متدهای جاوااسکریپتی زیر نیز در سطح شیء window تعریف شده باشند:
/*---------------------------------- asp-modal-link ---------------------------*/
window.handleModalLinkLoaded = function (data, status, xhr) {
prepareForm('#main-modal.modal form');
};
window.handleModalLinkFailed = function (xhr, status, error) {
//....
};
/*---------------------------------- asp-modal-form ---------------------------*/
window.handleModalFormBegin = function (xhr) {
$('#main-modal a').addClass('disabled');
$('#main-modal button').attr('disabled', 'disabled');
};
window.handleModalFormComplete = function (xhr, status) {
$('#main-modal a').removeClass('disabled');
$('#main-modal button').removeAttr('disabled');
};
window.handleModalFormSucceeded = function (data, status, xhr) {
if (xhr.getResponseHeader('Content-Type') === 'text/html; charset=utf-8') {
prepareForm('#main-modal.modal form');
} else {
hideMainModal();
}
};
window.handleModalFormFailed = function (xhr, status, error, formId) {
if (xhr.status === 400) {
handleBadRequest(xhr, formId);
}
};
برای بررسی بیشتر، پیشنهاد میکنم پروژه DNTFrameworkCore.TestWebApp موجود در مخزن این زیرساخت را بازبینی کنید.
