بیایید کد ویوی 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": اندازه فاصله بین شماره‌های صفحات را تنظیم می‌کند. خلاصه این کد یک جزء صفحه‌بندی را ایجاد می‌کند که به شما امکان می‌دهد نتایج را به صفحات تقسیم کنید و با استفاده از ناوبری صفحات مختلف به آن‌ها دسترسی داشته باشید. با استفاده از این تنظیمات، می‌توانید نمایش لینک‌های قبلی و بعدی، نمایش شماره صفحات اول و آخر، و نمایش اندازه صفحه را کنترل کنید.

بیایید هر یک از این تنظیمات و کلاس‌ها را توضیح دهیم تا بهتر متوجه شوید که چگونه برای صفحه‌بندی (pagination) استفاده می‌شوند. توضیحات تنظیمات: text-page-size="Items per page:": متن نمایش داده شده برای انتخاب تعداد آیتم‌ها در هر صفحه را تنظیم می‌کند. در اینجا، "Items per page:" نمایش داده می‌شود. text-total-pages="pages": متن نمایش داده شده برای تعداد کل صفحات را تنظیم می‌کند. در اینجا، "pages" نمایش داده می‌شود. text-total-records="records": متن نمایش داده شده برای تعداد کل رکوردها را تنظیم می‌کند. در اینجا، "records" نمایش داده می‌شود. text-first="«": متن نمایش داده شده برای دکمه اولین صفحه را تنظیم می‌کند. در اینجا، از کد HTML برای نمایش «« استفاده می‌شود. text-last="»": متن نمایش داده شده برای دکمه آخرین صفحه را تنظیم می‌کند. در اینجا، از کد HTML برای نمایش »» استفاده می‌شود. text-previous="‹": متن نمایش داده شده برای دکمه صفحه قبلی را تنظیم می‌کند. در اینجا، از کد HTML برای نمایش ‹ استفاده می‌شود. text-next="›": متن نمایش داده شده برای دکمه صفحه بعدی را تنظیم می‌کند. در اینجا، از کد HTML برای نمایش › استفاده می‌شود. sr-text-first="First": متن صفحه‌خوان برای دکمه اولین صفحه را تنظیم می‌کند. این متن برای دسترسی‌پذیری (accessibility) استفاده می‌شود. sr-text-last="Last": متن صفحه‌خوان برای دکمه آخرین صفحه را تنظیم می‌کند. این متن برای دسترسی‌پذیری استفاده می‌شود. sr-text-previous="Previous": متن صفحه‌خوان برای دکمه صفحه قبلی را تنظیم می‌کند. این متن برای دسترسی‌پذیری استفاده می‌شود. sr-text-next="Next": متن صفحه‌خوان برای دکمه صفحه بعدی را تنظیم می‌کند. این متن برای دسترسی‌پذیری استفاده می‌شود. توضیحات کلاس‌ها: class="row": کلاس CSS برای تنظیم طرح‌بندی به صورت ردیف (row) استفاده می‌شود. class-paging-control-div="col": کلاس CSS برای تنظیم طرح‌بندی کنترل صفحه‌بندی به صورت ستون (column) استفاده می‌شود. class-info-div="col": کلاس CSS برای تنظیم طرح‌بندی بخش اطلاعات به صورت ستون (column) استفاده می‌شود. class-page-size-div="col": کلاس CSS برای تنظیم طرح‌بندی بخش انتخاب اندازه صفحه به صورت ستون (column) استفاده می‌شود. class-paging-control="pagination": کلاس CSS برای تنظیم طرح‌بندی کنترل صفحه‌بندی به صورت استاندارد صفحه‌بندی استفاده می‌شود. class-active-page="disabled": کلاس CSS برای تنظیم طرح‌بندی صفحه فعال به صورت غیرفعال (disabled) استفاده می‌شود. class-disabled-jumping-button="disabled": کلاس CSS برای تنظیم طرح‌بندی دکمه‌های جهش غیرفعال به صورت غیرفعال (disabled) استفاده می‌شود. class-total-pages="badge badge-secondary": کلاس CSS برای تنظیم طرح‌بندی تعداد کل صفحات به صورت نشان (badge) و استفاده از کلاس‌های badge و badge-secondary استفاده می‌شود. class-total-records="badge badge-info": کلاس CSS برای تنظیم طرح‌بندی تعداد کل رکوردها به صورت نشان (badge) و استفاده از کلاس‌های badge و badge-info استفاده می‌شود. نتیجه‌گیری این تنظیمات و کلاس‌ها به شما امکان می‌دهند که صفحه‌بندی مناسبی ایجاد کنید که نه تنها زیبا به نظر می‌رسد بلکه دسترسی‌پذیری (accessibility) مناسبی نیز دارد. این صفحه‌بندی می‌تواند به کاربر کمک کند تا به راحتی بین صفحات مختلف ناوبری کند و اطلاعات مورد نیاز خود را پیدا کند.

کد @addTagHelper *, LazZiya.TagHelpers در ASP.NET Core برای افزودن یک مجموعه از Tag Helperها استفاده می‌شود. حالا بیایید به جزئیات و عملکرد این کد نگاهی بیندازیم. توضیحات کد: کد: @addTagHelper *, LazZiya.TagHelpers @addTagHelper: این دستور برای افزودن Tag Helperها به ویوهای Razor استفاده می‌شود. *: این علامت تمام Tag Helperهای موجود در اسمبلی (assembly) مشخص شده را اضافه می‌کند. LazZiya.TagHelpers: این نام اسمبلی است که شامل مجموعه‌ای از Tag Helperها می‌باشد که شما می‌خواهید به ویوهای Razor خود اضافه کنید. Tag Helperها در ASP.NET Core Tag Helperها ویژگی‌های قدرتمندی هستند که به شما امکان می‌دهند تگ‌های HTML را به صورت داینامیک و با استفاده از کدهای C# پردازش کنید. با افزودن Tag Helperها به ویوهای Razor، می‌توانید تگ‌های HTML را بهینه‌سازی و پردازش کرده و ویژگی‌های داینامیکی را به آن‌ها اضافه کنید. کتابخانه LazZiya.TagHelpers کتابخانه LazZiya.TagHelpers شامل مجموعه‌ای از Tag Helperهای مفید است که می‌توانند در پروژه‌های ASP.NET Core استفاده شوند. این Tag Helperها می‌توانند برای کارهای مختلف مانند صفحه‌بندی (pagination)، نمایش تاریخ و زمان، فرم‌ها و دیگر عناصر HTML استفاده شوند. استفاده از Tag Helperها با افزودن کد @addTagHelper *, LazZiya.TagHelpers به ویوهای Razor، شما می‌توانید از تمام Tag Helperهای موجود در اسمبلی LazZiya.TagHelpers استفاده کنید. به عنوان مثال، اگر این کتابخانه شامل Tag Helper برای صفحه‌بندی باشد، می‌توانید تگ‌های HTML مرتبط با صفحه‌بندی را به راحتی در ویوهای Razor خود استفاده کنید. مثال کاربردی: اگر بخواهید از یک Tag Helper برای صفحه‌بندی استفاده کنید، کد شما ممکن است به این صورت باشد: html @addTagHelper *, LazZiya.TagHelpers <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> نتیجه‌گیری با افزودن Tag Helperها، می‌توانید ویژگی‌ها و قابلیت‌های جدیدی را به تگ‌های HTML خود اضافه کنید و به صورت داینامیک آن‌ها را پردازش کنید. این کد به شما اجازه می‌دهد که از تمام Tag Helperهای موجود در کتابخانه LazZiya.TagHelpers استفاده کنید و ویوهای خود را بهینه‌سازی کنید.