بیایید کد کلاس ProductFacad را که به عنوان فاساد (Facade) برای مدیریت عملیات‌های مرتبط با محصولات در سیستم استفاده می‌شود، بررسی کنیم. توضیحات کد: تعریف کلاس: csharp public class ProductFacad : IProductFacad { private readonly IDataBaseContext _context; private readonly IHostingEnvironment _environment; public ProductFacad(IDataBaseContext context, IHostingEnvironment hostingEnvironment) { _context = context; _environment = hostingEnvironment; } } این کلاس ProductFacad از اینترفیس IProductFacad پیاده‌سازی می‌کند. دو فیلد خصوصی _context و _environment تعریف شده‌اند که از طریق سازنده مقداردهی می‌شوند. _context برای دسترسی به دیتابیس و _environment برای دسترسی به محیط میزبانی استفاده می‌شود. سرویس‌های مختلف فاساد: AddNewCategoryService: csharp private AddNewCategoryService _addNewCategory; public AddNewCategoryService AddNewCategoryService { get { return _addNewCategory = _addNewCategory ?? new AddNewCategoryService(_context); } } این ویژگی یک نمونه از AddNewCategoryService را بازمی‌گرداند. اگر نمونه قبلاً ایجاد نشده باشد، آن را ایجاد می‌کند. IGetCategoriesService: csharp private IGetCategoriesService _getCategoriesService; public IGetCategoriesService GetCategoriesService { get { return _getCategoriesService = _getCategoriesService ?? new GetCategoriesService(_context); } } این ویژگی یک نمونه از IGetCategoriesService را بازمی‌گرداند. اگر نمونه قبلاً ایجاد نشده باشد، آن را ایجاد می‌کند. AddNewProductService: csharp private AddNewProductService _addNewProductService; public AddNewProductService AddNewProductService { get { return _addNewProductService = _addNewProductService ?? new AddNewProductService(_context, _environment); } } این ویژگی یک نمونه از AddNewProductService را بازمی‌گرداند. اگر نمونه قبلاً ایجاد نشده باشد، آن را ایجاد می‌کند. IGetAllCategoriesService: csharp private IGetAllCategoriesService _getAllCategoriesService; public IGetAllCategoriesService GetAllCategoriesService { get { return _getAllCategoriesService = _getAllCategoriesService ?? new GetAllCategoriesService(_context); } } این ویژگی یک نمونه از IGetAllCategoriesService را بازمی‌گرداند. اگر نمونه قبلاً ایجاد نشده باشد، آن را ایجاد می‌کند. IGetProductForAdminService: csharp private IGetProductForAdminService _getProductForAdminService; public IGetProductForAdminService GetProductForAdminService { get { return _getProductForAdminService = _getProductForAdminService ?? new GetProductForAdminService(_context); } } این ویژگی یک نمونه از IGetProductForAdminService را بازمی‌گرداند. اگر نمونه قبلاً ایجاد نشده باشد، آن را ایجاد می‌کند. IGetProductDetailForAdminService: csharp private IGetProductDetailForAdminService _getProductDetailForAdminService; public IGetProductDetailForAdminService GetProductDetailForAdminService { get { return _getProductDetailForAdminService = _getProductDetailForAdminService ?? new GetProductDetailForAdminService(_context); } } این ویژگی یک نمونه از IGetProductDetailForAdminService را بازمی‌گرداند. اگر نمونه قبلاً ایجاد نشده باشد، آن را ایجاد می‌کند. IGetProductForSiteService: csharp private IGetProductForSiteService _getProductForSiteService; public IGetProductForSiteService GetProductForSiteService { get { return _getProductForSiteService = _getProductForSiteService ?? new GetProductForSiteService(_context); } } این ویژگی یک نمونه از IGetProductForSiteService را بازمی‌گرداند. اگر نمونه قبلاً ایجاد نشده باشد، آن را ایجاد می‌کند. IGetProductDetailForSiteService: csharp private IGetProductDetailForSiteService _getProductDetailForSiteService; public IGetProductDetailForSiteService GetProductDetailForSiteService { get { return _getProductDetailForSiteService = _getProductDetailForSiteService ?? new GetProductDetailForSiteService(_context); } } این ویژگی یک نمونه از IGetProductDetailForSiteService را بازمی‌گرداند. اگر نمونه قبلاً ایجاد نشده باشد، آن را ایجاد می‌کند.

نتیجه‌گیری: این کلاس ProductFacad به عنوان یک فاساد عمل می‌کند که دسترسی به سرویس‌های مختلف مربوط به محصولات را فراهم می‌کند. با استفاده از ویژگی‌های مختلف، این کلاس سرویس‌هایی مانند اضافه کردن دسته‌بندی، دریافت دسته‌بندی‌ها، اضافه کردن محصول، دریافت اطلاعات محصولات برای ادمین‌ها و سایت، و دریافت جزئیات محصولات برای سایت را ارائه می‌دهد. این طراحی کمک می‌کند تا عملیات‌های پیچیده به صورت ساده‌تر و یکپارچه‌تر مدیریت شوند.

بیایید کد این اینترفیس IProductFacad را که به منظور تعریف قراردادهای مختلف برای مدیریت عملیات‌های مرتبط با محصولات استفاده می‌شود بررسی کنیم. توضیحات کد: تعریف نام‌فضا: csharp namespace Test_Store.Application.Interfaces.FacadPatterns این خط کد نام‌فضایی (namespace) به نام Test_Store.Application.Interfaces.FacadPatterns تعریف می‌کند که اینترفیس IProductFacad در آن قرار دارد. تعریف اینترفیس IProductFacad: csharp public interface IProductFacad { AddNewCategoryService AddNewCategoryService { get; } IGetCategoriesService GetCategoriesService { get; } AddNewProductService AddNewProductService { get; } IGetAllCategoriesService GetAllCategoriesService { get; } IGetProductForAdminService GetProductForAdminService { get; } IGetProductDetailForAdminService GetProductDetailForAdminService { get; } IGetProductForSiteService GetProductForSiteService { get; } IGetProductDetailForSiteService GetProductDetailForSiteService { get; } } ویژگی‌های اینترفیس: AddNewCategoryService: csharp AddNewCategoryService AddNewCategoryService { get; } این ویژگی یک شیء از نوع AddNewCategoryService بازمی‌گرداند که برای اضافه کردن دسته‌بندی جدید استفاده می‌شود. IGetCategoriesService: csharp IGetCategoriesService GetCategoriesService { get; } این ویژگی یک شیء از نوع IGetCategoriesService بازمی‌گرداند که برای دریافت دسته‌بندی‌ها استفاده می‌شود. AddNewProductService: csharp AddNewProductService AddNewProductService { get; } این ویژگی یک شیء از نوع AddNewProductService بازمی‌گرداند که برای اضافه کردن محصول جدید استفاده می‌شود. IGetAllCategoriesService: csharp IGetAllCategoriesService GetAllCategoriesService { get; } این ویژگی یک شیء از نوع IGetAllCategoriesService بازمی‌گرداند که برای دریافت همه دسته‌بندی‌ها استفاده می‌شود. IGetProductForAdminService: csharp IGetProductForAdminService GetProductForAdminService { get; } این ویژگی یک شیء از نوع IGetProductForAdminService بازمی‌گرداند که برای دریافت اطلاعات محصولات برای مدیران استفاده می‌شود. IGetProductDetailForAdminService: csharp IGetProductDetailForAdminService GetProductDetailForAdminService { get; } این ویژگی یک شیء از نوع IGetProductDetailForAdminService بازمی‌گرداند که برای دریافت جزئیات محصولات برای مدیران استفاده می‌شود. IGetProductForSiteService: csharp IGetProductForSiteService GetProductForSiteService { get; } این ویژگی یک شیء از نوع IGetProductForSiteService بازمی‌گرداند که برای دریافت محصولات برای نمایش در سایت استفاده می‌شود. IGetProductDetailForSiteService: csharp IGetProductDetailForSiteService GetProductDetailForSiteService { get; } این ویژگی یک شیء از نوع IGetProductDetailForSiteService بازمی‌گرداند که برای دریافت جزئیات محصولات برای نمایش در سایت استفاده می‌شود. نتیجه‌گیری: این اینترفیس IProductFacad به شما امکان می‌دهد تا قراردادهای مختلف برای مدیریت عملیات‌های مرتبط با محصولات را تعریف کنید. با استفاده از این اینترفیس، می‌توانید به صورت یکپارچه و ساده به عملیات‌های مختلفی مانند اضافه کردن دسته‌بندی، دریافت دسته‌بندی‌ها، اضافه کردن محصول، دریافت اطلاعات محصولات برای ادمین‌ها و سایت، و دریافت جزئیات محصولات برای سایت دسترسی داشته باشید. این طراحی کمک می‌کند تا عملیات‌های پیچیده به صورت ساده‌تر و یکپارچه‌تر مدیریت شوند.

متصل کردن منو به دیتابیس و مدیریت منو فروشگگاه در ادمین و پیاده سازی جستجو

بیایید این کد را که برای مدیریت منوها در یک سیستم استفاده می‌شود بررسی کنیم. توضیحات کد: تعریف اینترفیس IGetMenuItemService: csharp public interface IGetMenuItemService { ResultDto<List<MenuItemDto>> Execute(); } این اینترفیس یک متد Execute تعریف می‌کند که هیچ پارامتری دریافت نمی‌کند و یک ResultDto<List<MenuItemDto>> را بازمی‌گرداند. این متد به منظور دریافت لیست آیتم‌های منو استفاده می‌شود. کلاس GetMenuItemService: فیلدهای خصوصی و سازنده: csharp public class GetMenuItemService : IGetMenuItemService { private readonly IDataBaseContext _context; public GetMenuItemService(IDataBaseContext context) { _context = context; } } این کلاس شامل یک فیلد خصوصی _context از نوع IDataBaseContext و یک سازنده است که این فیلد را مقداردهی اولیه می‌کند. متد Execute: csharp public ResultDto<List<MenuItemDto>> Execute() { var category = _context.Categories .Include(p => p.SubCategories) .Where(p => p.ParentCategoryId == null) .ToList() .Select(p => new MenuItemDto { CatId = p.Id, Name = p.Name, Child = p.SubCategories.ToList().Select(child => new MenuItemDto { CatId = child.Id, Name = child.Name, }).ToList(), }).ToList(); return new ResultDto<List<MenuItemDto>>() { Data = category, IsSuccess = true, }; } این متد لیست دسته‌بندی‌ها را از دیتابیس دریافت می‌کند و سپس آن‌ها را به صورت یک لیست MenuItemDto بازمی‌گرداند. از Include برای بارگذاری اطلاعات مرتبط (زیردسته‌ها) استفاده می‌شود. از Where برای فیلتر کردن دسته‌بندی‌ها که ParentCategoryId آن‌ها null است استفاده می‌شود. هر دسته‌بندی به یک MenuItemDto تبدیل می‌شود که شامل شناسه دسته‌بندی (CatId)، نام دسته‌بندی (Name) و لیست زیردسته‌ها (Child) است. نتیجه به عنوان یک ResultDto<List<MenuItemDto>> شامل لیست دسته‌بندی‌ها و وضعیت موفقیت‌آمیز بودن عملیات بازگردانده می‌شود. کلاس MenuItemDto: csharp public class MenuItemDto { public long CatId { get; set; } public string Name { get; set; } public List<MenuItemDto> Child { get; set; } } این کلاس شامل جزئیات آیتم‌های منو است. CatId: شناسه دسته‌بندی. Name: نام دسته‌بندی. Child : لیستی از آیتم‌های زیردسته. نتیجه‌گیری: این کد به شما امکان می‌دهد تا لیست دسته‌بندی‌ها و زیردسته‌ها را از دیتابیس دریافت کنید و به صورت یک ساختار درختی (Nested Structure) برای مدیریت منوها بازگردانید. از اینترفیس IGetMenuItemService برای تعریف قرارداد و از کلاس GetMenuItemService برای پیاده‌سازی این قرارداد استفاده می‌شود. داده‌ها به صورت یک لیست MenuItemDto بازگردانده می‌شوند که شامل دسته‌بندی‌ها و زیردسته‌های آن‌ها است.

بیایید کد کلاس GetMenu که به عنوان یک ViewComponent در پروژه ASP.NET Core استفاده می‌شود را بررسی کنیم. همچنین، توضیح خواهیم داد که پوشه ViewComponents و کلاس GetMenu چه کاربردی دارند. ViewComponents در ASP.NET Core: ViewComponents در ASP.NET Core به شما امکان می‌دهند تا بخش‌های قابل تکرار و قابل استفاده مجدد از رابط کاربری (UI) را ایجاد کنید. مشابه Partial Views هستند اما با قابلیت‌ها و امکانات بیشتر. ViewComponents می‌توانند منطق خود را داشته باشند و داده‌ها را از سرویس‌ها یا دیتابیس دریافت کنند و آن‌ها را به View ارسال کنند. توضیحات کد: تعریف کلاس GetMenu: csharp public class GetMenu : ViewComponent { private readonly IGetMenuItemService _getMenuItemService; public GetMenu(IGetMenuItemService getMenuItemService) { _getMenuItemService = getMenuItemService; } } کلاس GetMenu از کلاس پایه ViewComponent ارث‌بری می‌کند. یک فیلد خصوصی _getMenuItemService از نوع IGetMenuItemService تعریف شده است. سازنده کلاس GetMenu فیلد _getMenuItemService را از طریق تزریق وابستگی مقداردهی اولیه می‌کند. متد Invoke: csharp public IViewComponentResult Invoke() { var menuItem = _getMenuItemService.Execute(); return View(viewName: "GetMenu", menuItem.Data); } متد Invoke برای اجرای ViewComponent استفاده می‌شود. از سرویس IGetMenuItemService برای دریافت داده‌های منو استفاده می‌شود. نتیجه داده‌های دریافت شده به View به نام "GetMenu" ارسال می‌شود. پوشه ViewComponents: پوشه ViewComponents در پروژه‌های ASP.NET Core معمولاً برای نگهداری کلاس‌های ViewComponent استفاده می‌شود. این پوشه به شما کمک می‌کند تا کلاس‌های ViewComponent خود را سازماندهی و مدیریت کنید. فایل View مربوط به ViewComponent: برای ViewComponent به نام GetMenu، فایل View مربوطه باید در مسیر زیر قرار گیرد: Views/Shared/Components/GetMenu/Default.cshtml یا اگر ViewComponent به صورت دقیق‌تری تعریف شده باشد: Views/Shared/Components/GetMenu/GetMenu.cshtml نتیجه‌گیری: کلاس GetMenu به عنوان یک ViewComponent عمل می‌کند که منوی سایت را با استفاده از سرویس IGetMenuItemService دریافت و نمایش می‌دهد. ViewComponents به شما امکان می‌دهند تا بخش‌های قابل استفاده مجدد و قابل تکرار از UI را ایجاد کنید و آن‌ها را در پروژه‌های ASP.NET Core خود به کار ببرید.

بیایید کد ویوی GetMenu.cshtml را که برای نمایش منوی سایت استفاده می‌شود بررسی کنیم. توضیحات کد: اضافه کردن فضای نام‌ها و مدل: csharp @using Test_Store.Application.Services.Common.Queries.GetMenuItem; @model List<MenuItemDto> @using برای استفاده از فضای نام سرویس‌های مورد نیاز برای دریافت داده‌های منو. @model برای تعریف مدل داده‌ای که به ویو ارسال می‌شود. در اینجا مدل List<MenuItemDto> است که شامل لیستی از آیتم‌های منو است. تنظیم Layout: csharp @{ Layout = null; } Layout = null به این معنا است که این ویو از هیچ Layout استفاده نمی‌کند. نمایش منوها: از @foreach برای پیمایش مدل (لیست آیتم‌های منو) و نمایش هر آیتم منو استفاده شده است. html @foreach (var item in Model) { <li id="nav-menu-item" class="menu-item nav-overlay"> <a href="#" class="current-link-menu"> @item.Name </a> @if (item.Child.Count() > 0) { <ul class="sub-menu is-mega-menu-small"> @foreach (var itemChild in item.Child) { <li class="menu-mega-item menu-item-type-mega-menu item-small"> <a href="~/products/index?CatId=@itemChild.CatId" class="mega-menu-link"> @itemChild.Name </a> </li> } </ul> } </li> } لیست اصلی منو (<li id="nav-menu-item" class="menu-item nav-overlay">): این کد هر آیتم منوی اصلی را نمایش می‌دهد. @item.Name: نام آیتم منو را نمایش می‌دهد. بررسی وجود زیردسته‌ها (@if (item.Child.Count() > 0)): اگر آیتم منو دارای زیردسته باشد، زیردسته‌ها نمایش داده می‌شوند. لیست زیردسته‌ها (<ul class="sub-menu is-mega-menu-small">): از @foreach برای پیمایش زیردسته‌ها و نمایش آن‌ها استفاده شده است. @itemChild.Name: نام زیردسته را نمایش می‌دهد. لینک هر زیردسته به صفحه‌ای با شناسه دسته‌بندی (CatId) اشاره می‌کند. نتیجه‌گیری: این کد به شما امکان می‌دهد تا یک منوی سایت با استفاده از داده‌های دریافتی از سرویس GetMenuItemService ایجاد کنید. آیتم‌های منو و زیردسته‌های آن‌ها به صورت داینامیک از مدل List<MenuItemDto> دریافت و نمایش داده می‌شوند. این طراحی به شما کمک می‌کند تا منوهای سایت خود را به صورت پویا مدیریت و نمایش دهید.

بیایید کد سرویس GetCategoryService و اینترفیس IGetCategoryService را که برای جستجوی دسته‌بندی‌ها استفاده می‌شود بررسی کنیم. توضیحات کد: تعریف اینترفیس IGetCategoryService: csharp public interface IGetCategoryService { ResultDto<List<CategoryDto>> Execute(); } این اینترفیس یک متد Execute تعریف می‌کند که هیچ پارامتری دریافت نمی‌کند و یک ResultDto<List<CategoryDto>> را بازمی‌گرداند. این متد به منظور دریافت لیست دسته‌بندی‌ها استفاده می‌شود. کلاس GetCategoryService: فیلدهای خصوصی و سازنده: csharp public class GetCategoryService : IGetCategoryService { private readonly IDataBaseContext _context; public GetCategoryService(IDataBaseContext context) { _context = context; } } این کلاس شامل یک فیلد خصوصی _context از نوع IDataBaseContext و یک سازنده است که این فیلد را مقداردهی اولیه می‌کند. متد Execute: csharp public ResultDto<List<CategoryDto>> Execute() { var category = _context.Categories .Where(p => p.ParentCategoryId == null) .ToList() .Select(p => new CategoryDto { CatId = p.Id, CategoryName = p.Name, }).ToList(); return new ResultDto<List<CategoryDto>>() { Data = category, IsSuccess = true, }; } این متد لیست دسته‌بندی‌ها را از دیتابیس دریافت می‌کند و سپس آن‌ها را به صورت یک لیست CategoryDto بازمی‌گرداند. از Where برای فیلتر کردن دسته‌بندی‌ها که ParentCategoryId آن‌ها null است استفاده می‌شود. این یعنی فقط دسته‌بندی‌های اصلی (بدون والد) را دریافت می‌کند. هر دسته‌بندی به یک CategoryDto تبدیل می‌شود که شامل شناسه دسته‌بندی (CatId) و نام دسته‌بندی (CategoryName) است. نتیجه به عنوان یک ResultDto<List<CategoryDto>> شامل لیست دسته‌بندی‌ها و وضعیت موفقیت‌آمیز بودن عملیات بازگردانده می‌شود. کلاس CategoryDto: csharp public class CategoryDto { public long CatId { get; set; } public string CategoryName { get; set; } } این کلاس شامل جزئیات دسته‌بندی است. CatId: شناسه دسته‌بندی. CategoryName: نام دسته‌بندی. نتیجه‌گیری: این کد به شما امکان می‌دهد تا لیست دسته‌بندی‌های اصلی را از دیتابیس دریافت کنید. از اینترفیس IGetCategoryService برای تعریف قرارداد و از کلاس GetCategoryService برای پیاده‌سازی این قرارداد استفاده می‌شود. داده‌ها به صورت یک لیست CategoryDto بازگردانده می‌شوند که شامل شناسه و نام دسته‌بندی‌ها است. این طراحی به شما کمک می‌کند تا دسته‌بندی‌ها را به صورت ساختار‌یافته مدیریت و نمایش دهید.

بیایید کد کلاس Search که به عنوان یک ViewComponent در پروژه ASP.NET Core استفاده می‌شود را بررسی کنیم. توضیحات کد: تعریف کلاس Search: csharp public class Search : ViewComponent { private readonly IGetCategoryService _getCategoryService; public Search(IGetCategoryService getCategoryService) { _getCategoryService = getCategoryService; } } کلاس Search از کلاس پایه ViewComponent ارث‌بری می‌کند. یک فیلد خصوصی _getCategoryService از نوع IGetCategoryService تعریف شده است. سازنده کلاس Search فیلد _getCategoryService را از طریق تزریق وابستگی مقداردهی اولیه می‌کند. متد Invoke: csharp public IViewComponentResult Invoke() { return View(viewName: "Search", _getCategoryService.Execute().Data); } متد Invoke برای اجرای ViewComponent استفاده می‌شود. از سرویس IGetCategoryService برای دریافت داده‌های دسته‌بندی استفاده می‌شود. نتیجه داده‌های دریافت شده به ویو با نام "Search" ارسال می‌شود. پوشه ViewComponents: پوشه ViewComponents در پروژه‌های ASP.NET Core معمولاً برای نگهداری کلاس‌های ViewComponent استفاده می‌شود. این پوشه به شما کمک می‌کند تا کلاس‌های ViewComponent خود را سازماندهی و مدیریت کنید. فایل View مربوط به ViewComponent: برای ViewComponent به نام Search، فایل View مربوطه باید در مسیر زیر قرار گیرد: Views/Shared/Components/Search/Search.cshtml نتیجه‌گیری: کلاس Search به عنوان یک ViewComponent عمل می‌کند که منوی جستجو را با استفاده از سرویس IGetCategoryService دریافت و نمایش می‌دهد. ViewComponents به شما امکان می‌دهند تا بخش‌های قابل استفاده مجدد و قابل تکرار از رابط کاربری (UI) را ایجاد کنید و آن‌ها را در پروژه‌های ASP.NET Core خود به کار ببرید.

بیایید کد بخش از فایل کنترلر ProductsController را که مربوط به نمایش لیست محصولات است بررسی کنیم. توضیحات کد: تعریف متد Index: csharp public IActionResult Index(string Searchkey, long? CatId = null, int page = 1) { return View(_productFacad.GetProductForSiteService.Execute(Searchkey, page, CatId).Data); } این متد به نام Index برای نمایش لیست محصولات استفاده می‌شود. سه پارامتر ورودی دارد: Searchkey از نوع string: کلید جستجو برای فیلتر کردن محصولات بر اساس متن جستجو شده توسط کاربر. CatId از نوع long? (nullable long): شناسه دسته‌بندی برای فیلتر کردن محصولات بر اساس دسته‌بندی. مقدار پیش‌فرض آن null است. page از نوع int: شماره صفحه برای صفحه‌بندی لیست محصولات. مقدار پیش‌فرض آن ۱ است. دریافت و نمایش محصولات: داخل متد Index، سرویس GetProductForSiteService از طریق فاساد محصولات (_productFacad) فراخوانی می‌شود: csharp _productFacad.GetProductForSiteService.Execute(Searchkey, page, CatId) متد Execute در سرویس GetProductForSiteService اجرا می‌شود که محصولات را بر اساس کلید جستجو، دسته‌بندی و صفحه‌بندی مورد نظر دریافت می‌کند. نتیجه این فراخوانی شامل داده‌های محصولات است که به ویو ارسال می‌شود: csharp return View(_productFacad.GetProductForSiteService.Execute(Searchkey, page, CatId).Data); این خط کد داده‌های دریافت شده را به ویو مربوطه ارسال می‌کند تا در آنجا نمایش داده شوند. نتیجه‌گیری: این کد متد Index در کنترلر ProductsController را پیاده‌سازی می‌کند که برای نمایش لیست محصولات استفاده می‌شود. شامل پارامترهایی برای جستجو، فیلتر بر اساس دسته‌بندی، و صفحه‌بندی است. سرویس GetProductForSiteService از طریق فاساد محصولات برای دریافت داده‌های محصولات فراخوانی می‌شود و نتیجه به ویو مربوطه ارسال می‌شود.

بیایید کد ویوی Search.cshtml را که برای بخش جستجوی محصولات در سایت استفاده می‌شود بررسی کنیم. توضیحات کد: اضافه کردن فضای نام‌ها و مدل: csharp @using Test_Store.Application.Services.Common.Queries.GetCategory; @model List<CategoryDto>; @using برای استفاده از فضای نام سرویس‌های مورد نیاز برای دریافت داده‌های دسته‌بندی. @model برای تعریف مدل داده‌ای که به ویو ارسال می‌شود. در اینجا مدل List<CategoryDto> است که شامل لیستی از دسته‌بندی‌ها است. تنظیم Layout: csharp @{ Layout = null; } Layout = null به این معنا است که این ویو از هیچ Layout استفاده نمی‌کند. فرم جستجو: html <form asp-action="Index" asp-controller="Products" class="form-search "> <input type="search" class="header-search-input" name="SearchKey" placeholder="نام کالا، برند و یا دسته مورد نظر خود را جستجو کنید…"> <div class="action-btns fa"> <button type="submit"> <i class="fa fa-search"></i> </button> <div class="search-filter"> <div class="form-ui "> <div class="custom-select-ui"> <select class="right" name="CatId" asp-items="@(new SelectList(Model,"CatId","CategoryName"))"> <option>همه دسته ها</option> </select> </div> </div> </div> </div> </form> فرم جستجو (<form>): این فرم به اکشن Index در کنترلر Products ارسال می‌شود. کلاس form-search برای استایل‌دهی به فرم جستجو استفاده شده است. فیلد ورودی جستجو (<input type="search">): فیلد ورودی جستجو از نوع search است که به کاربر امکان می‌دهد تا نام کالا، برند، یا دسته مورد نظر خود را جستجو کند. نام این فیلد SearchKey است. دکمه جستجو (<button type="submit">): این دکمه برای ارسال فرم جستجو استفاده می‌شود. آیکون fa fa-search برای نمایش آیکون جستجو از کتابخانه FontAwesome استفاده می‌شود. فیلتر دسته‌بندی (<select>): این فیلتر به کاربر امکان می‌دهد تا دسته‌بندی مورد نظر خود را انتخاب کند. نام این فیلد CatId است. از SelectList برای پر کردن گزینه‌های select با داده‌های دسته‌بندی استفاده می‌شود. داده‌ها از مدل List<CategoryDto> دریافت می‌شوند. گزینه پیش‌فرض "همه دسته ها" است که به کاربر امکان می‌دهد همه دسته‌بندی‌ها را مشاهده کند. نتیجه‌گیری: این کد به شما امکان می‌دهد تا یک فرم جستجوی محصولات در سایت خود ایجاد کنید. شامل فیلد ورودی برای جستجوی نام کالا، برند یا دسته، دکمه جستجو با آیکون جستجو، و فیلتر دسته‌بندی است. داده‌های دسته‌بندی از مدل List<CategoryDto> دریافت می‌شوند و به گزینه‌های select افزوده می‌شوند. این طراحی به کاربران کمک می‌کند تا به راحتی محصولات مورد نظر خود را جستجو و فیلتر کنند.

بیایید کد بخشی از فایل _Layout.cshtml که مربوط به نمایش ViewComponent Search است بررسی کنیم. توضیحات کد: html <div class="col-md-6"> @* viewcomponent search *@ @await Component.InvokeAsync("Search") </div> ساختار و استایل: html <div class="col-md-6"> این خط کد یک عنصر div با کلاس col-md-6 ایجاد می‌کند. کلاس col-md-6 از فریمورک Bootstrap استفاده می‌کند تا عرض این div را به اندازه ۶ ستون از ۱۲ ستون موجود در سیستم شبکه‌بندی (grid system) تنظیم کند. نمایش ViewComponent Search: csharp @* viewcomponent search *@ @await Component.InvokeAsync("Search") این قسمت از کد، یک ViewComponent به نام Search را به‌صورت غیرهمزمان (async) فراخوانی می‌کند. @await Component.InvokeAsync("Search"): این خط کد ViewComponent Search را اجرا می‌کند و نتیجه آن را در اینجا نمایش می‌دهد. کامنت @* viewcomponent search *@ به عنوان توضیحی برای مشخص کردن اینکه این بخش مربوط به ViewComponent Search است، استفاده شده است. نتیجه‌گیری: این کد در فایل _Layout.cshtml قرار دارد و وظیفه آن نمایش ViewComponent Search است. ViewComponent Search به عنوان یک بخش قابل استفاده مجدد از رابط کاربری (UI) عمل می‌کند که در اینجا به طور خاص برای جستجو در محصولات استفاده می‌شود. استفاده از ViewComponents به شما امکان می‌دهد تا بخش‌های مختلف UI را به صورت ماژولار و قابل استفاده مجدد طراحی کنید و آن‌ها را در صفحات مختلف وبسایت خود به کار ببرید.