بیایید ادامهی بخش اسکریپت را بررسی کنیم تا به طور کامل متوجه عملکرد آن شویم.
توضیحات کد:
افزودن ویژگیها به جدول:
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 ارسال میشود که دادهها را به سرور ارسال میکند.
در صورت موفقیتآمیز بودن درخواست، پیام موفقیت نمایش داده میشود و کاربر به صفحه محصولات هدایت میشود. در غیر این صورت، پیام خطا نمایش داده میشود.
نتیجهگیری:
این اسکریپت به شما امکان میدهد تا ویژگیهای محصول را به جدول اضافه کنید، آنها را مدیریت کنید و دادههای فرم را جمعآوری و ارسال کنید. از SweetAlert برای نمایش پیامهای تایید و هشدار استفاده میشود تا تجربه کاربری بهتری ایجاد شود.
بیایید این کد صفحهی نمایش لیست محصولات برای مدیران را که در بخش مدیریت استفاده میشود بررسی کنیم.
توضیحات کد:
اضافه کردن 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>
<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 خود اضافه کنید و آنها را در دیتابیس خود ایجاد کنید.
پروژه ASP.Net Core MVC (وب و سی شارپ)
در packing manager console عبارت Add-Migration Test یا هر نامی که قابل فهم باشد و بعد Update-Datab
بعد اضافه کردن مایگریشن نام جدید و بعد آپدیدت دیتابیس