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

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

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

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

برای اطلاعات بیشتر و دانلود، می‌توانید به NuGet Gallery مراجعه کنید.

1 مشاهده12:55

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

برای ذخیره عکس‌ها در 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" برای آپلود فایل‌ها تنظیم شده است.

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

1 مشاهده12:55

مطالب بعدی

پرسش‌ها

قوانین

داغ‌ترین‌ها

چندسکویی