JavaScript: html <script src="~/AdminTemplate/plugins/jquery/jquery.min.js"></script> <script src="~/AdminTemplate/plugins/bootstrap/js/bootstrap.bundle.min.js"></script> <script src="~/AdminTemplate/plugins//iCheck/icheck.min.js"></script> <link href="~/Sweetalert2/sweetalert2.min.css" rel="stylesheet" /> <script src="~/sweetalert2/sweetalert2.min.js"></script> <script> function Registeruser() { var FullName = $("#FullName").val(); var Email = $("#Email").val(); var Password = $("#Password").val(); var RePassword = $("#RePassword").val(); var postData = { 'FullName': FullName, 'Email': Email, 'Password': Password, 'RePassword': RePassword, }; $.ajax({ contentType: 'application/x-www-form-urlencoded', dataType: 'json', type: "POST", url: "Signup", data: postData, success: function (data) { if (data.isSuccess == true) { swal.fire( 'موفق!', data.message, 'success' ).then(function (isConfirm) { window.location.replace("/"); }); } else { swal.fire( 'هشدار!', data.message, 'warning' ); } }, error: function (request, status, error) { swal.fire( 'هشدار!', request.responseText, 'warning' ); } }); } </script> </body> </html> استفاده از jQuery, Bootstrap, iCheck, و SweetAlert2 برای بهبود عملکرد و ظاهر صفحه. تابع Registeruser که با استفاده از AJAX درخواست ثبت‌نام را به سرور ارسال می‌کند و بر اساس پاسخ سرور، پیام‌های مناسب را نمایش می‌دهد. نتیجه‌گیری: این صفحه ثبت‌نام به کاربران اجازه می‌دهد تا اطلاعات خود را وارد کرده و عملیات ثبت‌نام را انجام دهند. همچنین در صورت موفقیت یا خطا در ثبت‌نام، پیام‌های مناسبی نمایش داده می‌شود. استفاده از AJAX برای ارسال درخواست ثبت‌نام به سرور و مدیریت پاسخ‌ها باعث بهبود تجربه کاربری می‌شود.

در packing manager console عبارت Add-Migration Test یا هر نامی که قابل فهم باشد و بعد Update-Database وارد کنید نکته ای که نگفتم این هست که : لیست را در قسمت Test_Store.Persistence باشد تا مایگریشن ساخته شود

بیایید کد Program.cs را بررسی کنیم. این کد به منظور راه‌اندازی و پیکربندی برنامه ASP.NET Core شما استفاده می‌شود. توضیحات کد: Import های مورد نیاز: using Microsoft.AspNetCore.Authentication.Cookies; using Microsoft.EntityFrameworkCore; و دیگر using ها برای سرویس‌ها و کانتکست‌های مورد نیاز. ایجاد و پیکربندی وب اپلیکیشن: var builder = WebApplication.CreateBuilder(args);: این خط کد یک سازنده اپلیکیشن وب ایجاد می‌کند. افزودن سرویس‌ها به کانتینر: احراز هویت: csharp builder.Services.AddAuthentication(options => { options.DefaultSignInScheme = CookieAuthenticationDefaults.AuthenticationScheme; options.DefaultAuthenticateScheme = CookieAuthenticationDefaults.AuthenticationScheme; options.DefaultChallengeScheme = CookieAuthenticationDefaults.AuthenticationScheme; }).AddCookie(options => { options.LoginPath = new PathString("/"); options.ExpireTimeSpan = TimeSpan.FromMinutes(5.0); }); این بخش تنظیمات احراز هویت با کوکی‌ها را اضافه می‌کند و مسیر ورود و زمان انقضای کوکی را تنظیم می‌کند. سرویس‌های سفارشی: csharp builder.Services.AddScoped<IDataBaseContext, DataBaseContext>(); builder.Services.AddScoped<IGetUsersService, GetUsersService>(); builder.Services.AddScoped<IGetRolesService, GetRolesService>(); builder.Services.AddScoped<IRegisterUserService, RegisterUserService>(); builder.Services.AddScoped<IRemoveUserService, RemoveUserService>(); builder.Services.AddScoped<IUserLoginService, UserLoginService>(); builder.Services.AddScoped<IUserSatusChangeService, UserSatusChangeService>(); builder.Services.AddScoped<IEditUserService, EditUserService>(); تزریق وابستگی‌ها برای الگوهای فاساد: csharp builder.Services.AddScoped<IProductFacad, ProductFacad>(); افزودن کانتکست دیتابیس: csharp string connectionString = @"Server=.\SQLEXPRESS; Database=Test_StoreDb; Integrated Security=True; TrustServerCertificate=True;"; builder.Services.AddDbContext<DataBaseContext>(options => options.UseSqlServer(connectionString)); افزودن کنترلرها با ویوها: csharp builder.Services.AddControllersWithViews(); ساختن وب اپلیکیشن: var app = builder.Build(); پیکربندی پایپ‌لاین درخواست‌های HTTP: بررسی محیط توسعه: csharp if (!app.Environment.IsDevelopment()) { app.UseExceptionHandler("/Home/Error"); app.UseHsts(); } Middlewareها: csharp app.UseHttpsRedirection(); app.UseStaticFiles(); app.UseRouting(); app.UseAuthorization(); app.UseAuthentication(); تنظیمات مسیرها: csharp app.MapControllerRoute( name: "areas", pattern: "{area:exists}/{controller=Home}/{action=Index}/{id?}"); app.MapControllerRoute( name: "default", pattern: "{controller=Home}/{action=Index}/{id?}"); اجرای اپلیکیشن: app.Run(); نتیجه‌گیری: این کد به شما امکان می‌دهد تا برنامه ASP.NET Core خود را راه‌اندازی و پیکربندی کنید. شامل پیکربندی سرویس‌های احراز هویت، کانتکست دیتابیس، سرویس‌های سفارشی، و تعریف مسیرهای مختلف است. همچنین میان‌افزارها (Middleware) برای مدیریت درخواست‌های HTTP و خطاها تنظیم شده‌اند.

کد app.UseAuthentication(); بخشی از پیکربندی پایپ‌لاین درخواست‌های HTTP در برنامه ASP.NET Core شما است. توضیحات کد: کاربرد اصلی: این خط کد میان‌افزار (Middleware) احراز هویت را به پایپ‌لاین درخواست‌های HTTP اضافه می‌کند. این میان‌افزار مسئول مدیریت احراز هویت کاربران در درخواست‌های ورودی به برنامه شما است. نحوه عملکرد: وقتی که درخواست به برنامه شما وارد می‌شود، این میان‌افزار بررسی می‌کند که آیا کاربر احراز هویت شده است یا خیر. اگر کاربر احراز هویت نشده باشد و به منابع محافظت شده دسترسی داشته باشد، به صفحه ورود یا هر مسیر تعیین شده دیگر هدایت می‌شود. محل قرارگیری: این خط کد باید قبل از app.UseAuthorization(); قرار گیرد. به این ترتیب، ابتدا احراز هویت کاربر انجام می‌شود و سپس مجوز‌های دسترسی بررسی می‌شوند. مثال: در این مثال، app.UseAuthentication(); به عنوان بخشی از پیکربندی پایپ‌لاین درخواست‌های HTTP قرار دارد: csharp var app = builder.Build(); // Configure the HTTP request pipeline. if (!app.Environment.IsDevelopment()) { app.UseExceptionHandler("/Home/Error"); app.UseHsts(); } app.UseHttpsRedirection(); app.UseStaticFiles(); app.UseRouting(); app.UseAuthentication(); // فعال‌سازی میان‌افزار احراز هویت app.UseAuthorization(); // فعال‌سازی میان‌افزار مجوزها app.MapControllerRoute( name: "default", pattern: "{controller=Home}/{action=Index}/{id?}"); app.Run(); نتیجه‌گیری: این خط کد به برنامه شما کمک می‌کند تا کاربران را احراز هویت کند و اطمینان حاصل شود که تنها کاربران احراز هویت شده به منابع محافظت شده دسترسی دارند.

بیایید این بخش از کد را که مربوط به پیکربندی سرویس‌های احراز هویت در ASP.NET Core است بررسی کنیم. توضیحات کد: افزودن سرویس احراز هویت: csharp builder.Services.AddAuthentication(options => { options.DefaultSignInScheme = CookieAuthenticationDefaults.AuthenticationScheme; options.DefaultAuthenticateScheme = CookieAuthenticationDefaults.AuthenticationScheme; options.DefaultChallengeScheme = CookieAuthenticationDefaults.AuthenticationScheme; }) AddAuthentication: این متد، احراز هویت را به کانتینر سرویس‌ها اضافه می‌کند. options.DefaultSignInScheme: تعیین طرح پیش‌فرض برای ورود به سیستم (sign-in). در اینجا از کوکی‌ها استفاده شده است. options.DefaultAuthenticateScheme: تعیین طرح پیش‌فرض برای احراز هویت. options.DefaultChallengeScheme: تعیین طرح پیش‌فرض برای چالش‌های احراز هویت. پیکربندی تنظیمات کوکی: csharp .AddCookie(options => { options.LoginPath = new PathString("/"); options.ExpireTimeSpan = TimeSpan.FromMinutes(5.0); }); AddCookie: این متد پیکربندی احراز هویت با کوکی را به احراز هویت اضافه می‌کند. options.LoginPath: مسیر ورود به سیستم را تعیین می‌کند. در اینجا مسیر ریشه (/) تعیین شده است. options.ExpireTimeSpan: زمان انقضای کوکی‌ها را تعیین می‌کند. در اینجا 5 دقیقه تنظیم شده است. نتیجه‌گیری: این کد احراز هویت با کوکی را در برنامه ASP.NET Core شما پیکربندی می‌کند. با تنظیم گزینه‌های مختلف مانند طرح‌های پیش‌فرض برای ورود، احراز هویت و چالش‌های احراز هویت، و همچنین پیکربندی تنظیمات کوکی مانند مسیر ورود و زمان انقضا، این کد به شما اطمینان می‌دهد که کاربران به درستی احراز هویت می‌شوند و دسترسی به منابع محافظت شده کنترل می‌شود.

مدیریت دسته بندی ها

ادامه کدهای user قسمت سوم هست و این دفعه فقط Controller و Views اضافه شدند و تغیرات در AdminLayout و Layout اعمال شده است که کدها را توضیح می دهیم

بیایید این کدها را که در فایل AdminLayout استفاده شده‌اند توضیح دهیم. این کدها مربوط به رندر کردن بخش‌های اختیاری Scripts و Modals هستند. توضیحات کد: @RenderSection("Scripts", false): این خط کد بخش Scripts را رندر می‌کند. false به این معنی است که این بخش اختیاری است و اگر در صفحه ویو (View) تعریف نشده باشد، هیچ خطایی ایجاد نمی‌شود. این بخش معمولاً برای درج فایل‌های جاوا اسکریپت مورد استفاده قرار می‌گیرد که به صورت خاص برای یک صفحه نیاز هستند. @RenderSection("Modals", false): این خط کد بخش Modals را رندر می‌کند. false به این معنی است که این بخش نیز اختیاری است و اگر در صفحه ویو تعریف نشده باشد، هیچ خطایی ایجاد نمی‌شود. این بخش معمولاً برای درج مودال‌ها (پنجره‌های پاپ آپ) که به صورت خاص برای یک صفحه نیاز هستند استفاده می‌شود. مثال کاربرد: فرض کنید شما یک صفحه ویو دارید که نیاز به برخی فایل‌های جاوا اسکریپت و یک مودال دارد. در این صفحه ویو می‌توانید این بخش‌ها را تعریف کنید: csharp @section Scripts { <script src="~/js/custom-script.js"></script> } @section Modals { <div class="modal" id="myModal"> <!-- Modal content --> </div> } نتیجه‌گیری: استفاده از @RenderSection("Scripts", false) و @RenderSection("Modals", false) به شما این امکان را می‌دهد که بخش‌های اختیاری را به صفحات خود اضافه کنید. این کار باعث می‌شود که صفحات شما انعطاف‌پذیرتر شوند و بتوانید به راحتی فایل‌های جاوا اسکریپت و مودال‌های مورد نیاز هر صفحه را مدیریت کنید.

EndPoint.Site => Areas => Admin => Views => Categories => Index.cshtml بیایید کد صفحه نمایشی دسته‌بندی‌ها را که در فایل ویو Index استفاده شده است بررسی کنیم. توضیحات کد: Imports و مدل: csharp @using Test_Store.Application.Services.Products.Queries.GetCategories @model List<CategoriesDto> @using برای استفاده از فضای نام سرویس‌های مورد نیاز برای دریافت دسته‌بندی‌ها. @model برای تعریف مدل داده‌ای که به ویو ارسال می‌شود. در اینجا یک لیست از CategoriesDto. ViewData و Layout: csharp @{ ViewData["Title"] = "Index"; Layout = "~/Areas/Admin/Views/Shared/_AdminLayout.cshtml"; } ViewData["Title"]: عنوان صفحه را به "Index" تنظیم می‌کند. Layout: از Layout مشخص شده برای این صفحه استفاده می‌کند. ساختار HTML: بخش‌های مختلف صفحه شامل هدر، بدنه، و جدول برای نمایش دسته‌بندی‌ها. بخش اصلی نمایش جدول دسته‌بندی‌ها: html <section id="configuration"> <div class="row"> <div class="col-12"> <div class="card"> <div class="card-header"> <div class="card-title-wrap bar-success"> <h4 class="card-title">لیست دسته بندی ها</h4> </div> </div> <div class="card-body collapse show"> <div class="card-block card-dashboard"> <p class="card-text">دسته بندی محصولات فروشگاه </p> <a href="~/admin/categories/addnewcategory" class="btn btn-success">افزودن دسته بندی جدید</a> <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" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-sort="ascending" aria-label="دسته بندی: activate to sort column descending" style="width: 222px;">دسته بندی</th> <th class="sorting_asc" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-sort="ascending" aria-label="پدر: activate to sort column descending" style="width: 222px;">پدر</th> <th class="sorting_asc" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-sort="ascending" aria-label=": activate to sort column descending" style="width: 222px;"></th> </tr> </thead> <tbody> @foreach (var item in Model) { <tr role="row" class="odd"> <td class="sorting_1">@item.Name</td> <td> @{ string parent = item.Parent != null ? item.Parent.name : "-"; } <text> @parent </text> </td> <td> @if (item.Parent == null) { <a href="~/admin/categories/addnewcategory?ParentId=@item.Id" class="btn btn-success">افزودن فرزند</a> }

@if (item.HasChild == true) { <a href="~/admin/categories/index?ParentId=@item.Id" class="btn btn-info">مشاهده لیست فرزند ها </a> } </td> </tr> } </tbody> </table> </div> </div> </div> </div> </div> </div> </div> </section> جدول نمایش دسته‌بندی‌ها: ستون‌های دسته بندی، پدر و گزینه‌های مدیریت دسته‌بندی‌ها (افزودن فرزند، مشاهده لیست فرزندان). از foreach برای پیمایش مدل (لیست دسته‌بندی‌ها) و نمایش اطلاعات هر دسته‌بندی استفاده شده است. نتیجه‌گیری: این کد به شما امکان می‌دهد تا لیست دسته‌بندی‌های محصولات را به صورت جدولی نمایش دهید. هر ردیف شامل نام دسته‌بندی، پدر (در صورت وجود) و دکمه‌های افزودن فرزند و مشاهده لیست فرزندان است. از foreach برای پیمایش لیست دسته‌بندی‌ها استفاده می‌شود و اطلاعات در جدول به صورت پویا نمایش داده می‌شود.

EndPoint.Site => Areas => Admin => Views => Categories => AddNewCategory.cshtml بیایید کد صفحه‌ی AddNewCategory را که برای اضافه کردن دسته‌بندی جدید به محصولات استفاده می‌شود بررسی کنیم. توضیحات کد: ViewData و Layout: csharp @{ ViewData["Title"] = "AddNewCategory"; Layout = "~/Areas/Admin/Views/Shared/_AdminLayout.cshtml"; } ViewData["Title"]: عنوان صفحه را به "AddNewCategory" تنظیم می‌کند. Layout: از Layout مشخص شده برای این صفحه استفاده می‌کند. ساختار اصلی HTML: استفاده از تگ section برای تعریف بخش اصلی صفحه. در اینجا از کلاس‌های Bootstrap برای تنظیمات واکنش‌گرا استفاده شده است. بخش اصلی فرم اضافه کردن دسته‌بندی: html <section class="basic-elements"> <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"> <input type="hidden" id="parentId" value="@ViewBag.parentId" /> <label for="basicInput">نام دسته بندی</label> <input type="text" class="form-control" id="Name"> </fieldset> </div> <div class="col-xl-12 col-lg-12 col-md-12 mb-1"> <fieldset class="form-group"> <br /> <a onclick="AddNewCategory()" class="btn btn-success col-md-12">اضافه کردن به لیست</a> </fieldset> </div> </div> </div> </div> </div> </div> </div> </div> </div> </section> فرم اصلی شامل یک فیلد ورودی برای نام دسته‌بندی و یک دکمه برای اضافه کردن دسته‌بندی است. از ViewBag.parentId برای تنظیم مقدار parentId استفاده می‌شود. بخش اسکریپت:

csharp @section Scripts { <link href="~/Sweetalert2/sweetalert2.min.css" rel="stylesheet" /> <script src="~/Sweetalert2/sweetalert2.min.js"></script> <script> function AddNewCategory() { swal.fire({ title: 'دسته بندی جدید', text: "آیا میخواهید دسته بندی جدید به لیست دسته بندی ها اضافه شود؟", icon: 'info', showCancelButton: true, confirmButtonColor: '#3085d6', cancelButtonColor: '#d33', confirmButtonText: 'بله، اضافه شود', cancelButtonText: 'خیر' }).then((result) => { if (result.value) { var Name = $("#Name").val(); var parentId = $("#parentId").val(); var postData = { 'Name': Name, 'parentId': parentId, }; $.ajax({ contentType: 'application/x-www-form-urlencoded', dataType: 'json', type: "POST", url: "AddNewCategory", data: postData, success: function (data) { if (data.isSuccess == true) { swal.fire( 'موفق!', data.message, 'success' ).then(function (isConfirm) { location.reload(); }); } else { swal.fire( 'هشدار!', data.message, 'warning' ); } }, error: function (request, status, error) { swal.fire( 'هشدار!', request.responseText, 'warning' ); } }); } }) } </script> } استفاده از SweetAlert2 برای نمایش پیام‌های تایید و هشدار. تابع AddNewCategory برای ارسال درخواست AJAX به سرور و اضافه کردن دسته‌بندی جدید. بررسی صحت ورود اطلاعات و نمایش پیام‌های مناسب بر اساس پاسخ سرور. نتیجه‌گیری: این کد به شما امکان می‌دهد تا یک صفحه‌ی کاربرپسند برای اضافه کردن دسته‌بندی جدید به محصولات خود ایجاد کنید. از SweetAlert2 برای نمایش پیام‌های تایید و هشدار استفاده می‌شود و درخواست‌های AJAX برای ارسال داده‌ها به سرور استفاده می‌شوند.