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

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

بیایید کد سرویس GetProductForAdminService و اینترفیس IGetProductForAdminService را که برای دریافت محصولات برای مدیران استفاده می‌شود بررسی کنیم.

توضیحات کد:
تعریف اینترفیس:

csharp
public interface IGetProductForAdminService
{
    ResultDto<ProductForAdminDto> Execute(int Page = 1, int PageSize = 20);
}
این اینترفیس یک متد Execute تعریف می‌کند که دو پارامتر Page و PageSize دریافت می‌کند و یک ResultDto<ProductForAdminDto> را بازمی‌گرداند.

پارامتر Page نشان‌دهنده شماره صفحه و PageSize نشان‌دهنده تعداد آیتم‌ها در هر صفحه است.

کلاس GetProductForAdminService:

فیلدهای خصوصی و سازنده:

csharp
public class GetProductForAdminService : IGetProductForAdminService
{
    private readonly IDataBaseContext _context;
    public GetProductForAdminService(IDataBaseContext context)
    {
        _context = context;
    }
}
این کلاس شامل یک فیلد خصوصی _context از نوع IDataBaseContext و یک سازنده است که این فیلد را مقداردهی اولیه می‌کند.

متد Execute:

csharp
public ResultDto<ProductForAdminDto> Execute(int Page = 1, int PageSize = 20)
{
    int rowCount = 0;
    var products = _context.Products
        .Include(p => p.Category)
        .ToPaged(Page, PageSize, out rowCount)
        .Select(p => new ProductsFormAdminList_Dto
        {
            Id = p.Id,
            Brand = p.Brand,
            Category = p.Category.Name,
            Description = p.Description,
            Displayed = p.Displayed,
            Inventory = p.Inventory,
            Name = p.Name,
            Price = p.Price,
        }).ToList();

    return new ResultDto<ProductForAdminDto>()
    {
        Data = new ProductForAdminDto()
        {
            Products = products,
            CurrentPage = Page,
            PageSize = PageSize,
            RowCount = rowCount
        },
        IsSuccess = true,
        Message = "",
    };
}
این متد اطلاعات محصولات را از دیتابیس دریافت می‌کند و سپس آن‌ها را به صورت صفحه‌بندی شده (paging) بازمی‌گرداند.

از Include برای بارگذاری اطلاعات مرتبط (دسته‌بندی) استفاده می‌شود.

متد ToPaged برای انجام عملیات صفحه‌بندی استفاده می‌شود و rowCount تعداد کل رکوردها را محاسبه می‌کند.

نتیجه به عنوان یک ResultDto<ProductForAdminDto> شامل محصولات صفحه‌بندی شده، شماره صفحه جاری، اندازه صفحه و تعداد کل رکوردها بازگردانده می‌شود.

کلاس‌های داده‌ای:

ProductForAdminDto:

csharp
public class ProductForAdminDto
{
    public int RowCount { get; set; }
    public int CurrentPage { get; set; }
    public int PageSize { get; set; }
    public List<ProductsFormAdminList_Dto> Products { get; set; }
}
این کلاس شامل جزئیات مربوط به صفحه‌بندی مانند تعداد کل رکوردها، شماره صفحه جاری، اندازه صفحه و لیست محصولات است.

ProductsFormAdminList_Dto:

csharp
public class ProductsFormAdminList_Dto
{
    public long Id { get; set; }
    public string Name { get; set; }
    public string Category { get; set; }
    public string Brand { get; set; }
    public string Description { get; set; }
    public int Price { get; set; }
    public int Inventory { get; set; }
    public bool Displayed { get; set; }
}
این کلاس شامل اطلاعات محصول مانند شناسه، نام، دسته‌بندی، برند، توضیحات، قیمت، موجودی و وضعیت نمایش است.

نتیجه‌گیری:
این کد به شما امکان می‌دهد تا لیست محصولات را به صورت صفحه‌بندی شده برای مدیران دریافت کنید. از اینترفیس IGetProductForAdminService برای تعریف قرارداد و از کلاس GetProductForAdminService برای پیاده‌سازی این قرارداد استفاده می‌شود. اطلاعات محصولات شامل جزئیات صفحه‌بندی و محصولات بازگردانده شده است که به مدیران کمک می‌کند تا به راحتی محصولات را مدیریت کنند.

1 مشاهده12:25

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

بیایید کد کلاس Category را بررسی کنیم. این کلاس نمایانگر یک دسته‌بندی در سیستم است و از کلاس پایه BaseEntity ارث‌بری می‌کند.

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

csharp
public class Category : BaseEntity
{
    // ...
}
این کد یک کلاس به نام Category تعریف می‌کند که از کلاس پایه BaseEntity ارث‌بری می‌کند.

کلاس BaseEntity معمولاً شامل ویژگی‌های عمومی مانند Id, CreatedDate, ModifiedDate و غیره است.

ویژگی‌ها (Properties):

Name:

csharp
public string Name { get; set; }
این ویژگی نام دسته‌بندی را نگه می‌دارد.

ParentCategory و ParentCategoryId:

csharp
public virtual Category ParentCategory { get; set; }
public long? ParentCategoryId { get; set; }
ParentCategory: این ویژگی یک دسته‌بندی والد (پدر) را نگه می‌دارد.

ParentCategoryId: این ویژگی شناسه دسته‌بندی والد را نگه می‌دارد.

استفاده از virtual به دلیل استفاده از قابلیت Lazy Loading در Entity Framework است.

SubCategories:

csharp
public virtual ICollection<Category> SubCategories { get; set; }
این ویژگی یک مجموعه از دسته‌بندی‌های فرزند (زیر دسته‌ها) را نگه می‌دارد.

ICollection<Category> 
برای نگهداری و مدیریت لیستی از دسته‌بندی‌های فرزند استفاده می‌شود.

این ویژگی از نوع virtual است که به Entity Framework اجازه می‌دهد تا روابط Lazy Load را پیاده‌سازی کند.

نتیجه‌گیری:
این کلاس Category به شما امکان می‌دهد تا دسته‌بندی‌ها را در سیستم مدیریت کنید. شامل نام دسته‌بندی، دسته‌بندی والد (پدر) و زیر دسته‌ها است. این ساختار به شما اجازه می‌دهد تا دسته‌بندی‌ها را به صورت سلسله‌مراتبی (درختی) سازماندهی کنید. از ویژگی‌های virtual برای استفاده از قابلیت Lazy Loading در Entity Framework استفاده شده است.

1 مشاهده12:30

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

بیایید کد کلاس Product را که نمایانگر یک محصول در سیستم است بررسی کنیم. این کلاس از کلاس پایه BaseEntity ارث‌بری می‌کند.

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

csharp
public class Product : BaseEntity
{
    // ...
}
این کد یک کلاس به نام Product تعریف می‌کند که از کلاس پایه BaseEntity ارث‌بری می‌کند.

کلاس BaseEntity معمولاً شامل ویژگی‌های عمومی مانند Id, CreatedDate, ModifiedDate و غیره است.

ویژگی‌ها (Properties):

Name:

csharp
public string Name { get; set; }
این ویژگی نام محصول را نگه می‌دارد.

Brand:

csharp
public string Brand { get; set; }
این ویژگی برند محصول را نگه می‌دارد.

Description:

csharp
public string Description { get; set; }
این ویژگی توضیحات محصول را نگه می‌دارد.

Price:

csharp
public int Price { get; set; }
این ویژگی قیمت محصول را نگه می‌دارد.

Inventory:

csharp
public int Inventory { get; set; }
این ویژگی موجودی (تعداد موجود) محصول را نگه می‌دارد.

Displayed:

csharp
public bool Displayed { get; set; }
این ویژگی نشان می‌دهد که آیا محصول در سایت نمایش داده می‌شود یا خیر.

روابط (Relationships):

Category و CategoryId:

csharp
public virtual Category Category { get; set; }
public long CategoryId { get; set; }
Category:
 این ویژگی نمایانگر دسته‌بندی محصول است و به صورت virtual تعریف شده تا Entity Framework بتواند از قابلیت Lazy Loading استفاده کند.

CategoryId:
 این ویژگی شناسه دسته‌بندی محصول را نگه می‌دارد.

ProductImages:

csharp
public virtual ICollection<ProductImages> ProductImages { get; set; }
این ویژگی یک مجموعه از تصاویر محصول را نگه می‌دارد. استفاده از ICollection<ProductImages> برای مدیریت لیستی از تصاویر محصول.

این ویژگی از نوع virtual است که به Entity Framework اجازه می‌دهد تا روابط Lazy Load را پیاده‌سازی کند.

ProductFeatures:

csharp
public virtual ICollection<ProductFeatures> ProductFeatures { get; set; }
این ویژگی یک مجموعه از ویژگی‌های محصول را نگه می‌دارد. استفاده از ICollection<ProductFeatures> برای مدیریت لیستی از ویژگی‌های محصول.

این ویژگی از نوع virtual است که به Entity Framework اجازه می‌دهد تا روابط Lazy Load را پیاده‌سازی کند.

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

1 مشاهده12:32

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

بیایید کد کلاس ProductFeatures را بررسی کنیم. این کلاس برای نگهداری ویژگی‌های محصولات استفاده می‌شود و از کلاس پایه BaseEntity ارث‌بری می‌کند.

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

csharp
public class ProductFeatures : BaseEntity
{
    // ...
}
این کد یک کلاس به نام ProductFeatures تعریف می‌کند که از کلاس پایه BaseEntity ارث‌بری می‌کند.

کلاس BaseEntity معمولاً شامل ویژگی‌های عمومی مانند Id, CreatedDate, ModifiedDate و غیره است.

ویژگی‌ها (Properties):

Product و ProductId:

csharp
public virtual Product Product { get; set; }
public long ProductId { get; set; }
Product:
 این ویژگی یک شیء از نوع Product را نگه می‌دارد که نمایانگر محصولی است که این ویژگی به آن تعلق دارد. استفاده از virtual به دلیل استفاده از قابلیت Lazy Loading در Entity Framework است.

ProductId: 
این ویژگی شناسه محصولی را نگه می‌دارد که این ویژگی به آن تعلق دارد.

DisplayName:

csharp
public string DisplayName { get; set; }
این ویژگی نام نمایشی ویژگی محصول را نگه می‌دارد. برای مثال، اگر ویژگی "رنگ" باشد، مقدار DisplayName ممکن است "Color" باشد.

Value:

csharp
public string Value { get; set; }
این ویژگی مقدار ویژگی محصول را نگه می‌دارد. برای مثال، اگر ویژگی "رنگ" باشد، مقدار Value ممکن است "قرمز" باشد.

نتیجه‌گیری:
کلاس ProductFeatures به شما امکان می‌دهد تا ویژگی‌های محصولات را مدیریت کنید. این شامل نام نمایشی ویژگی و مقدار آن می‌شود. همچنین، این کلاس روابطی با کلاس Product دارد که نمایانگر محصولی است که این ویژگی به آن تعلق دارد. با این ساختار، می‌توانید اطلاعات ویژگی‌های محصول را به صورت سازمان‌یافته و کاملاً مرتبط با محصولات خود ذخیره و مدیریت کنید.

1 مشاهده12:34

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

بیایید کد کلاس ProductImages را بررسی کنیم. این کلاس برای نگهداری تصاویر محصولات استفاده می‌شود و از کلاس پایه BaseEntity ارث‌بری می‌کند.

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

csharp
public class ProductImages : BaseEntity
{
    // ...
}
این کد یک کلاس به نام ProductImages تعریف می‌کند که از کلاس پایه BaseEntity ارث‌بری می‌کند.

کلاس BaseEntity معمولاً شامل ویژگی‌های عمومی مانند Id, CreatedDate, ModifiedDate و غیره است.

ویژگی‌ها (Properties):

Product و ProductId:

csharp
public virtual Product Product { get; set; }
public long ProductId { get; set; }
Product:
 این ویژگی یک شیء از نوع Product را نگه می‌دارد که نمایانگر محصولی است که این تصویر به آن تعلق دارد. استفاده از virtual به دلیل استفاده از قابلیت Lazy Loading در Entity Framework است.

ProductId:
 این ویژگی شناسه محصولی را نگه می‌دارد که این تصویر به آن تعلق دارد.

Src:

csharp
public string Src { get; set; }
این ویژگی مسیر یا لینک تصویر محصول را نگه می‌دارد. برای مثال، می‌تواند مسیری به یک فایل تصویر در سرور یا یک لینک به تصویر در اینترنت باشد.

نتیجه‌گیری:
کلاس ProductImages به شما امکان می‌دهد تا تصاویر مرتبط با محصولات را مدیریت کنید. این شامل مسیر یا لینک تصویر و شناسه محصول مربوطه است. همچنین، این کلاس روابطی با کلاس Product دارد که نمایانگر محصولی است که این تصویر به آن تعلق دارد. با این ساختار، می‌توانید اطلاعات تصاویر محصولات را به صورت سازمان‌یافته و کاملاً مرتبط با محصولات خود ذخیره و مدیریت کنید.

1 مشاهده12:35

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

بیایید کد کنترلر ProductsController را که برای مدیریت عملیات‌های مرتبط با محصولات در بخش مدیرت استفاده می‌شود بررسی کنیم.

توضیحات کد:
تعریف نام‌فضا و وارد کردن وابستگی‌ها:

csharp
namespace EndPoint.Site.Areas.Admin.Controllers
{
    [Area("Admin")]
    public class ProductsController : Controller
    {
        private readonly IProductFacad _productFacad;

        public ProductsController(IProductFacad productFacad)
        {
            _productFacad = productFacad;
        }
    }
}
namespace: EndPoint.Site.Areas.Admin.Controllers
 نام‌فضا را مشخص می‌کند.

[Area("Admin")]:
 مشخص می‌کند که این کنترلر متعلق به ناحیه (Area) "Admin" است.

ProductsController:
 کنترلری برای مدیریت عملیات‌های محصولات تعریف می‌کند.

IProductFacad:
 یک فیلد خصوصی _productFacad از نوع فاساد محصولات تعریف می‌کند و آن را از طریق سازنده کنترلر مقداردهی اولیه می‌کند.

متد Index:

csharp
public IActionResult Index(int Page = 1, int PageSize = 20)
{
    return View(_productFacad.GetProductForAdminService.Execute(Page, PageSize).Data);
}
این متد صفحه اصلی محصولات را نمایش می‌دهد.

از متد Execute سرویس GetProductForAdminService برای دریافت لیست محصولات صفحه‌بندی شده استفاده می‌کند و نتیجه را به ویو ارسال می‌کند.

متد Detail:

csharp
public IActionResult Detail(long Id)
{
    return View(_productFacad.GetProductDetailForAdminService.Execute(Id).Data);
}
این متد جزئیات یک محصول خاص را نمایش می‌دهد.

از متد Execute سرویس GetProductDetailForAdminService برای دریافت جزئیات محصول با استفاده از شناسه Id استفاده می‌کند و نتیجه را به ویو ارسال می‌کند.

متد AddNewProduct (HttpGet):

csharp
[HttpGet]
public IActionResult AddNewProduct()
{
    ViewBag.Categories = new SelectList(_productFacad.GetAllCategoriesService.Execute().Data, "Id", "Name");
    return View();
}
این متد فرم اضافه کردن محصول جدید را نمایش می‌دهد.

از سرویس GetAllCategoriesService برای دریافت لیست همه دسته‌بندی‌ها استفاده می‌کند و آن را به ViewBag.Categories اختصاص می‌دهد تا در فرم استفاده شود.

متد AddNewProduct (HttpPost):

csharp
[HttpPost]
public IActionResult AddNewProduct(RequestAddNewProductDto request, List<AddNewProduct_Features> Features)
{
    List<IFormFile> images = new List<IFormFile>();
    for (int i = 0; i < Request.Form.Files.Count; i++)
    {
        var file = Request.Form.Files[i];
        images.Add(file);
    }
    request.Images = images;
    request.Features = Features;
    return Json(_productFacad.AddNewProductService.Execute(request));
}
این متد داده‌های فرم ارسال شده برای اضافه کردن محصول جدید را پردازش می‌کند.

فایل‌های آپلود شده (تصاویر محصول) را از فرم دریافت می‌کند و به لیست images اضافه می‌کند.

ویژگی‌های محصول را از ورودی دریافت می‌کند و به request اختصاص می‌دهد.

از سرویس AddNewProductService برای افزودن محصول جدید استفاده می‌کند و نتیجه را به صورت JSON بازمی‌گرداند.

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

1 مشاهده12:39

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

بیایید این کد را که برای نمایش فرم افزودن محصول جدید در بخش مدیریت استفاده می‌شود بررسی کنیم.

توضیحات کد:
اضافه کردن Tag Helpers:

csharp
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
این خط کد Tag Helpers مربوط به ASP.NET Core MVC را به ویو اضافه می‌کند تا بتوان از تگ‌های HTML کمکی در ویو استفاده کرد.

ViewData و Layout:

csharp
@{
    ViewData["Title"] = "AddNewProduct";
    Layout = "~/Areas/Admin/Views/Shared/_Adminlayout.cshtml";
}
ViewData["Title"]: عنوان صفحه را به "AddNewProduct" تنظیم می‌کند.

Layout: از Layout مشخص شده برای این صفحه استفاده می‌کند.

بخش اصلی HTML:

بخش‌های مختلف صفحه شامل هدر، بدنه، و فرم برای افزودن محصول جدید.

فرم افزودن محصول جدید:

html
<section class="basic-elements">
    <div class="row">
        <div class="col-sm-12">
            <h2 class="content-header">فرم ثبت نام کاربر جدید</h2>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <div class="card-title-wrap bar-success">
                        <h4 class="card-title mb-0">اطلاعات کاربر جدید را وارد نمایید</h4>
                    </div>
                </div>
                <div class="card-body">
                    <div class="px-3">
                        <div class="form">
                            <div class="form-body">
                                <div class="row">
                                    <div class="col-xl-4 col-lg-6 col-md-12 mb-1">
                                        <fieldset class="form-group">
                                            <label for="basicInput">نام محصول </label>
                                            <input type="text" class="form-control" id="Name">
                                        </fieldset>
                                    </div>
                                    <div class="col-xl-4 col-lg-6 col-md-12 mb-1">
                                        <fieldset class="form-group">
                                            <label for="basicInput"> برند </label>
                                            <input type="text" class="form-control" id="Brand">
                                        </fieldset>
                                    </div>
                                    <div class="col-xl-4 col-lg-6 col-md-12 mb-1">
                                        <fieldset class="form-group">
                                            <label for="basicInput"> قیمت</label>
                                            <input type="number" class="form-control" id="Price">
                                        </fieldset>
                                    </div>
                                    <div class="col-xl-4 col-lg-6 col-md-12 mb-1">
                                        <fieldset class="form-group">
                                            <label for="basicInput"> تعداد موجودی</label>
                                            <input type="number" class="form-control" id="Inventory">
                                        </fieldset>
                                    </div>
                                    <div class="col-xl-4 col-lg-6 col-md-12 mb-1">
                                        <fieldset class="form-group">
                                            <label for="basicInput">نمایش داده شود؟ </label>
                                            <input type="checkbox" class="form-control" id="Displayed">
                                        </fieldset>
                                    </div>
                                    <div class="col-xl-4 col-lg-6 col-md-12 mb-1">
                                        <fieldset class="form-group">
                                            <label for="basicInput">تصاویر </label>
                                            <input type="file" multiple class="form-control" accept="image/*" id="Images">
                                        </fieldset>
                                    </div>

1 مشاهده12:45

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

<div class="col-xl-4 col-lg-6 col-md-12 mb-1">
                                        <fieldset class="form-group">
                                            <label for="basicInput">دسته بندی </label>
                                            <select class="form-control" id="Category" asp-items="@ViewBag.Categories"></select>
                                        </fieldset>
                                    </div>
                                    <div class="col-xl-12 col-lg-12 col-md-12 mb-1">
                                        <fieldset class="form-group">
                                            <label for="basicInput"> توضیحات</label>
                                            <textarea id="Description" class="form-control " rows="5"></textarea>
                                        </fieldset>
                                    </div>
                                    <hr />
                                    <hr />
                                    <div class="col-xl-2 col-lg-6 col-md-12 mb-1">
                                        <fieldset class="form-group">
                                            <label for="basicInput"> نام ویژگی </label>
                                            <input type="text" class="form-control" id="txtDisplayName" placeholder="نام ویژگی" />
                                        </fieldset>
                                    </div>
                                    <div class="col-xl-2 col-lg-6 col-md-12 mb-1">
                                        <fieldset class="form-group">
                                            <label for="basicInput"> مقدار ویژگی </label>
                                            <input type="text" class="form-control" id="txtValue" placeholder="مقدار ویژگی" />
                                        </fieldset>
                                    </div>
                                    <div class="col-xl-2 col-lg-6 col-md-12 mb-1">
                                        <fieldset class="form-group">
                                            <br />
                                            <a class="btn btn-success" id="btnAddFeatures">افزودن</a>
                                        </fieldset>
                                    </div>
                                    <br class="clear" />
                                    <table id="tbl_Features" class="col-md-12 table table-bordered table-hover table-condensed table-responsive">
                                        <thead>
                                            <tr>
                                                <th>
                                                    نام ویژگی
                                                </th>
                                                <th>
                                                    مقدار ویژگی
                                                </th>
                                                <th>

                                                </th>
                                            </tr>
                                        </thead>
                                        <tbody></tbody>
                                    </table>
                                    <div class="col-xl-12 col-lg-12 col-md-12 mb-1">
                                        <fieldset class="form-group">
                                            <br />
                                            <a id="btnAddProduct" class="btn btn-success col-md-12"> افزودن محصول  </a>
                                        </fieldset>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
فرم اصلی شامل فیلدهای ورودی برای اطلاعات محصول مانند نام، برند، قیمت، موجودی، وضعیت نمایش، تصاویر، دسته‌بندی و توضیحات است.

1 مشاهده12:45

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

از یک select برای انتخاب دسته‌بندی استفاده می‌شود که با استفاده از ViewBag.Categories پر می‌شود.

بخش برای افزودن ویژگی‌های محصول شامل نام ویژگی و مقدار آن است.

یک جدول برای نمایش ویژگی‌های افزوده شده.

دکمه‌ای برای ارسال اطلاعات و افزودن محصول جدید.

بخش اسکریپت:

csharp
@section Scripts
{
    <link href="~/Sweetalert2/sweetalert2.min.css" rel="stylesheet" />
    <script src="~/Sweetalert2/sweetalert2.min.js"></script>
}
اضافه کردن لینک و اسکریپت SweetAlert2 برای نمایش پیام‌های تایید و هشدار.

در اینجا بخش اسکریپت ناقص است و احتمالاً شامل توابع جاوا اسکریپت برای مدیریت رویدادها و ارسال اطلاعات فرم است.

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

1 مشاهده12:45

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

بیایید ادامه‌ی بخش اسکریپت را بررسی کنیم تا به طور کامل متوجه عملکرد آن شویم.

توضیحات کد:
افزودن ویژگی‌ها به جدول:

javascript
$("#btnAddFeatures").on("click", function () {
    var txtDisplayName = $("#txtDisplayName").val();
    var txtValue = $("#txtValue").val();

    if (txtDisplayName == "" || txtValue == "") {
        swal.fire(
            'هشدار!',
            "نام و مقدار را باید وارد کنید",
            'warning'
        );
    }
    else {
        $('#tbl_Features tbody').append('<tr> <td>' + txtDisplayName + '</td>  <td>' + txtValue + '</td> <td> <a class="idFeatures btnDelete btn btn-danger"> حذف </a> </td> </tr>');
        $("#txtDisplayName").val('');
        $("#txtValue").val('');
    }
});
وقتی دکمه "افزودن" کلیک می‌شود، این اسکریپت نام و مقدار ویژگی را از فیلدهای ورودی دریافت می‌کند.

اگر این فیلدها خالی باشند، پیام هشدار SweetAlert نمایش داده می‌شود.

در غیر این صورت، ویژگی به جدول اضافه می‌شود و فیلدهای ورودی پاک می‌شوند.

حذف ویژگی‌ها از جدول:

javascript
$("#tbl_Features").on('click', '.idFeatures', function () {
    $(this).closest('tr').remove();
});
وقتی که دکمه "حذف" در جدول ویژگی‌ها کلیک می‌شود، این اسکریپت ردیف مربوطه را حذف می‌کند.

جمع‌آوری داده‌های فرم و ارسال درخواست AJAX:

javascript
$('#btnAddProduct').on('click', function () {
    var data = new FormData();

    // دریافت مقادیر از تکس باکس ها و...
    data.append("Name", $("#Name").val());
    data.append("Brand", $("#Brand").val());
    data.append("Price", $("#Price").val());
    data.append("Inventory", $("#Inventory").val());
    data.append("Displayed", $("#Displayed").attr("checked") ? true : false);
    data.append("CategoryId", $('#Category').find('option:selected').val());
    data.append("Description", $("#Description").val());

    // دریافت عکس های انتخاب شده توسط کاربر و قرار دادن عکس ها در متغیر data
    var productImages = document.getElementById("Images");
    if (productImages.files.length > 0) {
        for (var i = 0; i < productImages.files.length; i++) {
            data.append('Images-' + i, productImages.files[i]);
        }
    }

    // دریافت ویژگی های محصول از جدول
    var dataFeaturesViewModel = $('#tbl_Features tr:gt(0)').map(function () {
        return {
            DisplayName: $(this.cells[0]).text(),
            Value: $(this.cells[1]).text(),
        };
    }).get();

    $.each(dataFeaturesViewModel, function (i, val) {
        data.append('[' + i + '].DisplayName', val.DisplayName);
        data.append('[' + i + '].Value', val.Value);
    });

    // ارسال اطلاعات به کنترلر
    var ajaxRequest = $.ajax({
        type: "POST",
        url: "AddNewProduct",
        contentType: false,
        processData: false,
        data: data,
        success: function (data) {
            if (data.isSuccess == true) {
                swal.fire(
                    'موفق!',
                    data.message,
                    'success'
                ).then(function (isConfirm) {
                    window.location.href = "/Admin/Products/";
                });
            }
            else {
                swal.fire(
                    'هشدار!',
                    data.message,
                    'warning'
                );
            }
        },
        error: function (xhr, ajaxOptions, thrownError) {
            alert(xhr.status);
            alert(thrownError);
        }
    });
    ajaxRequest.done(function (xhr, textStatus) {
        // Do other operations if needed
    });
});
این اسکریپت داده‌های فرم را جمع‌آوری می‌کند و به یک FormData اضافه می‌کند.

تصاویر محصول نیز به FormData اضافه می‌شوند.

ویژگی‌های محصول از جدول دریافت و به FormData اضافه می‌شوند.

سپس یک درخواست AJAX ارسال می‌شود که داده‌ها را به سرور ارسال می‌کند.

در صورت موفقیت‌آمیز بودن درخواست، پیام موفقیت نمایش داده می‌شود و کاربر به صفحه محصولات هدایت می‌شود. در غیر این صورت، پیام خطا نمایش داده می‌شود.

1 مشاهده12:46

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

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

1 مشاهده12:46

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

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

توضیحات کد:
اضافه کردن Tag Helpers:

csharp
@addTagHelper *, LazZiya.TagHelpers
این خط کد Tag Helpers مربوط به LazZiya.TagHelpers را به ویو اضافه می‌کند تا بتوان از تگ‌های HTML کمکی در ویو استفاده کرد.

اضافه کردن فضای نام‌ها و مدل:

csharp
@using Test_Store.Application.Services.Products.Queries.GetProductForAdmin;
@model ProductForAdminDto;
@using
 برای استفاده از فضای نام سرویس‌های مورد نیاز برای دریافت لیست محصولات.

@model
 برای تعریف مدل داده‌ای که به ویو ارسال می‌شود. در اینجا مدل ProductForAdminDto است که شامل جزئیات صفحه‌بندی و لیست محصولات است.

ViewData و Layout:

csharp
@{
    ViewData["Title"] = "لیست محصولات";
    Layout = "~/Areas/Admin/Views/Shared/_Adminlayout.cshtml";
}
ViewData["Title"]: عنوان صفحه را به "لیست محصولات" تنظیم می‌کند.

Layout:
 از Layout مشخص شده برای این صفحه استفاده می‌کند.

ساختار اصلی HTML:

بخش‌های مختلف صفحه شامل هدر، بدنه، و جدول برای نمایش لیست محصولات.

جدول نمایش لیست محصولات:

html
<div class="">
    <div class="container-fluid">
        <section id="configuration">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body collapse show">
                            <div class="card-block card-dashboard">
                                <p class="card-text">لیست محصولات</p>
                                <div id="DataTables_Table_0_wrapper" class="dataTables_wrapper container-fluid dt-bootstrap4">
                                    <div class="col-sm-12">
                                        <table class="table table-striped table-bordered zero-configuration dataTable" id="DataTables_Table_0" role="grid" aria-describedby="DataTables_Table_0_info">
                                            <thead>
                                                <tr role="row">
                                                    <th class="sorting_asc">نام</th>
                                                    <th class="sorting_asc">دسته بندی</th>
                                                    <th class="sorting_asc">برند</th>
                                                    <th class="sorting_asc">قیمت</th>
                                                    <th class="sorting_asc">موجودی</th>
                                                    <th class="sorting_asc">نمایش در سایت؟</th>
                                                    <th class="sorting_asc"></th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach (var item in Model.Products)
                                                {
                                                    <tr role="row">
                                                        <td>@item.Name</td>
                                                        <td>@item.Category</td>
                                                        <td>@item.Brand</td>
                                                        <td>@item.Price.ToString("n0")</td>
                                                        <td>@item.Inventory</td>
                                                        <td>@item.Displayed</td>
                                                        <td>
                                                            <a class="btn btn-danger">حذف</a>
                                                            <a href="~/admin/products/detail/@item.Id" class="btn btn-info">اطلاعات بیشتر</a>
                                                        </td>
                                                    </tr>
                                                }
                                            </tbody>
                                        </table>
                                    </div>
                                </div>

1 مشاهده12:48

مطالب بعدی

پرسش‌ها

قوانین

داغ‌ترین‌ها

چندسکویی