بیایید این کد را که برای دریافت جزئیات محصول برای مدیران (ادمینها) استفاده میشود بررسی کنیم. این کد شامل تعریف اینترفیس IGetProductDetailForAdminService و پیادهسازی آن در کلاس GetProductDetailForAdminService است.
توضیحات کد:
تعریف اینترفیس:
csharp
public interface IGetProductDetailForAdminService
{
ResultDto<ProductDetailForAdmindto> Execute(long Id);
}
این اینترفیس یک متد Execute تعریف میکند که یک long به عنوان ورودی میگیرد و یک ResultDto<ProductDetailForAdmindto> را بازمیگرداند.
کلاس GetProductDetailForAdminService:
فیلدهای خصوصی و سازنده:
csharp
public class GetProductDetailForAdminService : IGetProductDetailForAdminService
{
private readonly IDataBaseContext _context;
public GetProductDetailForAdminService(IDataBaseContext context)
{
_context = context;
}
}
این کلاس شامل یک فیلد خصوصی _context از نوع IDataBaseContext و یک سازنده است که این فیلد را مقداردهی اولیه میکند.
متد Execute:
csharp
public ResultDto<ProductDetailForAdmindto> Execute(long Id)
{
var product = _context.Products
.Include(p => p.Category)
.ThenInclude(p => p.ParentCategory)
.Include(p => p.ProductFeatures)
.Include(p => p.ProductImages)
.Where(p => p.Id == Id)
.FirstOrDefault();
return new ResultDto<ProductDetailForAdmindto>()
{
Data = new ProductDetailForAdmindto()
{
Brand = product.Brand,
Category = GetCategory(product.Category),
Description = product.Description,
Displayed = product.Displayed,
Id = product.Id,
Inventory = product.Inventory,
Name = product.Name,
Price = product.Price,
Features = product.ProductFeatures.Select(p => new ProductDetailFeatureDto
{
Id = p.Id,
DisplayName = p.DisplayName,
Value = p.Value
}).ToList(),
Images = product.ProductImages.Select(p => new ProductDetailImagesDto
{
Id = p.Id,
Src = p.Src,
}).ToList(),
},
IsSuccess = true,
Message = "",
};
}
این متد اطلاعات محصول را با استفاده از شناسه محصول Id از دیتابیس دریافت میکند.
از Include و ThenInclude برای بارگذاری اطلاعات مرتبط استفاده میشود (مثلاً دستهبندیها، ویژگیهای محصول، تصاویر محصول).
نتیجه به عنوان یک ResultDto<ProductDetailForAdmindto> بازگردانده میشود که شامل جزئیات محصول است.
متد کمکی GetCategory:
csharp
private string GetCategory(Category category)
{
string result = category.ParentCategory != null ? $"{category.ParentCategory.Name} - " : "";
return result += category.Name;
}
این متد برای دریافت نام دستهبندی و والد آن (در صورت وجود) استفاده میشود.
کلاسهای دادهای:
ProductDetailForAdmindto:
csharp
public class ProductDetailForAdmindto
{
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; }
public List<ProductDetailFeatureDto> Features { get; set; }
public List<ProductDetailImagesDto> Images { get; set; }
}
این کلاس شامل جزئیات محصول مانند شناسه، نام، دستهبندی، برند، توضیحات، قیمت، موجودی، ویژگیها و تصاویر محصول است.
ProductDetailImagesDto:
csharp
public class ProductDetailImagesDto
{
public long Id { get; set; }
public string Src { get; set; }
}
این کلاس شامل اطلاعات تصاویر محصول است.
ProductDetailFeatureDto:
csharp
public class ProductDetailFeatureDto
{
public long Id { get; set; }
public string DisplayName { get; set; }
public string Value { get; set; }
}
این کلاس شامل اطلاعات ویژگیهای محصول است.
نتیجهگیری:
این کد به شما امکان میدهد تا جزئیات کامل یک محصول را با استفاده از شناسه آن دریافت کنید. از اینترفیس IGetProductDetailForAdminService برای تعریف قرارداد و از کلاس GetProductDetailForAdminService برای پیادهسازی این قرارداد استفاده میشود. جزئیات محصول شامل ویژگیها، تصاویر، دستهبندی، و سایر اطلاعات مرتبط است که به مدیران کمک میکند تا اطلاعات کامل و دقیقی از محصولات داشته باشند.
بیایید کد سرویس 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 برای پیادهسازی این قرارداد استفاده میشود. اطلاعات محصولات شامل جزئیات صفحهبندی و محصولات بازگردانده شده است که به مدیران کمک میکند تا به راحتی محصولات را مدیریت کنند.
بیایید کد کلاس 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 استفاده شده است.
بیایید کد کلاس 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 به شما امکان میدهد تا محصولات را در سیستم مدیریت کنید. شامل ویژگیهایی مانند نام، برند، توضیحات، قیمت، موجودی و وضعیت نمایش است. همچنین روابط با دستهبندی، تصاویر محصول و ویژگیهای محصول را مدیریت میکند. این ساختار کمک میکند تا اطلاعات محصول به صورت کامل و سازمانیافته ذخیره و بازیابی شوند.
بیایید کد کلاس 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 دارد که نمایانگر محصولی است که این ویژگی به آن تعلق دارد. با این ساختار، میتوانید اطلاعات ویژگیهای محصول را به صورت سازمانیافته و کاملاً مرتبط با محصولات خود ذخیره و مدیریت کنید.
بیایید کد کلاس 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 دارد که نمایانگر محصولی است که این تصویر به آن تعلق دارد. با این ساختار، میتوانید اطلاعات تصاویر محصولات را به صورت سازمانیافته و کاملاً مرتبط با محصولات خود ذخیره و مدیریت کنید.
بیایید کد کنترلر 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 به شما امکان میدهد تا عملیاتهای مرتبط با مدیریت محصولات را انجام دهید. شامل متدهایی برای نمایش لیست محصولات، نمایش جزئیات محصول، نمایش فرم اضافه کردن محصول جدید و پردازش دادههای فرم برای اضافه کردن محصول جدید است. این طراحی به مدیران کمک میکند تا به راحتی محصولات را مدیریت کنند و اطلاعات کامل و دقیقی از محصولات داشته باشند.
بیایید این کد را که برای نمایش فرم افزودن محصول جدید در بخش مدیریت استفاده میشود بررسی کنیم.
توضیحات کد:
اضافه کردن 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>
<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>
فرم اصلی شامل فیلدهای ورودی برای اطلاعات محصول مانند نام، برند، قیمت، موجودی، وضعیت نمایش، تصاویر، دستهبندی و توضیحات است.
از یک select برای انتخاب دستهبندی استفاده میشود که با استفاده از ViewBag.Categories پر میشود.
بخش برای افزودن ویژگیهای محصول شامل نام ویژگی و مقدار آن است.
یک جدول برای نمایش ویژگیهای افزوده شده.
دکمهای برای ارسال اطلاعات و افزودن محصول جدید.
بخش اسکریپت:
csharp
@section Scripts
{
<link href="~/Sweetalert2/sweetalert2.min.css" rel="stylesheet" />
<script src="~/Sweetalert2/sweetalert2.min.js"></script>
}
اضافه کردن لینک و اسکریپت SweetAlert2 برای نمایش پیامهای تایید و هشدار.
در اینجا بخش اسکریپت ناقص است و احتمالاً شامل توابع جاوا اسکریپت برای مدیریت رویدادها و ارسال اطلاعات فرم است.
نتیجهگیری:
این کد به شما امکان میدهد تا فرم افزودن محصول جدید را در بخش مدیریت ایجاد کنید. شامل فیلدهای مختلف برای ورودی اطلاعات محصول، دکمه برای افزودن ویژگیهای محصول و جدول برای نمایش ویژگیهای افزوده شده است. از SweetAlert2 برای نمایش پیامهای تایید و هشدار استفاده میشود.
بیایید ادامهی بخش اسکریپت را بررسی کنیم تا به طور کامل متوجه عملکرد آن شویم.
توضیحات کد:
افزودن ویژگیها به جدول:
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 ارسال میشود که دادهها را به سرور ارسال میکند.
در صورت موفقیتآمیز بودن درخواست، پیام موفقیت نمایش داده میشود و کاربر به صفحه محصولات هدایت میشود. در غیر این صورت، پیام خطا نمایش داده میشود.