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

پروژه 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

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

<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 برای مدیریت صفحه‌بندی محصولات استفاده می‌شود که به مدیران کمک می‌کند تا به راحتی محصولات را مدیریت و پیمایش کنند.

1 مشاهده12:48

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

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

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

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>

1 مشاهده12:50

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

</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 تنظیم شده است تا در صورت کلیک، تصویر بزرگتر در یک تب جدید باز شود.

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

1 مشاهده12:50

مطالب بعدی

پرسش‌ها

قوانین

داغ‌ترین‌ها

چندسکویی