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

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

بیایید این بخش از کد Program.cs را که مربوط به افزودن سرویس‌ها به کانتینر وابستگی‌ها است بررسی کنیم. توضیحات کد: csharp builder.Services.AddScoped<IGetMenuItemService, GetMenuItemService>(); builder.Services.AddScoped<IGetCategoryService, GetCategoryService>(); افزودن سرویس‌ها به کانتینر وابستگی‌ها: این خطوط کد سرویس‌های IGetMenuItemService و IGetCategoryService را به کانتینر وابستگی‌ها اضافه می‌کنند. از متد AddScoped برای افزودن این سرویس‌ها استفاده شده است. متد AddScoped: AddScoped یک متد از IServiceCollection است که یک سرویس را با زمان حیات scoped ثبت می‌کند. سرویس‌هایی که به صورت scoped ثبت می‌شوند، برای هر درخواست HTTP جدید ایجاد می‌شوند و در طول عمر آن درخواست HTTP به اشتراک گذاشته می‌شوند. تعریف سرویس‌ها: IGetMenuItemService به عنوان اینترفیس سرویس و GetMenuItemService به عنوان پیاده‌سازی آن ثبت می‌شود: csharp builder.Services.AddScoped<IGetMenuItemService, GetMenuItemService>(); این خط کد تضمین می‌کند که هر زمان که IGetMenuItemService نیاز باشد، نمونه‌ای از GetMenuItemService ایجاد و تزریق شود. IGetCategoryService به عنوان اینترفیس سرویس و GetCategoryService به عنوان پیاده‌سازی آن ثبت می‌شود: csharp builder.Services.AddScoped<IGetCategoryService, GetCategoryService>(); این خط کد تضمین می‌کند که هر زمان که IGetCategoryService نیاز باشد، نمونه‌ای از GetCategoryService ایجاد و تزریق شود. نتیجه‌گیری: این بخش از کد Program.cs، سرویس‌های IGetMenuItemService و IGetCategoryService را به کانتینر وابستگی‌ها (Dependency Injection Container) اضافه می‌کند و زمان حیات آن‌ها را به صورت scoped تعیین می‌کند. این طراحی به شما کمک می‌کند تا سرویس‌های مورد نیاز را به صورت خودکار به کنترلرها و سایر اجزای برنامه تزریق کنید و مدیریت وابستگی‌ها را ساده‌تر کنید.

توضیحات: username = "admin" و password = "1234" اینترفیس و سرویس تولید عدد تصادفی: اینترفیس IRandomNumberService متدی برای تولید عدد تصادفی تعریف می‌کند. کلاس RandomNumberService این متد را پیاده‌سازی می‌کند و عدد تصادفی تولید می‌کند. تنظیم Program.cs: سرویس تولید عدد تصادفی در Program.cs ثبت می‌شود تا در کنترلرها قابل دسترسی باشد. کنترلر AccountController: متدهای لاگین و داشبورد در این کنترلر قرار دارند. متد لاگین از سرویس تولید عدد تصادفی استفاده می‌کند و عملیات اعتبارسنجی را انجام می‌دهد. ویوهای لاگین و داشبورد: ویوی لاگین شامل فرم ورود، فیلدهای یوزر، پسورد و عدد تصادفی است. ویوی داشبورد پیام موفقیت‌آمیز بودن ورود را نمایش می‌دهد. ویو صفحه اصلی: لینک به صفحه لاگین در صفحه اصلی قرار داده شده است. نتیجه نهایی: با این تنظیمات، شما یک پروژه کامل با کنترلر AccountController، سرویس تولید عدد تصادفی و ویوهای مربوطه خواهید داشت. این پروژه به کاربر اجازه می‌دهد تا با وارد کردن یوزر و پسورد و عدد تصادفی به درستی وارد داشبورد شود و در صورت اشتباه بودن پیام‌های خطا نمایش داده شود.

صفحه بتدی و مرتب سازی

Views => Products => Index.cshtml بیایید این کد مربوط به صفحه‌بندی را بررسی کنیم و توضیح دهیم که هر بخش آن چه وظیفه‌ای دارد. توضیحات کد paging: html <paging total-records="Model.TotalRow" page-no="pageNamber==0?1:pageNamber" page-size="@pagesize==0?1:pagesize" show-prev-next="true" show-total-pages="false" show-total-records="false" show-page-size-nav="true" show-first-numbered-page="true" show-last-numbered-page="true" query-string-key-page-no="Page" query-string-key-page-size="PageSize" query-string-value="@@(Request.QueryString.Value)" gap-size="2"> </paging> total-records="Model.TotalRow": تعداد کل رکوردها را مشخص می‌کند که از مدل (Model) دریافت شده است. page-no="pageNamber==0?1:pageNamber": شماره صفحه فعلی را تنظیم می‌کند. اگر pageNamber برابر صفر باشد، شماره صفحه ۱ تنظیم می‌شود؛ در غیر این صورت، مقدار pageNamber استفاده می‌شود. page-size="@pagesize==0?1:pagesize": اندازه صفحه را تنظیم می‌کند. اگر pagesize برابر صفر باشد، اندازه صفحه ۱ تنظیم می‌شود؛ در غیر این صورت، مقدار pagesize استفاده می‌شود. show-prev-next="true": تعیین می‌کند که لینک‌های قبلی و بعدی نمایش داده شوند. show-total-pages="false": تعیین می‌کند که تعداد کل صفحات نمایش داده نشود. show-total-records="false": تعیین می‌کند که تعداد کل رکوردها نمایش داده نشود. show-page-size-nav="true": تعیین می‌کند که ناوبری اندازه صفحه نمایش داده شود. show-first-numbered-page="true": تعیین می‌کند که اولین شماره صفحه نمایش داده شود. show-last-numbered-page="true": تعیین می‌کند که آخرین شماره صفحه نمایش داده شود. query-string-key-page-no="Page": کلید مربوط به شماره صفحه در رشته کوئری (Query String) را تنظیم می‌کند. query-string-key-page-size="PageSize": کلید مربوط به اندازه صفحه در رشته کوئری (Query String) را تنظیم می‌کند. query-string-value="@@(Request.QueryString.Value)": مقدار رشته کوئری را تنظیم می‌کند که شامل پارامترهای فعلی است. gap-size="2": اندازه فاصله بین شماره‌های صفحات را تنظیم می‌کند. خلاصه این کد یک جزء صفحه‌بندی را ایجاد می‌کند که به شما امکان می‌دهد نتایج را به صفحات تقسیم کنید و با استفاده از ناوبری صفحات مختلف به آن‌ها دسترسی داشته باشید. با استفاده از این تنظیمات، می‌توانید نمایش لینک‌های قبلی و بعدی، نمایش شماره صفحات اول و آخر، و نمایش اندازه صفحه را کنترل کنید.