<div class="text-center"> <paging total-records="Model.RowCount" page-no="Model.CurrentPage" page-size="Model.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" gap-size="2"> </paging> </div> </div> </div> </div> </div> </div> </section> </div> </div> جدول نمایش محصولات: ستون‌های نام، دسته بندی، برند، قیمت، موجودی و نمایش در سایت؟. از foreach برای پیمایش مدل (لیست محصولات) و نمایش اطلاعات هر محصول استفاده شده است. دکمه‌های حذف و اطلاعات بیشتر برای هر محصول در جدول. پیمایش صفحات (Paging): html <div class="text-center"> <paging total-records="Model.RowCount" page-no="Model.CurrentPage" page-size="Model.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" gap-size="2"> </paging> </div> از تگ کمکی paging برای نمایش ناوبری صفحات استفاده شده است. پارامترهای مختلف برای تنظیم ظاهر و عملکرد ناوبری صفحات مانند total-records، page-no، page-size و غیره. نتیجه‌گیری: این کد به شما امکان می‌دهد تا لیست محصولات را به صورت جدولی نمایش دهید و شامل امکاناتی مانند جستجوی محصولات، پیمایش صفحات، و دکمه‌های عملیاتی برای حذف و نمایش اطلاعات بیشتر برای هر محصول است. از تگ کمکی paging برای مدیریت صفحه‌بندی محصولات استفاده می‌شود که به مدیران کمک می‌کند تا به راحتی محصولات را مدیریت و پیمایش کنند.

بله، بیایید این کد را که برای نمایش جزئیات محصول در بخش مدیریت استفاده می‌شود بررسی کنیم. توضیحات کد: اضافه کردن فضای نام‌ها و مدل: csharp @using Test_Store.Application.Services.Products.Queries.GetProductDetailForAdmin @model ProductDetailForAdmindto @using برای استفاده از فضای نام سرویس‌های مورد نیاز برای دریافت جزئیات محصول. @model برای تعریف مدل داده‌ای که به ویو ارسال می‌شود. در اینجا مدل ProductDetailForAdmindto است که شامل جزئیات محصول است. ViewData و Layout: csharp @{ ViewData["Title"] = "جزئیات محصول"; Layout = "~/Areas/Admin/Views/Shared/_Adminlayout.cshtml"; } ViewData["Title"]: عنوان صفحه را به "جزئیات محصول" تنظیم می‌کند. Layout: از Layout مشخص شده برای این صفحه استفاده می‌کند. ساختار اصلی HTML: بخش‌های مختلف صفحه شامل هدر، بدنه، و نمایش جزئیات محصول. نمایش جزئیات محصول: html <div class="col-sm-12"> <div class="card"> <div class="card-header"> <div class="card-title-wrap bar-warning"> <div class="card-title">اطلاعات بیشتر در مورد محصول</div> </div> </div> <div class="card-body"> <div class="card-block"> <div class="row"> <div class="col-lg-6 col-md-6 col-sm-12 col-12"> <ul class="no-list-style"> <li class="mb-2"> <span class="primary text-bold-500"><a><i class="ft-home font-small-3"></i> محصول</a></span> <span class="line-height-2 display-block overflow-hidden">@Model.Name</span> </li> <li class="mb-2"> <span class="primary text-bold-500"><a><i class="ft-briefcase font-small-3"></i> برند</a></span> <span class="line-height-2 display-block overflow-hidden"> @Model.Brand</span> </li> </ul> </div> <div class="col-lg-6 col-md-6 col-sm-12 col-12"> <ul class="no-list-style"> <li class="mb-2"> <span class="primary text-bold-500"><a><i class="ft-home font-small-3"></i> دسته بندی</a></span> <span class="line-height-2 display-block overflow-hidden">@Model.Category</span> </li> <li class="mb-2"> <span class="primary text-bold-500"><a><i class="ft-home font-small-3"></i>قیمت</a></span> <span class="line-height-2 display-block overflow-hidden"> @Model.Price.ToString("n0")</span> </li> </ul> </div> <div class="col-lg-6 col-md-6 col-sm-12 col-12"> <ul class="no-list-style"> <li class="mb-2"> <span class="primary text-bold-500"><a><i class="ft-home font-small-3"></i>موجودی</a></span> <span class="line-height-2 display-block overflow-hidden">@Model.Inventory</span> </li> <li class="mb-2"> <span class="primary text-bold-500"><a><i class="ft-home font-small-3"></i>نمایش در سایت؟</a></span> <span class="line-height-2 display-block overflow-hidden"> @Model.Displayed</span> </li> </ul> </div> <div class="col-lg-12 col-md-12 col-sm-12 col-12"> <ul class="no-list-style"> <li class=""> <span class="primary text-bold-500"><a><i class="ft-home font-small-3"></i>توضیحات</a></span> <span class="line-height-2 display-block overflow-hidden">@Model.Description</span> </li>

</ul> </div> </div> </div> </div> </div> </div> اطلاعات عمومی محصول: شامل نام، برند، دسته‌بندی، قیمت، موجودی، وضعیت نمایش در سایت، و توضیحات محصول. از عناصر HTML مانند ul و li برای نمایش اطلاعات به صورت لیست‌های بدون استایل استفاده می‌شود. نمایش تصاویر و ویژگی‌های محصول: html <div class="card mb-4"> <div class="card-header"> <div class="card-title-wrap bar-success"> <div class="card-title">تصاویر و ویژگی های محصول</div> </div> </div> <div class="card-body"> <div class="card-block"> <div class="row"> <div class="col-4 col-sm-4"> <ul class="no-list-style pr-0 text-right "> @foreach (var item in Model.Features) { <li class="mb-2"> <span class="text-bold-500 primary"><a><i class="icon-frame font-small-3"></i> @item.DisplayName :</a></span> <span class="display-block overflow-hidden"> @item.Value</span> </li> } </ul> </div> <div class="col-8 col-sm-8 text-center"> @foreach (var item in Model.Images) { <figure class="col-xl-6 col-lg-4 col-sm-6 col-12"> <a target="_blank" href="~/@item.Src"> <img width="200" height="200" class="img-thumbnail img-fluid" src="~/@item.Src"> </a> </figure> } </div> </div> </div> </div> </div> ویژگی‌های محصول: ویژگی‌های محصول به صورت لیست نمایش داده می‌شوند. هر ویژگی شامل نام نمایشی و مقدار آن است. تصاویر محصول: تصاویر محصول در قسمت مربوط به تصاویر نمایش داده می‌شوند. از تگ figure و img برای نمایش تصاویر استفاده می‌شود. لینک تصاویر به صورت href تنظیم شده است تا در صورت کلیک، تصویر بزرگتر در یک تب جدید باز شود. نتیجه‌گیری: این کد به شما امکان می‌دهد تا جزئیات کامل یک محصول را در بخش مدیریت مشاهده کنید. شامل اطلاعات عمومی محصول مانند نام، برند، دسته‌بندی، قیمت، موجودی، وضعیت نمایش، و توضیحات، و همچنین ویژگی‌ها و تصاویر محصول است. این طراحی به مدیران کمک می‌کند تا به راحتی به جزئیات محصولات دسترسی داشته باشند و آن‌ها را مشاهده کنند.

کتابخانه Microsoft.AspNetCore.Hosting.Abstractions برای ارائه‌ی ابتکارات و مفاهیم اساسی برای بستری که برای برنامه‌های وب اپلیکیشن‌های ASP.NET Core استفاده می‌شود، استفاده می‌شود. این کتابخانه شامل ابتکارات مانند IHostBuilder و IHostedService است که به تنظیم، شروع، و متوقف کردن یک میزبان کمک می‌کنند. برای اطلاعات بیشتر و دانلود، می‌توانید به NuGet Gallery مراجعه کنید.

برای ذخیره عکس‌ها در ASP.NET Core می‌توانید از سرویس‌های فایل و کتابخانه‌هایی مانند IFormFile و HostingEnvironment استفاده کنید. در ادامه مراحل اصلی برای ذخیره عکس‌ها را توضیح می‌دهم: مراحل ذخیره عکس: دریافت فایل‌های آپلود شده: ابتدا فایل‌های آپلود شده را از فرم دریافت کنید. می‌توانید از IFormFile برای دسترسی به فایل‌های آپلود شده استفاده کنید. تعیین مسیر ذخیره‌سازی: مسیر ذخیره‌سازی فایل‌ها را تعیین کنید. از IHostingEnvironment یا IWebHostEnvironment برای دسترسی به مسیرهای سیستم فایل استفاده کنید. ذخیره‌سازی فایل‌ها: فایل‌ها را به مسیر تعیین شده کپی کنید. می‌توانید از متدهای CopyTo یا CopyToAsync برای این منظور استفاده کنید. کد نمونه: پیکربندی کنترلر: csharp public class ProductsController : Controller { private readonly IWebHostEnvironment _webHostEnvironment; public ProductsController(IWebHostEnvironment webHostEnvironment) { _webHostEnvironment = webHostEnvironment; } [HttpPost] public async Task<IActionResult> AddNewProduct(RequestAddNewProductDto request, List<IFormFile> images) { if (images != null && images.Count > 0) { var imageDirectory = Path.Combine(_webHostEnvironment.WebRootPath, "images"); if (!Directory.Exists(imageDirectory)) { Directory.CreateDirectory(imageDirectory); } foreach (var image in images) { var fileName = Path.GetFileName(image.FileName); var filePath = Path.Combine(imageDirectory, fileName); using (var stream = new FileStream(filePath, FileMode.Create)) { await image.CopyToAsync(stream); } request.Images.Add(new ProductImageDto { Src = $"/images/{fileName}" }); } } // سایر عملیات مربوط به اضافه کردن محصول return View(); } } ویو برای آپلود فایل‌ها: html <form asp-action="AddNewProduct" enctype="multipart/form-data" method="post"> <!-- سایر فیلدهای فرم --> <div class="form-group"> <label for="Images">تصاویر محصول</label> <input type="file" id="Images" name="images" multiple class="form-control" accept="image/*"> </div> <button type="submit" class="btn btn-primary">افزودن محصول</button> </form> توضیحات: در کنترلر، از IWebHostEnvironment برای دسترسی به مسیر ریشه وب استفاده شده است. در متد AddNewProduct، اگر فایل‌هایی آپلود شده باشند، ابتدا مسیر ذخیره‌سازی فایل‌ها بررسی و در صورت لزوم ایجاد می‌شود. سپس فایل‌ها به مسیر تعیین شده کپی می‌شوند و مسیر نسبی فایل‌ها در لیست Images اضافه می‌شود. در ویو، فرم شامل فیلدهای مورد نیاز برای آپلود فایل‌ها است و خصوصیت enctype="multipart/form-data" برای آپلود فایل‌ها تنظیم شده است. با استفاده از این روش، می‌توانید تصاویر محصول را در سرور ذخیره و مسیرهای نسبی آن‌ها را ذخیره کنید تا در آینده به آن‌ها دسترسی داشته باشید.

کتابخانه LazZiya.TagHelpers یک مجموعه از TagHelpers مفید برای هر پروژه ASP.NET Core است. این کتابخانه شامل TagHelpers مختلفی برای کنترل‌های صفحه‌نمایش، تنظیمات محلی، و اضافه کردن کنترل‌های متنوع مانند Paging، Select-Enum، و Language Navigation است. برخی از TagHelpers مهم: Paging TagHelper: برای ایجاد کنترل‌های صفحه‌بندی با استفاده از Bootstrap 4. Alert TagHelper: برای ایجاد هشدارهای Bootstrap با استفاده از HTML ساده. Language Navigation TagHelper: برای ایجاد منوی گزینش زبان با استفاده از فلگ‌های زبان. Localization Validation Scripts TagHelper: برای اضافه کردن اسکریپت‌های محلی برای اعتبارسنجی ورودی‌های محلی مانند اعداد کسری، تاریخ‌ها و غیره.

برای اضافه کردن این مجموعه‌ها به DataBaseContext خود، باید کلاس DbContext خود را ویرایش کنید. این کلاس به عنوان نمایی از دیتابیس شما عمل می‌کند و شامل DbSet هایی است که نمایانگر جداول دیتابیس هستند. مراحل: باز کردن کلاس DataContext (یا هر نامی که برای کلاس DbContext خود انتخاب کرده‌اید): csharp public class DataBaseContext : DbContext, IDataBaseContext { public ApplicationDbContext(DbContextOptions<ApplicationDbContext> options) : base(options) { } public DbSet<Product> Products { get; set; } public DbSet<ProductImages> ProductImages { get; set; } public DbSet<ProductFeatures> ProductFeatures { get; set; } } اطمینان از وجود تنظیمات در فایل Startup.cs: در فایل Startup.cs مطمئن شوید که DbContext شما به درستی تنظیم شده است: csharp public void ConfigureServices(IServiceCollection services) { services.AddDbContext<ApplicationDbContext>(options => options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection"))); // سایر تنظیمات } ایجاد یا بروزرسانی Migrationها: برای اعمال تغییرات در دیتابیس، باید Migration ایجاد کنید و دیتابیس خود را به‌روزرسانی کنید. دستور زیر را در کنسول Package Manager اجرا کنید: bash Add-Migration AddProductEntities Update-Database توضیحات: DbSet<Product> Products: این خط کد یک جدول برای نگهداری اطلاعات محصولات ایجاد می‌کند. DbSet<ProductImages> ProductImages: این خط کد یک جدول برای نگهداری تصاویر محصولات ایجاد می‌کند. DbSet<ProductFeatures> ProductFeatures: این خط کد یک جدول برای نگهداری ویژگی‌های محصولات ایجاد می‌کند. فایل ApplicationDbContext (یا هر نامی که برای کلاس DbContext خود انتخاب کرده‌اید) باید شامل تمام DbSet هایی باشد که نمایانگر جداول دیتابیس شما هستند. با این مراحل، شما توانسته‌اید مجموعه‌های Products، ProductImages و ProductFeatures را به DataBaseContext خود اضافه کنید و آن‌ها را در دیتابیس خود ایجاد کنید.

بعد اضافه کردن مایگریشن نام جدید و بعد آپدیدت دیتابیس

پروژه ثبت فروشگاه

بیایید کد ProductsController را که برای نمایش لیست محصولات و جزئیات هر محصول استفاده می‌شود بررسی کنیم. توضیحات کد: تعریف کلاس: csharp public class ProductsController : Controller { private readonly IProductFacad _productFacad; public ProductsController(IProductFacad productFacad) { _productFacad = productFacad; } } کلاس ProductsController از کلاس پایه Controller ارث‌بری می‌کند. یک فیلد خصوصی _productFacad از نوع IProductFacad تعریف شده است. سازنده کلاس ProductsController فیلد _productFacad را با استفاده از تزریق وابستگی مقداردهی اولیه می‌کند. متد Index: csharp public IActionResult Index(int page = 1) { return View(_productFacad.GetProductForSiteService.Execute(page).Data); } این متد برای نمایش لیست محصولات استفاده می‌شود. پارامتر page شماره صفحه فعلی را مشخص می‌کند و مقدار پیش‌فرض آن ۱ است. از سرویس GetProductForSiteService برای دریافت لیست محصولات صفحه‌بندی شده استفاده می‌کند. داده‌های دریافت شده را به ویو ارسال می‌کند. متد Detail: csharp public IActionResult Detail(long Id) { return View(_productFacad.GetProductDetailForSiteService.Execute(Id).Data); } این متد برای نمایش جزئیات یک محصول خاص استفاده می‌شود. پارامتر Id شناسه محصول را مشخص می‌کند. از سرویس GetProductDetailForSiteService برای دریافت جزئیات محصول استفاده می‌کند. داده‌های دریافت شده را به ویو ارسال می‌کند. نتیجه‌گیری: کنترلر ProductsController به شما امکان می‌دهد تا لیست محصولات و جزئیات هر محصول را در سایت خود نمایش دهید. شامل دو متد Index برای نمایش لیست محصولات به صورت صفحه‌بندی شده و Detail برای نمایش جزئیات یک محصول خاص است. این متدها از سرویس‌های مختلف ProductFacad برای دریافت داده‌های مورد نیاز استفاده می‌کنند و آن‌ها را به ویو مربوطه ارسال می‌کنند.

بیایید کد ویوی نمایش لیست محصولات را که برای نمایش آرشیو محصولات در سایت استفاده می‌شود بررسی کنیم. توضیحات کد: اضافه کردن فضای نام‌ها و مدل: csharp @using Test_Store.Application.Services.Products.Queries.GetProductForSite; @model ResultProductForSiteDto; @using برای استفاده از فضای نام سرویس‌های مورد نیاز برای دریافت لیست محصولات. @model برای تعریف مدل داده‌ای که به ویو ارسال می‌شود. در اینجا مدل ResultProductForSiteDto است که شامل لیست محصولات و سایر اطلاعات مربوط به صفحه‌بندی است. ViewData و Layout: csharp @{ ViewData["Title"] = "Index"; Layout = "~/Views/Shared/_Layout.cshtml"; } ViewData["Title"]: عنوان صفحه را به "Index" تنظیم می‌کند. Layout: از Layout مشخص شده برای این صفحه استفاده می‌کند. ساختار اصلی HTML: بخش‌های مختلف صفحه شامل هدر، بدنه، و نمایش لیست محصولات. نمایش آرشیو محصولات: html <div class="col-lg-12 col-md-12 col-xs-12 pl"> <div class="shop-archive-content mt-3 d-block"> <div class="archive-header"> <h2 class="archive-header-title">آرشیو محصولات</h2> <div class="sort-tabs mt-0 d-inline-block pr"> <h4>مرتب‌سازی بر اساس :</h4> </div> <div class="nav-sort-tabs-res"> <ul class="nav sort-tabs-options" id="myTab" role="tablist"> <li class="nav-item"> <a class="nav-link active" id="Most-visited-tab" data-toggle="tab" href="#Most-visited" role="tab" aria-controls="Most-visited" aria-selected="true">پربازدیدترین</a> </li> <li class="nav-item"> <a class="nav-link" id="Bestselling-tab" data-toggle="tab" href="#Bestselling" role="tab" aria-controls="Bestselling" aria-selected="false">پرفروش‌ترین‌</a> </li> <li class="nav-item"> <a class="nav-link" id="Most-Popular-tab" data-toggle="tab" href="#Most-Popular" role="tab" aria-controls="Most-Popular" aria-selected="false">محبوب‌ترین</a> </li> <li class="nav-item"> <a class="nav-link" id="newest-tab" data-toggle="tab" href="#newest" role="tab" aria-controls="newest" aria-selected="false">جدیدترین</a> </li> <li class="nav-item"> <a class="nav-link" id="cheapest-tab" data-toggle="tab" href="#cheapest" role="tab" aria-controls="cheapest" aria-selected="false">ارزان‌ترین</a> </li> <li class="nav-item"> <a class="nav-link" id="most-expensive-tab" data-toggle="tab" href="#most-expensive" role="tab" aria-controls="most-expensive" aria-selected="false">گران‌ترین</a> </li> </ul> </div> </div> <div class="product-items"> <div class="tab-content" id="myTabContent"> @foreach (var item in Model.Products) { <div class="tab-pane fade show active" id="Most-visited" role="tabpanel" aria-labelledby="Most-visited-tab"> <div class="row"> <div class="col-lg-3 col-md-3 col-xs-12 order-1 d-block mb-3"> <section class="product-box product product-type-simple"> <div class="thumb"> <a href="~/products/detail/@item.Id" class="d-block"> <div class="product-rate"> @for (int i = 1; i <= item.Star; i++) { <i class="fa fa-star active"></i> } @for (int i = 1; i <= (5 - item.Star); i++) { <i class="fa fa-star"></i>

} </div> <img src="~/@item.ImageSrc"> </a> </div> <div class="title"> <a href="~/products/detail/@item.Id">@item.Title</a> </div> <div class="price"> <span class="amount"> @item.Price.ToString("n0") <span>تومان</span> </span> </div> </section> </div> </div> </div> } </div> </div> <div class="pagination-product"> <nav aria-label="Page navigation example"> <ul class="pagination"> <li class="page-item"> <a class="page-link" href="#" aria-label="Previous"> <span aria-hidden="true">«</span> </a> </li> <li class="page-item"> <a class="page-link active" href="#">1</a> </li> <li class="page-item"> <a class="page-link" href="#">2</a> </li> <li class="page-item"> <a class="page-link" href="#">3</a> </li> <li class="page-item"> <a class="page-link" href="#" aria-label="Next"> <span aria-hidden="true">»</span> </a> </li> </ul> </nav> </div> </div> </div> هدر صفحه: شامل عنوان صفحه و تب‌های مرتب‌سازی براساس معیارهای مختلف (پربازدیدترین، پرفروش‌ترین، محبوب‌ترین، جدیدترین، ارزان‌ترین، گران‌ترین). نمایش محصولات: از foreach برای پیمایش مدل (لیست محصولات) و نمایش اطلاعات هر محصول استفاده شده است. هر محصول شامل تصویر، عنوان، نرخ‌بندی (ستاره‌ها)، و قیمت است. تب‌های مرتب‌سازی براساس معیارهای مختلف استفاده شده‌اند تا کاربران بتوانند محصولات را بر اساس معیارهای مختلف مشاهده کنند. صفحه‌بندی (Pagination): از عناصر HTML و CSS برای نمایش ناوبری صفحات استفاده شده است. به کاربران این امکان را می‌دهد تا بین صفحات مختلف محصولات جابجا شوند. نتیجه‌گیری: این کد به شما امکان می‌دهد تا لیست محصولات را به صورت آرشیوی و با قابلیت مرتب‌سازی بر اساس معیارهای مختلف نمایش دهید. شامل تب‌های مرتب‌سازی، نمایش محصولات به همراه تصویر و اطلاعات مرتبط، و ناوبری صفحات است. این طراحی به کاربران کمک می‌کند تا به راحتی محصولات مورد نظر خود را بیابند و مشاهده کنند.