توضیحات: 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 استفاده کنید و ویوهای خود را بهینه‌سازی کنید.

بیایید این کد را بررسی کنیم و توضیح دهیم که هر بخش آن چه وظیفه‌ای دارد. اینترفیس IGetProductForSiteService این اینترفیس شامل یک متد به نام Execute است که برای دریافت محصولات برای سایت استفاده می‌شود. این متد شامل پارامترهایی است که به شما امکان می‌دهد نتایج را مرتب‌سازی و فیلتر کنید. کد: IGetProductForSiteService csharp public interface IGetProductForSiteService { ResultDto<ResultProductForSiteDto> Execute(Ordering ordering, string SearchKey, int Page, int PageSize, long? CatId); } Ordering ordering: این پارامتر نوع مرتب‌سازی را مشخص می‌کند. از نوع Ordering است که شامل انواع مختلف مرتب‌سازی می‌شود. string SearchKey: این پارامتر کلید جستجو است که برای فیلتر کردن نتایج بر اساس یک کلید واژه استفاده می‌شود. int Page: شماره صفحه‌ای که کاربر می‌خواهد مشاهده کند. int PageSize: تعداد آیتم‌هایی که باید در هر صفحه نمایش داده شود. long? CatId: شناسه دسته‌بندی (Category ID) که به صورت اختیاری برای فیلتر کردن نتایج بر اساس دسته‌بندی استفاده می‌شود. شمارش Ordering این شمارش انواع مختلف مرتب‌سازی را تعریف می‌کند که می‌تواند برای ترتیب‌دهی نتایج استفاده شود. کد: Ordering csharp public enum Ordering { NotOrder = 0, /// <summary> /// پربازدیدترین /// </summary> MostVisited = 1, /// <summary> /// پرفروشترین /// </summary> Bestselling = 2, /// <summary> /// محبوبترین /// </summary> MostPopular = 3, /// <summary> /// جدیدترین /// </summary> theNewest = 4, /// <summary> /// ارزانترین /// </summary> Cheapest = 5, /// <summary> /// گرانترین /// </summary> theMostExpensive = 6 } NotOrder: بدون مرتب‌سازی. MostVisited: مرتب‌سازی بر اساس پربازدیدترین محصولات. Bestselling: مرتب‌سازی بر اساس پرفروش‌ترین محصولات. MostPopular: مرتب‌سازی بر اساس محبوب‌ترین محصولات. theNewest: مرتب‌سازی بر اساس جدیدترین محصولات. Cheapest: مرتب‌سازی بر اساس ارزان‌ترین محصولات. theMostExpensive: مرتب‌سازی بر اساس گران‌ترین محصولات. نتیجه‌گیری این کد به شما امکان می‌دهد محصولات را بر اساس کلید جستجو، دسته‌بندی، شماره صفحه و تعداد آیتم‌ها در هر صفحه فیلتر و مرتب‌سازی کنید. انواع مختلف مرتب‌سازی مانند پربازدیدترین، پرفروش‌ترین، محبوب‌ترین، جدیدترین، ارزان‌ترین و گران‌ترین محصولات نیز تعریف شده‌اند تا نتایج به صورت دلخواه مرتب شوند.

بیایید این بخش از کد کلاس را که از اینترفیس IGetProductForSiteService ارث‌بری کرده است، بررسی کنیم. این بخش از کد مربوط به مرتب‌سازی نتایج جستجوی محصولات بر اساس معیارهای مختلف است. توضیح کد switch(ordering) ساختار کلی کد: csharp switch(ordering) { case Ordering.NotOrder: productQuery = productQuery.OrderByDescending(p => p.Id).AsQueryable(); break; case Ordering.MostVisited: productQuery = productQuery.OrderByDescending(p => p.ViewCount).AsQueryable(); break; case Ordering.Bestselling: break; case Ordering.MostPopular: break; case Ordering.theNewest: productQuery = productQuery.OrderByDescending(p => p.Id).AsQueryable(); break; case Ordering.Cheapest: productQuery = productQuery.OrderBy(p => p.Price).AsQueryable(); break; case Ordering.theMostExpensive: productQuery = productQuery.OrderByDescending(p => p.Price).AsQueryable(); break; default: break; } توضیح هر مورد: case Ordering.NotOrder: این مورد زمانی استفاده می‌شود که هیچ مرتب‌سازی خاصی انتخاب نشده باشد. مرتب‌سازی بر اساس Id به صورت نزولی (از جدیدترین به قدیمی‌ترین) انجام می‌شود. case Ordering.MostVisited: این مورد زمانی استفاده می‌شود که مرتب‌سازی بر اساس پربازدیدترین محصولات انتخاب شده باشد. مرتب‌سازی بر اساس تعداد بازدید (ViewCount) به صورت نزولی (از بیشترین بازدید به کمترین) انجام می‌شود. case Ordering.Bestselling: این مورد زمانی استفاده می‌شود که مرتب‌سازی بر اساس پرفروش‌ترین محصولات انتخاب شده باشد. توجه داشته باشید که این مورد هنوز پیاده‌سازی نشده است. case Ordering.MostPopular: این مورد زمانی استفاده می‌شود که مرتب‌سازی بر اساس محبوب‌ترین محصولات انتخاب شده باشد. توجه داشته باشید که این مورد هنوز پیاده‌سازی نشده است. case Ordering.theNewest: این مورد زمانی استفاده می‌شود که مرتب‌سازی بر اساس جدیدترین محصولات انتخاب شده باشد. مرتب‌سازی بر اساس Id به صورت نزولی (از جدیدترین به قدیمی‌ترین) انجام می‌شود. case Ordering.Cheapest: این مورد زمانی استفاده می‌شود که مرتب‌سازی بر اساس ارزان‌ترین محصولات انتخاب شده باشد. مرتب‌سازی بر اساس قیمت (Price) به صورت صعودی (از ارزان‌ترین به گران‌ترین) انجام می‌شود. case Ordering.theMostExpensive: این مورد زمانی استفاده می‌شود که مرتب‌سازی بر اساس گران‌ترین محصولات انتخاب شده باشد. مرتب‌سازی بر اساس قیمت (Price) به صورت نزولی (از گران‌ترین به ارزان‌ترین) انجام می‌شود. default: در صورتی که هیچ یک از موارد بالا تطبیق نداشته باشد، این بخش اجرا می‌شود. اینجا هیچ عملیات خاصی انجام نمی‌شود و کنترل به خارج از switch منتقل می‌شود. نتیجه‌گیری این بخش از کد برای مرتب‌سازی نتایج جستجوی محصولات بر اساس معیارهای مختلف استفاده می‌شود. هر مورد در ساختار switch ترتیب خاصی از محصولات را مشخص می‌کند و نتایج جستجو را بر اساس آن ترتیب مرتب‌سازی می‌کند.

بیایید این بخش از کد را با هم بررسی کنیم و توضیح دهیم که هر بخش آن چه وظیفه‌ای دارد. توضیح کد این کد یک نوار تب (tab) برای مرتب‌سازی محصولات بر اساس معیارهای مختلف ایجاد می‌کند. از تگ‌های HTML و برخی ویژگی‌های خاص برای این منظور استفاده می‌شود. کد: html <ul class="nav sort-tabs-options" id="myTab" role="tablist"> <li class="nav-item"> <a class="nav-link active" href="~/products?Searchkey=@Context.Request.Query["SearchKey"]&CatId=@Context.Request.Query["CatId"]&ordering=MostVisited" role="tab" aria-controls="Most-visited" aria-selected="true">پربازدیدترین</a> </li> <li class="nav-item"> <a class="nav-link" href="~/products?Searchkey=@Context.Request.Query["SearchKey"]&CatId=@Context.Request.Query["CatId"]&ordering=Bestselling" role="tab" aria-controls="Bestselling" aria-selected="false">پرفروش‌ترین‌</a> </li> <li class="nav-item"> <a class="nav-link" href="~/products?Searchkey=@Context.Request.Query["SearchKey"]&CatId=@Context.Request.Query["CatId"]&ordering=Most-Popular" role="tab" aria-controls="Most-Popular" aria-selected="false">محبوب‌ترین</a> </li> <li class="nav-item"> <a class="nav-link" href="~/products?Searchkey=@Context.Request.Query["SearchKey"]&CatId=@Context.Request.Query["CatId"]&ordering=newest" role="tab" aria-controls="newest" aria-selected="false">جدیدترین</a> </li> <li class="nav-item"> <a class="nav-link" href="~/products?Searchkey=@Context.Request.Query["SearchKey"]&CatId=@Context.Request.Query["CatId"]&ordering=cheapest" role="tab" aria-controls="cheapest" aria-selected="false">ارزان‌ترین</a> </li> <li class="nav-item"> <a class="nav-link" href="~/products?Searchkey=@Context.Request.Query["SearchKey"]&CatId=@Context.Request.Query["CatId"]&ordering=most-expensive" role="tab" aria-controls="most-expensive" aria-selected="false">گران‌ترین</a> </li> </ul> توضیح جزئیات: تگ <ul>: class="nav sort-tabs-options": این کلاس‌ها به نوار تب استایل‌دهی می‌کنند. nav معمولاً از فریم‌ورک Bootstrap برای نوار ناوبری استفاده می‌شود. id="myTab": شناسه نوار تب را مشخص می‌کند. role="tablist": این ویژگی به صفحه‌خوان‌ها و دستگاه‌های دسترسی‌پذیری اطلاع می‌دهد که این عنصر یک لیست از تب‌ها است. تگ‌های <li>: class="nav-item": این کلاس به هر آیتم تب استایل‌دهی می‌کند. nav-item از فریم‌ورک Bootstrap استفاده می‌شود. تگ‌های <a>: class="nav-link active": این کلاس به لینک‌های تب استایل‌دهی می‌کند. nav-link از فریم‌ورک Bootstrap استفاده می‌شود. active برای تب فعال استفاده می‌شود. href="~/products?Searchkey=@Context.Request.Query["SearchKey"]&CatId=@Context.Request.Query["CatId"]&ordering=MostVisited": آدرس URL مقصد را برای لینک تب مشخص می‌کند. این URL شامل پارامترهای جستجو و مرتب‌سازی است که از کوئری استرینگ گرفته شده است. role="tab": این ویژگی به صفحه‌خوان‌ها و دستگاه‌های دسترسی‌پذیری اطلاع می‌دهد که این لینک یک تب است. aria-controls="Most-visited": این ویژگی به صفحه‌خوان‌ها اطلاع می‌دهد که این تب کدام بخش از محتوا را کنترل می‌کند. aria-selected="true/false": این ویژگی مشخص می‌کند که آیا این تب در حال حاضر انتخاب شده است یا خیر. true برای تب فعال و false برای تب‌های غیرفعال استفاده می‌شود. توضیح تب‌های مختلف: پربازدیدترین (MostVisited): مرتب‌سازی بر اساس پربازدیدترین محصولات. آدرس URL مقصد شامل پارامترهای SearchKey، CatId و ordering برای مرتب‌سازی پربازدیدترین محصولات است. پرفروش‌ترین (Bestselling): مرتب‌سازی بر اساس پرفروش‌ترین محصولات. آدرس URL مقصد شامل پارامترهای SearchKey، CatId و ordering برای مرتب‌سازی پرفروش‌ترین محصولات است. محبوب‌ترین (MostPopular): مرتب‌سازی بر اساس محبوب‌ترین محصولات. آدرس URL مقصد شامل پارامترهای SearchKey، CatId و ordering برای مرتب‌سازی محبوب‌ترین محصولات است. جدیدترین (newest): مرتب‌سازی بر اساس جدیدترین محصولات. آدرس URL مقصد شامل پارامترهای SearchKey، CatId و ordering برای مرتب‌سازی جدیدترین محصولات است. ارزان‌ترین (cheapest): مرتب‌سازی بر اساس ارزان‌ترین محصولات. آدرس URL مقصد شامل پارامترهای SearchKey، CatId و ordering برای مرتب‌سازی ارزان‌ترین محصولات است. گران‌ترین (most-expensive): مرتب‌سازی بر اساس گران‌ترین محصولات.

آدرس URL مقصد شامل پارامترهای SearchKey، CatId و ordering برای مرتب‌سازی گران‌ترین محصولات است. نتیجه‌گیری این کد یک نوار تب ایجاد می‌کند که به کاربران اجازه می‌دهد محصولات را بر اساس معیارهای مختلف مانند پربازدیدترین، پرفروش‌ترین، محبوب‌ترین، جدیدترین، ارزان‌ترین و گران‌ترین مرتب‌سازی کنند. هر تب شامل لینکی است که با کلیک بر روی آن، نتایج محصولات بر اساس معیار مشخص شده مرتب‌سازی و نمایش داده می‌شوند.

ودر پک منیجر Add-Migration Add_viewCount و در آخر Update-Database را بزنید