ایتا - پروژه ASP.Net Core MVC (وب و سی شارپ)

پروژه ASP.Net Core MVC (وب و سی شارپ)

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

1 مشاهده12:02

پروژه ASP.Net Core MVC (وب و سی شارپ)

بیایید کد این اینترفیس 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 به شما امکان می‌دهد تا قراردادهای مختلف برای مدیریت عملیات‌های مرتبط با محصولات را تعریف کنید. با استفاده از این اینترفیس، می‌توانید به صورت یکپارچه و ساده به عملیات‌های مختلفی مانند اضافه کردن دسته‌بندی، دریافت دسته‌بندی‌ها، اضافه کردن محصول، دریافت اطلاعات محصولات برای ادمین‌ها و سایت، و دریافت جزئیات محصولات برای سایت دسترسی داشته باشید. این طراحی کمک می‌کند تا عملیات‌های پیچیده به صورت ساده‌تر و یکپارچه‌تر مدیریت شوند.

1 مشاهده12:03

پروژه ASP.Net Core MVC (وب و سی شارپ)

Test_Store 10.zip

حجم: 54.8M

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

1 مشاهده12:51

پروژه ASP.Net Core MVC (وب و سی شارپ)

بیایید این کد را که برای مدیریت منوها در یک سیستم استفاده می‌شود بررسی کنیم.

توضیحات کد:
تعریف اینترفیس 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 بازگردانده می‌شوند که شامل دسته‌بندی‌ها و زیردسته‌های آن‌ها است.

1 مشاهده12:56

پروژه ASP.Net Core MVC (وب و سی شارپ)

بیایید کد کلاس 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 خود به کار ببرید.

1 مشاهده13:04

پروژه ASP.Net Core MVC (وب و سی شارپ)

بیایید کد ویوی 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> دریافت و نمایش داده می‌شوند. این طراحی به شما کمک می‌کند تا منوهای سایت خود را به صورت پویا مدیریت و نمایش دهید.

1 مشاهده13:10

پروژه ASP.Net Core MVC (وب و سی شارپ)

بیایید کد سرویس 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 بازگردانده می‌شوند که شامل شناسه و نام دسته‌بندی‌ها است. این طراحی به شما کمک می‌کند تا دسته‌بندی‌ها را به صورت ساختار‌یافته مدیریت و نمایش دهید.

1 مشاهده13:13

پروژه ASP.Net Core MVC (وب و سی شارپ)

بیایید کد کلاس 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 خود به کار ببرید.

1 مشاهده13:16

پروژه ASP.Net Core MVC (وب و سی شارپ)

بیایید کد بخش از فایل کنترلر 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 از طریق فاساد محصولات برای دریافت داده‌های محصولات فراخوانی می‌شود و نتیجه به ویو مربوطه ارسال می‌شود.

1 مشاهده13:20

پروژه ASP.Net Core MVC (وب و سی شارپ)

بیایید کد ویوی 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 افزوده می‌شوند. این طراحی به کاربران کمک می‌کند تا به راحتی محصولات مورد نظر خود را جستجو و فیلتر کنند.

1 مشاهده13:22

پروژه ASP.Net Core MVC (وب و سی شارپ)

بیایید کد بخشی از فایل _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 را به صورت ماژولار و قابل استفاده مجدد طراحی کنید و آن‌ها را در صفحات مختلف وبسایت خود به کار ببرید.

1 مشاهده13:25

پروژه ASP.Net Core MVC (وب و سی شارپ)

بیایید کد بخشی از فایل _Layout.cshtml که مربوط به نمایش منوی ناوبری است را بررسی کنیم.

توضیحات کد:
ساختار و استایل:

html
<div class="col-md-12">
این خط کد یک عنصر div با کلاس col-md-12 ایجاد می‌کند.

کلاس col-md-12 از فریمورک Bootstrap استفاده می‌کند تا عرض این div را به اندازه ۱۲ ستون از ۱۲ ستون موجود در سیستم شبکه‌بندی (grid system) تنظیم کند، یعنی عرض کامل.

لیست منو:

html
<ul>
    <li id="nav-menu-item" class="menu-item nav-overlay">
        <a href="~/home" class="current-link-menu">
            صفحه اصلی
        </a>
    </li>
    @* ViewComponent Menu *@
    @await Component.InvokeAsync("GetMenu")
    <li id="nav-menu-item" class="menu-item nav-overlay">
        <a href="#" class="current-link-menu">
            درباره ما
        </a>
    </li>

    <li id="nav-menu-item" class="menu-item nav-overlay">
        <a href="#" class="current-link-menu">
            تماس با ما
        </a>
    </li>
</ul>
لیست ناوبری (<ul>):

این خط کد یک لیست بدون‌نظم (ul) ایجاد می‌کند که شامل آیتم‌های ناوبری است.

آیتم‌های منوی ناوبری:

هر آیتم منوی ناوبری (<li>) شامل یک لینک (<a>) است که به صفحه مشخصی ارجاع می‌دهد.

صفحه اصلی:

html
<li id="nav-menu-item" class="menu-item nav-overlay">
    <a href="~/home" class="current-link-menu">
        صفحه اصلی
    </a>
</li>
این آیتم منوی ناوبری به صفحه اصلی سایت (~/home) اشاره می‌کند.

نمایش ViewComponent GetMenu:

csharp
@* ViewComponent Menu *@
@await Component.InvokeAsync("GetMenu")
این قسمت از کد، ViewComponent GetMenu را به‌صورت غیرهمزمان (async) فراخوانی می‌کند.

@await Component.InvokeAsync("GetMenu"): 
این خط کد ViewComponent GetMenu را اجرا می‌کند و نتیجه آن را در اینجا نمایش می‌دهد.

کامنت @* ViewComponent Menu *@ به عنوان توضیحی برای مشخص کردن اینکه این بخش مربوط به ViewComponent GetMenu است، استفاده شده است.

درباره ما و تماس با ما:

html
<li id="nav-menu-item" class="menu-item nav-overlay">
    <a href="#" class="current-link-menu">
        درباره ما
    </a>
</li>

<li id="nav-menu-item" class="menu-item nav-overlay">
    <a href="#" class="current-link-menu">
        تماس با ما
    </a>
</li>
این آیتم‌های منوی ناوبری به صفحات "درباره ما" و "تماس با ما" اشاره می‌کنند.

نتیجه‌گیری:
این کد در فایل _Layout.cshtml قرار دارد و وظیفه آن نمایش منوی ناوبری در سایت است. شامل لینک‌های به صفحه اصلی، صفحه "درباره ما"، و صفحه "تماس با ما" است. علاوه بر این، ViewComponent GetMenu برای نمایش منوی داینامیک که از سرویس مربوطه داده‌ها را دریافت می‌کند، فراخوانی می‌شود. این طراحی به شما امکان می‌دهد تا منوی ناوبری سایت خود را به صورت ساختار‌یافته و پویا مدیریت کنید.

1 مشاهده13:27

مطالب بعدی

پرسش‌ها

قوانین

داغ‌ترین‌ها

چندسکویی