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

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

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 Login() {
        var Email = $("#Email").val();
        var Password = $("#Password").val();
        var postData = {
            'Email': Email,
            'Password': Password,
        };
        $.ajax({
            contentType: 'application/x-www-form-urlencoded',
            dataType: 'json',
            type: "POST",
            url: "Signin",
            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 برای بهبود عملکرد و ظاهر صفحه.

تابع Login که با استفاده از AJAX درخواست ورود را به سرور ارسال می‌کند و بر اساس پاسخ سرور، پیام‌های مناسب را نمایش می‌دهد.

نتیجه‌گیری:
این صفحه ورود به کاربران اجازه می‌دهد تا اطلاعات ورود خود را وارد کنند و عملیات ورود را انجام دهند. همچنین در صورت موفقیت یا خطا در ورود، پیام‌های مناسبی نمایش داده می‌شود. استفاده از AJAX برای ارسال درخواست ورود به سرور و مدیریت پاسخ‌ها باعث بهبود تجربه کاربری می‌شود.

1 مشاهده17:57

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

EndPoint.Site =>  Views => Authentication => Signup.cshtml
بیایید کد صفحه ثبت‌نام (Signup) را بررسی کنیم. این کد به منظور نمایش فرم ثبت‌نام کاربران و مدیریت عملیات ثبت‌نام استفاده می‌شود.

توضیحات کد:
ViewData و Layout:

csharp
@{
    ViewData["Title"] = "ثبت نام";
    Layout = null;
}
ViewData["Title"]:
 عنوان صفحه را به "ثبت نام" تنظیم می‌کند.

Layout = null:
 استفاده از layout پیش‌فرض را غیرفعال می‌کند و صفحه را به عنوان یک صفحه مستقل نمایش می‌دهد.

HTML ساختار اصلی:

html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>پنل مدیریت | صفحه ثبت نام</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="~/sweetalert2/sweetalert2.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
    <link rel="stylesheet" href="~/AdminTemplate/dist/css/adminlte.min.css">
    <link rel="stylesheet" href="~/AdminTemplate/plugins/iCheck/square/blue.css">
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
    <link rel="stylesheet" href="~/AdminTemplate/dist/css/bootstrap-rtl.min.css">
    <link rel="stylesheet" href="~/AdminTemplate/dist/css/custom-style.css">
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
</head>
تنظیم متا تگ‌ها برای اطمینان از واکنش‌گرایی (responsive) صفحه.

لینک به فایل‌های CSS مختلف از جمله Font Awesome, Ionicons, AdminLTE, bootstrap-rtl، و SweetAlert2.

1 مشاهده18:02

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

بدنه صفحه:

html
<body class="hold-transition register-page">
    <div class="register-box">
        <div class="register-logo">
            <b>ثبت نام در سایت</b>
        </div>
        <div class="card">
            <div class="card-body register-card-body">
                <p class="login-box-msg">ثبت نام کاربر جدید</p>
                <form method="post">
                    <div class="input-group mb-3">
                        <input type="text" class="form-control" id="FullName" placeholder="نام و نام خانوادگی">
                        <div class="input-group-append">
                            <span class="fa fa-user input-group-text"></span>
                        </div>
                    </div>
                    <div class="input-group mb-3">
                        <input type="email" class="form-control" id="Email" placeholder="ایمیل">
                        <div class="input-group-append">
                            <span class="fa fa-envelope input-group-text"></span>
                        </div>
                    </div>
                    <div class="input-group mb-3">
                        <input type="password" class="form-control" placeholder="رمز عبور" id="Password">
                        <div class="input-group-append">
                            <span class="fa fa-lock input-group-text"></span>
                        </div>
                    </div>
                    <div class="input-group mb-3">
                        <input type="password" class="form-control" placeholder="تکرار رمز عبور" id="RePassword">
                        <div class="input-group-append">
                            <span class="fa fa-lock input-group-text"></span>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-8">
                            <div class="checkbox icheck">
                                <label>
                                    <input type="checkbox" value="1" name="login" id="remember"> با <a href="#">شرایط</a> موافق هستم
                                </label>
                            </div>
                        </div>
                        <div class="col-4">
                            <button onclick="Registeruser()" type="button" class="btn btn-primary btn-block btn-flat">ثبت نام</button>
                        </div>
                    </div>
                </form>
<a href="~/authentication/signin" class="text-center">من قبلا ثبت نام کرده ام</a>
            </div>
        </div>
    </div>
فرم ثبت‌نام با فیلدهای نام کامل، ایمیل، رمز عبور، و تکرار رمز عبور.

گزینه "با شرایط موافق هستم".

دکمه ثبت‌نام که با کلیک بر روی آن، تابع Registeruser فراخوانی می‌شود.

لینک به صفحه ورود برای کاربران که قبلاً ثبت‌نام کرده‌اند.

1 مشاهده18:02

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

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 برای ارسال درخواست ثبت‌نام به سرور و مدیریت پاسخ‌ها باعث بهبود تجربه کاربری می‌شود.

1 مشاهده18:04

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

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

1 مشاهده18:13

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

بیایید کد 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 و خطاها تنظیم شده‌اند.

1 مشاهده18:33

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

کد 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();
نتیجه‌گیری:
این خط کد به برنامه شما کمک می‌کند تا کاربران را احراز هویت کند و اطمینان حاصل شود که تنها کاربران احراز هویت شده به منابع محافظت شده دسترسی دارند.

1 مشاهده18:41

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

بیایید این بخش از کد را که مربوط به پیکربندی سرویس‌های احراز هویت در 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 شما پیکربندی می‌کند. با تنظیم گزینه‌های مختلف مانند طرح‌های پیش‌فرض برای ورود، احراز هویت و چالش‌های احراز هویت، و همچنین پیکربندی تنظیمات کوکی مانند مسیر ورود و زمان انقضا، این کد به شما اطمینان می‌دهد که کاربران به درستی احراز هویت می‌شوند و دسترسی به منابع محافظت شده کنترل می‌شود.

1 مشاهده18:43

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

Test_Store 7.zip

حجم: 45.7M

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

1 مشاهده11:38

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

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

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

1 مشاهده11:49

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

بیایید این کدها را که در فایل 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) به شما این امکان را می‌دهد که بخش‌های اختیاری را به صفحات خود اضافه کنید. این کار باعث می‌شود که صفحات شما انعطاف‌پذیرتر شوند و بتوانید به راحتی فایل‌های جاوا اسکریپت و مودال‌های مورد نیاز هر صفحه را مدیریت کنید.

1 مشاهده11:51

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

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>
                                                    }

1 مشاهده11:57

مطالب بعدی

پرسش‌ها

قوانین

داغ‌ترین‌ها

چندسکویی