افزودن دکمهی ویرایش، به رکوردهای لیست اتاقها و نمایش جزئیات رکورد در حال ویرایش
تا اینجا کامپوننت Pages\HotelRoom\HotelRoomUpsert.razor دارای یک چنین مسیریابی است:
@page "/hotel-room/create"
@page "/hotel-room/create" @page "/hotel-room/edit/{Id:int}"
پس از تعریف مسیریابی دریافت پارامتر Id رکورد در حال ویرایش، نحوهی واکنش نشان دادن به آن در کامپوننت HotelRoomUpsert.razor به صورت زیر است:
@code { // ... [Parameter] public int? Id { get; set; } protected override async Task OnInitializedAsync() { if (Id.HasValue) { // Update Mode Title = "Update"; HotelRoomModel = await HotelRoomService.GetHotelRoomAsync(Id.Value); } else { // Create Mode HotelRoomModel = new HotelRoomDTO(); } } // ... }
- سپس میخواهیم در زمان بارگذاری کامپوننت جاری، اگر مقدار Id، تنظیم شده بود، تمام فیلدهای فرم متصل به شیء HotelRoomModel را به صورت خودکار بر اساس اطلاعات رکورد متناظر با آن در بانک اطلاعاتی، مقدار دهی اولیه کنیم.
<EditForm Model="HotelRoomModel" OnValidSubmit="HandleHotelRoomUpsert">
کار مقدار دهی اولیهی فیلدهای یک کامپوننت نیز باید در روال رویداد گردان OnInitializedAsync انجام شود که نمونهای از آن را در کدهای فوق مشاهده میکنید. در این مثال اگر Id مقدار داشته باشد، مقدار آنرا به متد GetHotelRoomAsync ارسال کرده و سپس شیء DTO دریافتی از آنرا به مدل فرم انتساب میدهیم تا فرم ویرایشی، قابل استفاده شود:
در ادامه برای ساده سازی رسیدن به مسیرهایی مانند hotel-room/edit/1، به کامپوننت Pages\HotelRoom\HotelRoomList.razor مراجعه کرده و در همان ردیفی که اطلاعات رکورد یک اتاق را نمایش میدهیم، لینکی را نیز به صفحهی ویرایش آن، اضافه میکنیم:
<tr> <td>@room.Name</td> <td>@room.Occupancy</td> <td>@room.RegularRate.ToString("c")</td> <td>@room.SqFt</td> <td> <NavLink href="@($"hotel-room/edit/{room.Id}")" class="btn btn-primary">Edit</NavLink> </td> </tr>
مدیریت ثبت اطلاعات ویرایش شدهی یک اتاق، در بانک اطلاعاتی
در حین تکمیل این قسمت میخواهیم پیامهایی مانند موفقیت آمیز بودن عملیات را نیز به کاربر نمایش دهیم. به همین جهت مراحل «Blazor 5x - قسمت یازدهم - مبانی Blazor - بخش 8 - کار با جاوا اسکریپت» را برای افزودن کتابخانهی معروف جاوا اسکریپتی Toastr طی میکنیم که شامل این قسمتها است:
- دریافت و نصب بستههای jquery و toastr
- اصلاح فایل Pages\_Host.cshtml برای افزودن مداخل فایلهای CSS و JS بستههای نصب شده
- تعریف فایل جدید wwwroot\js\common.js برای سادگی کار با توابع جاوا اسکریپتی toastr و افزودن مدخل آن به فایل Pages\_Host.cshtml
- تعریف متدهای الحاقی JSRuntimeExtensions ، جهت کاهش کدهای تکراری فراخوانی متدهای toastr و افزودن فضای نام آن به فایل Imports.razor_
جزئیات این موارد را در قسمت یازدهم این سری میتوانید مطالعه کنید و از تکرار آنها در اینجا صرفنظر میشود. همچنین کدهای تکمیل شدهی این قسمت را از انتهای مطلب جاری نیز میتوانید دریافت کنید.
همچنین پیش از تکمیل ادامهی کدهای ویرایش اطلاعات، نیاز است متد IsRoomUniqueAsync را به صورت زیر اصلاح کنیم:
namespace BlazorServer.Services { public interface IHotelRoomService { Task<bool> IsRoomUniqueAsync(string name, int roomId); // ... } } namespace BlazorServer.Services { public class HotelRoomService : IHotelRoomService { // ... public Task<bool> IsRoomUniqueAsync(string name, int roomId) { if (roomId == 0) { // Create Mode return _dbContext.HotelRooms .ProjectTo<HotelRoomDTO>(_mapperConfiguration) .AnyAsync(x => x.Name != name); } else { // Edit Mode return _dbContext.HotelRooms .ProjectTo<HotelRoomDTO>(_mapperConfiguration) .AnyAsync(x => x.Name != name && x.Id != roomId); } } } }
اکنون متد HandleHotelRoomUpsert کامپوننت Pages\HotelRoom\HotelRoomUpsert.razor جهت مدیریت ثبت و ویرایش اطلاعات به صورت زیر تغییر میکند:
// ... @inject IJSRuntime JsRuntime @code { // ... private async Task HandleHotelRoomUpsert() { var isRoomUnique = await HotelRoomService.IsRoomUniqueAsync(HotelRoomModel.Name, HotelRoomModel.Id); if (!isRoomUnique) { await JsRuntime.ToastrError($"The room name: `{HotelRoomModel.Name}` already exists."); return; } if (HotelRoomModel.Id != 0 && Title == "Update") { // Update Mode var updateResult = await HotelRoomService.UpdateHotelRoomAsync(HotelRoomModel.Id, HotelRoomModel); await JsRuntime.ToastrSuccess($"The `{HotelRoomModel.Name}` updated successfully."); } else { // Create Mode var createResult = await HotelRoomService.CreateHotelRoomAsync(HotelRoomModel); await JsRuntime.ToastrSuccess($"The `{HotelRoomModel.Name}` created successfully."); } NavigationManager.NavigateTo("hotel-room"); } }
- در ابتدا عدم تکراری بودن نام اتاق بررسی میشود:
- در آخر بر اساس Id مدل فرم، حالت ویرایش و یا ثبت اطلاعات را تشخیص میدهیم. البته Id مدل فرم، در حالت ثبت اطلاعات نیز صفر است؛ به علت فراخوانی ()HotelRoomModel = new HotelRoomDTO که سبب مقدار دهی Id آن با عدد پیشفرض صفر میشود. بنابراین صرفا بررسی Id مدل، کافی نیست و برای مثال میتوان عنوان تنظیم شدهی در متد OnInitializedAsync را نیز بررسی کرد.
- پس از تشخیص حالت ویرایش و یا ثبت، یکی از متدهای متناظر HotelRoom Service را مانند UpdateHotelRoomAsync و یا CreateHotelRoomAsync فراخوانی کرده و سپس پیامی را به کاربر نمایش داده و او را به صفحهی نمایش لیست اتاقها، هدایت میکنیم:
کدهای کامل این مطلب را از اینجا میتوانید دریافت کنید: Blazor-5x-Part-15.zip