افزودن فیلد آپلود تصاویر، به فرم ثبت اطلاعات یک اتاق
در ادامه به کامپوننت Pages\HotelRoom\HotelRoomUpsert.razor که تا این قسمت آنرا تکمیل کردهایم مراجعه کرده و فیلد جدید InputFile را ذیل قسمت ثبت توضیحات، اضافه میکنیم:
<div class="form-group"> <InputFile OnChange="HandleImageUpload" multiple></InputFile> </div> @code { private async Task HandleImageUpload(InputFileChangeEventArgs args) { } }
- در این کامپوننت، رویداد OnChange، پس از تغییر مجموعهی فایلهای اضافه شدهی به آن، فراخوانی میشود و آرگومانی از نوع InputFileChangeEventArgs را دریافت میکند.
افزودن لیست فایلهای انتخابی به HotelRoomDTO
تا اینجا اگر به BlazorServer.Models\HotelRoomDTO.cs مراجعه کنیم (کلاسی که مدل UI فرم ثبت اطلاعات اتاق را فراهم میکند)، امکان افزودن لیست تصاویر انتخابی به آن وجود ندارد. به همین جهت در این کلاس، تغییر زیر را اعمال میکنیم:
using System; using System.Collections.Generic; using System.ComponentModel.DataAnnotations; namespace BlazorServer.Models { public class HotelRoomDTO { // ... public virtual ICollection<HotelRoomImageDTO> HotelRoomImages { get; set; } = new List<HotelRoomImageDTO>(); } }
تکمیل متد رویدادگردان HandleImageUpload
در ادامه، لیست فایلهای انتخاب شدهی توسط کاربر را دریافت کرده و آنها را آپلود میکنیم:
@inject IHotelRoomService HotelRoomService @inject NavigationManager NavigationManager @inject IJSRuntime JsRuntime @inject IFileUploadService FileUploadService @inject IWebHostEnvironment WebHostEnvironment @code { // ... private async Task HandleImageUpload(InputFileChangeEventArgs args) { var files = args.GetMultipleFiles(maximumFileCount: 5); if (args.FileCount == 0 || files.Count == 0) { return; } var allowedExtensions = new List<string> { ".jpg", ".png", ".jpeg" }; if(!files.Any(file => allowedExtensions.Contains(Path.GetExtension(file.Name), StringComparer.OrdinalIgnoreCase))) { await JsRuntime.ToastrError("Please select .jpg/.jpeg/.png files only."); return; } foreach (var file in files) { var uploadedImageUrl = await FileUploadService.UploadFileAsync(file, WebHostEnvironment.WebRootPath, "Uploads"); HotelRoomModel.HotelRoomImages.Add(new HotelRoomImageDTO { RoomImageUrl = uploadedImageUrl }); } } }
@using Microsoft.AspNetCore.Hosting @using System.Linq @using System.IO
- متد ()args.GetMultipleFiles، امکان دسترسی به فایلهای انتخابی توسط کاربر را میسر میکند که خروجی آن از نوع <IReadOnlyList<IBrowserFile است. در قسمت قبل، سرویس آپلود فایلهایی را که تکمیل کردیم، امکان آپلود یک IBrowserFile را به سرور میسر میکند. اگر متد ()GetMultipleFiles را بدون پارامتری فراخوانی کنیم، حداکثر 10 فایل را قبول میکند و اگر تعداد بیشتری انتخاب شده باشد، یک استثناء را صادر خواهد کرد.
- سپس بر اساس پسوند فایلهای دریافتی، آنها را صرفا به فایلهای تصویری محدود کردهایم.
- در آخر، لیست فایلهای دریافتی را یکی یکی به سرور آپلود کرده و Url دسترسی به آنها را به لیست HotelRoomImages اضافه میکنیم. فایلهای آپلود شده در پوشهی BlazorServer.App\wwwroot\Uploads قابل مشاهده هستند.
نمایش فایلهای انتخاب شدهی توسط کاربر
در ادامه میخواهیم پس از آپلود فایلها، آنها را در ذیل کامپوننت InputFile نمایش دهیم. برای اینکار در ابتدا به فایل wwwroot\css\site.css مراجعه کرده و شیوه نامهی نمایش تصاویر و عناوین آنها را اضافه میکنیم:
.room-image { display: block; width: 100%; height: 150px; background-size: cover !important; border: 3px solid green; position: relative; } .room-image-title { position: absolute; top: 0; right: 0; background-color: green; color: white; padding: 0px 6px; display: inline-block; }
<div class="form-group"> <InputFile OnChange="HandleImageUpload" multiple></InputFile> <div class="row"> @if (HotelRoomModel.HotelRoomImages.Count > 0) { var serial = 1; foreach (var roomImage in HotelRoomModel.HotelRoomImages) { <div class="col-md-2 mt-3"> <div class="room-image" style="background: url('@roomImage.RoomImageUrl') 50% 50%; "> <span class="room-image-title">@serial</span> </div> <button type="button" class="btn btn-outline-danger btn-block mt-4">Delete</button> </div> serial++; } } </div> </div>
ذخیره سازی اطلاعات تصاویر آپلودی یک اتاق در بانک اطلاعاتی
تا اینجا موفق شدیم تصاویر انتخابی کاربر را آپلود کرده و همچنین لیست آنها را نیز نمایش دهیم. در ادامه نیاز است تا این اطلاعات را در بانک اطلاعاتی ثبت کنیم. به همین جهت ابتدا سرویس IHotelRoomImageService را که در قسمت قبل تکمیل کردیم، به کامپوننت جاری تزریق میکنیم و سپس با استفاده از متد CreateHotelRoomImageAsync، رکوردهای تصویر متناظر با اتاق ثبت شده را اضافه میکنیم:
// ... @inject IHotelRoomImageService HotelRoomImageService @code { // ... private async Task AddHotelRoomImageAsync(HotelRoomDTO roomDto) { foreach (var imageDto in HotelRoomModel.HotelRoomImages) { imageDto.RoomId = roomDto.Id; await HotelRoomImageService.CreateHotelRoomImageAsync(imageDto); } } }
HotelRoomModel.HotelRoomImages.Add(new HotelRoomImageDTO { RoomImageUrl = uploadedImageUrl });
محل فراخوانی AddHotelRoomImageAsync فوق، در متد HandleHotelRoomUpsert است که در قسمتهای قبل تکمیل کردیم. در اینجا پس از ثبت اطلاعات اتاق در بانک اطلاعاتی است که به Id آن دسترسی پیدا میکنیم:
private async Task HandleHotelRoomUpsert() { // ... // Create Mode var createdRoomDto = await HotelRoomService.CreateHotelRoomAsync(HotelRoomModel); await AddHotelRoomImageAsync(createdRoomDto); await JsRuntime.ToastrSuccess($"The `{HotelRoomModel.Name}` created successfully."); // ... }
یک نکته: در انتهای بحث خواهیم دید که اینکار غیرضروری است و با وجود رابطهی one-to-many تعریف شدهی توسط EF-Core، اگر لیست HotelRoomImages موجودیت اتاق تعریف شده و در حال ثبت نیز مقدار دهی شده باشد، به صورت خودکار جزئی از این رابطه و تنها در یک رفت و برگشت، ثبت میشود. یعنی همان متد CreateHotelRoomAsync، قابلیت ثبت خودکار اطلاعات خاصیت HotelRoomImages موجودیت اتاق را نیز دارا است.
نمایش تصاویر یک اتاق، در حالت ویرایش رکورد آن
تا اینجا فقط حالت ثبت یک رکورد جدید را پوشش دادیم. در این حالت اگر به لیست اتاقهای ثبت شده مراجعه کرده و بر روی دکمهی edit یکی از آنها کلیک کنیم، به صفحهی ویرایش رکورد منتقل خواهیم شد؛ اما این صفحه، فاقد اطلاعات تصاویر منتسب به آن رکورد است.
علت اینجا است که در حین ویرایش اطلاعات، در متد OnInitializedAsync، هرچند اطلاعات یک اتاق را از بانک اطلاعاتی دریافت کرده و آنرا تبدیل به Dto آن میکنیم که سبب نمایش جزئیات هر خاصیت در فیلد متصل به آن در فرم جاری میشود:
protected override async Task OnInitializedAsync() { if (Id.HasValue) { // Update Mode Title = "Update"; HotelRoomModel = await HotelRoomService.GetHotelRoomAsync(Id.Value); } // ... }
بنابراین به فایل BlazorServer\BlazorServer.Services\HotelRoomService.cs مراجعه کرده و تغییرات زیر را اعمال میکنیم:
namespace BlazorServer.Services { public class HotelRoomService : IHotelRoomService { // ... public IAsyncEnumerable<HotelRoomDTO> GetAllHotelRoomsAsync() { return _dbContext.HotelRooms .Include(x => x.HotelRoomImages) .ProjectTo<HotelRoomDTO>(_mapperConfiguration) .AsAsyncEnumerable(); } public Task<HotelRoomDTO> GetHotelRoomAsync(int roomId) { return _dbContext.HotelRooms .Include(x => x.HotelRoomImages) .ProjectTo<HotelRoomDTO>(_mapperConfiguration) .FirstOrDefaultAsync(x => x.Id == roomId); } } }
افزودن تصاویر جدید، در حین ویرایش یک رکورد
پس از نمایش لیست تصاویر منتسب به یک اتاق در حال ویرایش، اکنون میخواهیم در همین حالت اگر کاربر تصویر جدیدی را انتخاب کرد، این تصویر را نیز به لیست تصاویر ثبت شدهی در بانک اطلاعاتی اضافه کنیم. برای اینکار نیز به متد HandleHotelRoomUpsert مراجعه کرده و از متد AddHotelRoomImageAsync در قسمت به روز رسانی آن استفاده میکنیم:
private async Task HandleHotelRoomUpsert() { //... // Update Mode var updatedRoomDto = await HotelRoomService.UpdateHotelRoomAsync(HotelRoomModel.Id, HotelRoomModel); await AddHotelRoomImageAsync(updatedRoomDto); await JsRuntime.ToastrSuccess($"The `{HotelRoomModel.Name}` updated successfully."); //... }
برای رفع این مشکل میتوان در متد AddHotelRoomImageAsync، جدید بودن یک تصویر را بر اساس RoomId آن بررسی کرد. اگر این RoomId مساوی صفر بود، یعنی تازه به لیست اضافه شدهاست و حاصل بارگذاری اولیهی فرم ویرایش اطلاعات نیست:
private async Task AddHotelRoomImageAsync(HotelRoomDTO roomDto) { foreach (var imageDto in HotelRoomModel.HotelRoomImages.Where(x => x.RoomId == 0)) { imageDto.RoomId = roomDto.Id; await HotelRoomImageService.CreateHotelRoomImageAsync(imageDto); } }
یک نکته: متد AddHotelRoomImageAsync اضافی است!
چون از AutoMapper استفاده میکنیم، در ابتدای متد ثبت یک اتاق، کار نگاشت DTO، به موجودیت متناظر با آن انجام میشود:
public async Task<HotelRoomDTO> CreateHotelRoomAsync(HotelRoomDTO hotelRoomDTO) { var hotelRoom = _mapper.Map<HotelRoom>(hotelRoomDTO);
مقدار دهی RoomId یک تصویر، در اینجا غیرضروری است؛ چون RoomId و Room، به عنوان کلید خارجی این رابطه تعریف شدهاند که در اینجا Room یک تصویر، دقیقا همین اتاق در حال ثبت است و EF Core در حین ثبت نهایی، آنرا به صورت خودکار در تمام تصاویر مرتبط نیز مقدار دهی میکند.
یعنی نیازی به چندین بار رفت و برگشت تعریف شدهی در متد AddHotelRoomImageAsync نیست و اساسا نیازی به آن نیست؛ نه برای ثبت و نه برای ویرایش اطلاعات!
کدهای کامل این مطلب را از اینجا میتوانید دریافت کنید: Blazor-5x-Part-17.zip