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

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

اکشن پیش‌فرض (Default Action) به اکشنی گفته می‌شود که وقتی هیچ اکشنی در URL مشخص نشده باشد، فراخوانی می‌شود. در Asp.Net Core MVC، شما می‌توانید اکشن پیش‌فرض را با استفاده از تنظیمات Routing پیکربندی کنید.

برای مثال، در تنظیمات Routing پیش‌فرض که در Program.cs قرار می‌گیرد:
var builder = WebApplication.CreateBuilder(args);

// سایر تنظیمات و سرویس‌ها

var app = builder.Build();

app.UseRouting();

app.UseEndpoints(endpoints =>
{
    endpoints.MapControllerRoute(
        name: "default",
        pattern: "{controller=Home}/{action=Index}/{id?}");
});

app.Run();
در اینجا، اگر هیچ کنترلی و اکشنی در URL مشخص نشده باشد، به طور پیش‌فرض کنترلر Home و اکشن Index فراخوانی خواهند شد.

یعنی اگر کاربر به / مراجعه کند، به طور خودکار به /Home/Index هدایت خواهد شد.

1 مشاهده12:49

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

تغییر URLها می‌تواند دلایل مختلفی داشته باشد:

 (بهینه‌سازی برای موتورهای جستجو)SEO :
  ‎‏‍⁩   ⁦URLهای
 تمیز و قابل خواندن برای انسان‌ها و موتورهای جستجو بهتر هستند و می‌توانند رتبه سایت شما را در نتایج جستجو بهبود دهند.

امنیت: بعضی اوقات، تغییر URLها می‌تواند به افزایش امنیت کمک کند. مثلاً می‌توانید URLهایی که شامل پارامترهای حساس هستند را پنهان کنید.

خوانایی و دسترسی‌پذیری: URLهایی که توصیفی هستند، برای کاربران و توسعه‌دهندگان قابل فهم‌تر و دسترسی‌پذیرتر هستند.

مدیریت مسیرها: زمانی که مسیرهای جدیدی به برنامه اضافه می‌کنید یا معماری برنامه تغییر می‌کند، نیاز به تغییر URLها به وجود می‌آید.

جلوگیری از تکرار: برای جلوگیری از تکرار URLهای مشابه و اطمینان از اینکه هر مسیر یکتا است.

این تغییرات می‌توانند تجربه کاربری بهتری ارائه دهند و برنامه را مدیریت‌پذیرتر کنند.

1 مشاهده12:55

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

بیایید یک صفحه تماس با ما را با استفاده از Asp.Net Core MVC پیاده‌سازی کنیم.

1. مدل (ContactModel.cs)
ابتدا یک مدل برای دریافت اطلاعات تماس ایجاد می‌کنیم:

public class ContactModel
{
    [Required]
    public string Name { get; set; }

    [Required, EmailAddress]
    public string Email { get; set; }

    [Required]
    public string Message { get; set; }
}
2. کنترلر (ContactController.cs)
سپس یک کنترلر برای مدیریت درخواست‌های مربوط به تماس ایجاد می‌کنیم:

public class ContactController : Controller
{
    [HttpGet]
    public IActionResult Index()
    {
        return View();
    }

    [HttpPost]
    public IActionResult Index(ContactModel model)
    {
        if (ModelState.IsValid)
        {
            // منطق برای ارسال پیام یا ذخیره آن
            TempData["Message"] = "پیام شما با موفقیت ارسال شد!";
            return RedirectToAction("Index");
        }
        return View(model);
    }
}
3. ویو (Index.cshtml)
یک ویو برای نمایش فرم تماس با ما ایجاد می‌کنیم:

@model YourNamespace.Models.ContactModel

<h1>تماس با ما</h1>

@if (TempData["Message"] != null)
{
    <div class="alert alert-success">
        @TempData["Message"]
    </div>
}

<form asp-action="Index" method="post">
    <div>
        <label asp-for="Name"></label>
        <input asp-for="Name" />
        <span asp-validation-for="Name"></span>
    </div>
    <div>
        <label asp-for="Email"></label>
        <input asp-for="Email" />
        <span asp-validation-for="Email"></span>
    </div>
    <div>
        <label asp-for="Message"></label>
        <textarea asp-for="Message"></textarea>
        <span asp-validation-for="Message"></span>
    </div>
    <button type="submit">ارسال</button>
</form>

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}
4. افزودن اسکریپت‌های اعتبارسنجی
در نهایت، اطمینان حاصل کنید که فایل _ValidationScriptsPartial.cshtml شامل اسکریپت‌های اعتبارسنجی است:

<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/dist/jquery.validate.unobtrusive.min.js"></script>
به این ترتیب، یک فرم تماس با ما با اعتبارسنجی سمت کلاینت ایجاد کرده‌ایم که پیام‌های کاربر را دریافت و پردازش می‌کند. 

5. برای پیکربندی URL در فایل Program.cs می‌توانید از تنظیمات MapControllerRoute استفاده کنید. این تنظیمات به شما اجازه می‌دهد تا مسیرها و کنترلرهای خود را تعریف کنید.

مثال پیکربندی URL در Program.cs:

var builder = WebApplication.CreateBuilder(args);

// سایر تنظیمات و سرویس‌ها

var app = builder.Build();

app.UseRouting();

app.UseEndpoints(endpoints =>
{
    endpoints.MapControllerRoute(
        name: "default",
        pattern: "{controller=Home}/{action=Index}/{id?}");
    
    // اضافه کردن مسیر تماس با ما
    endpoints.MapControllerRoute(
        name: "contact",
        pattern: "contact-us",
        defaults: new { controller = "Contact", action = "Index" });
});

app.Run();
توضیحات:
MapControllerRoute:
 برای تعریف مسیرها استفاده می‌شود.

name:
 نام مسیر که برای تشخیص آن استفاده می‌شود.

pattern:
 الگوی URL که درخواست‌ها را به کنترلر و اکشن مشخص می‌کند.

defaults:
 مشخص می‌کند که به صورت پیش‌فرض کدام کنترلر و اکشن باید فراخوانی شوند.

در این مثال، یک مسیر جدید به نام contact تعریف شده که زمانی که کاربر به contact-us مراجعه می‌کند، اکشن Index در کنترلر Contact فراخوانی می‌شود.

این کار کمک می‌کند تا URLهای کاربردی و خوانایی داشته باشید که تجربه کاربری بهتری را فراهم می‌کند.

1 مشاهده13:08

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

ترتیب قرارگیری مسیرها (Routes) در Asp.Net Core MVC بسیار مهم است زیرا فریمورک مسیرها را به ترتیب تعریف‌شده ارزیابی می‌کند و اولین مسیری که با الگوی درخواست مطابقت داشته باشد را انتخاب می‌کند. این یعنی مسیرهای خاص باید قبل از مسیرهای عمومی‌تر تعریف شوند.

مثال:
در فایل Program.cs:
var builder = WebApplication.CreateBuilder(args);

// سایر تنظیمات و سرویس‌ها

var app = builder.Build();

app.UseRouting();

app.UseEndpoints(endpoints =>
{
    // مسیر خاص باید قبل از مسیر عمومی تعریف شود
    endpoints.MapControllerRoute(
        name: "contact",
        pattern: "contact-us",
        defaults: new { controller = "Contact", action = "Index" });
    
    endpoints.MapControllerRoute(
        name: "default",
        pattern: "{controller=Home}/{action=Index}/{id?}");
});

app.Run();
توضیحات:
مسیر خاص: مسیر contact-us ابتدا تعریف شده، بنابراین هر درخواستی که به contact-us مراجعه کند، به اکشن Index در کنترلر Contact هدایت می‌شود.

مسیر عمومی: مسیر پیش‌فرض {controller=Home}/{action=Index}/{id?} بعد از مسیر خاص قرار داده شده تا درخواستی که به هیچ‌کدام از مسیرهای خاص مطابقت ندارد، به این مسیر هدایت شود.

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

1 مشاهده13:19

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

علامت سوال ? در مسیرها به معنای اختیاری بودن پارامتر است. یعنی اگر پارامتری مانند id در URL ذکر نشده باشد، اکشن همچنان اجرا می‌شود. این به شما امکان می‌دهد مسیرهای منعطف‌تری داشته باشید.
و اگر علامت سوال را بردارید id اجباری می شود 
مثال:

endpoints.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");
در این مثال، id? نشان می‌دهد که پارامتر id اختیاری است. بنابراین، هر دو URL زیر معتبر هستند و به اکشن Index در کنترلر Home هدایت می‌شوند:

/Home/Index

/Home/Index/123

این ویژگی مفیده برای زمان‌هایی که پارامترها همیشه نیاز نیستند و می‌خواهید مسیرها تمیز و ساده باشند.

1 مشاهده13:27

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

1 مشاهده13:33

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

برای مثالی که شامل پارامتر id باشد و خروجی این پارامتر را نمایش دهد، ابتدا یک کنترلر و یک ویو ایجاد می‌کنیم.

کنترلر (ProductsController.cs):
public class ProductsController : Controller
{
    public IActionResult Details(int? id)
    {
        if (id == null)
        {
            return NotFound("ID محصول ارائه نشده است.");
        }

        // منطق برای دریافت محصول با استفاده از ID
        var product = new Product 
        {
            Id = id.Value,
            Name = "Product Name",
            Price = 100
        };

        return View(product);
    }
}
ویو (Details.cshtml):
@model YourNamespace.Models.Product

<h1>جزییات محصول</h1>

@if (Model != null)
{
    <div>
        <p>شناسه: @Model.Id</p>
        <p>نام: @Model.Name</p>
        <p>قیمت: @Model.Price</p>
    </div>
}
else
{
    <p>محصول یافت نشد.</p>
}
تنظیمات در Program.cs:
var builder = WebApplication.CreateBuilder(args);

var app = builder.Build();

app.UseRouting();

app.UseEndpoints(endpoints =>
{
    endpoints.MapControllerRoute(
        name: "default",
        pattern: "{controller=Home}/{action=Index}/{id?}");
});

app.Run();
توضیحات:
در کنترلر، اکشن Details شناسه id را به عنوان پارامتر دریافت می‌کند. اگر id ارائه نشده باشد، یک پیام خطا نمایش داده می‌شود.

در ویو، مدل Product نمایش داده می‌شود که شامل شناسه، نام و قیمت محصول است.

در Program.cs، مسیر پیش‌فرض شامل پارامتر id? است که اختیاری بودن id را نشان می‌دهد.

با این مثال، اگر به URL /Products/Details/1 مراجعه کنید، جزئیات محصول با id = 1 نمایش داده می‌شود. اگر id ارائه نشده باشد، پیام خطای مناسب نمایش داده خواهد شد.

1 مشاهده13:42

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

در ASP.NET Core MVC، اعتبارسنجی (Validation) فرآیندی است که در آن داده‌های ورودی بررسی می‌شوند تا اطمینان حاصل شود که مطابق با قوانین و محدودیت‌های خاصی هستند. اعتبارسنجی می‌تواند به صورت سمت سرور و سمت کلاینت انجام شود. اعتبارسنجی سمت کلاینت می‌تواند با استفاده از JavaScript و کتابخانه‌های مرتبط انجام شود، در حالی که اعتبارسنجی سمت سرور با استفاده از Data Annotations و منطق کد در کنترلرها انجام می‌شود.

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

مثال:
مدلی با اعتبارسنجی:
public class ContactModel
{
    [Required(ErrorMessage = "لطفا نام خود را وارد کنید")]
    [StringLength(100, ErrorMessage = "نام نباید بیش از 100 کاراکتر باشد")]
    public string Name { get; set; }

    [Required(ErrorMessage = "لطفا ایمیل خود را وارد کنید")]
    [EmailAddress(ErrorMessage = "لطفا یک ایمیل معتبر وارد کنید")]
    public string Email { get; set; }

    [Required(ErrorMessage = "لطفا پیام خود را وارد کنید")]
    public string Message { get; set; }
}
اعمال اعتبارسنجی در ویو:
در ویو می‌توان از Tag Helpers و HTML Helpers برای نمایش پیام‌های خطای اعتبارسنجی استفاده کرد.

ویو (Index.cshtml):
@model YourNamespace.Models.ContactModel

<h1>فرم تماس با ما</h1>

<form asp-action="Index" method="post">
    <div>
        <label asp-for="Name"></label>
        <input asp-for="Name" />
        <span asp-validation-for="Name"></span>
    </div>
    <div>
        <label asp-for="Email"></label>
        <input asp-for="Email" />
        <span asp-validation-for="Email"></span>
    </div>
    <div>
        <label asp-for="Message"></label>
        <textarea asp-for="Message"></textarea>
        <span asp-validation-for="Message"></span>
    </div>
    <button type="submit">ارسال</button>
</form>

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}
اکشن کنترلر:
در کنترلر، می‌توان مدل را دریافت و بررسی کرد که آیا داده‌ها معتبر هستند یا خیر:
public class ContactController : Controller
{
    [HttpPost]
    public IActionResult Index(ContactModel model)
    {
        if (ModelState.IsValid)
        {
            // منطق پردازش پیام
            TempData["Message"] = "پیام شما با موفقیت ارسال شد!";
            return RedirectToAction("Index");
        }
        return View(model);
    }
}
افزودن اسکریپت‌های اعتبارسنجی:
در نهایت، اطمینان حاصل کنید که فایل _ValidationScriptsPartial.cshtml شامل اسکریپت‌های اعتبارسنجی است:
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/dist/jquery.validate.unobtrusive.min.js"></script>
این فرآیندها کمک می‌کنند تا از ورود داده‌های نادرست جلوگیری شود و تجربه کاربری بهتری فراهم شود.

1 مشاهده06:41

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

asp-validation-for
 یک Tag Helper در ASP.NET Core است که برای نمایش پیام‌های خطای اعتبارسنجی در کنار کنترل‌های ورودی فرم استفاده می‌شود. این Tag Helper به شما امکان می‌دهد که به راحتی پیام‌های خطای مرتبط با یک فیلد خاص را نشان دهید.

مثال استفاده از asp-validation-for:
<form asp-action="SubmitForm" method="post">
    <div>
        <label asp-for="Name"></label>
        <input asp-for="Name" />
        <span asp-validation-for="Name"></span>
    </div>
    <div>
        <label asp-for="Email"></label>
        <input asp-for="Email" />
        <span asp-validation-for="Email"></span>
    </div>
    <button type="submit">ارسال</button>
</form>
تنظیم رنگ پیام‌های خطا به رنگ قرمز:
برای تنظیم رنگ پیام‌های خطای اعتبارسنجی به رنگ قرمز، می‌توانید CSS سفارشی اضافه کنید. به عنوان مثال:

ایجاد یا اصلاح فایل CSS (مثل site.css):
.field-validation-error {
    color: red;
}
اطمینان از بارگذاری CSS در ویو یا Layout:
<!DOCTYPE html>
<html>
<head>
    <title>@ViewData["Title"] - My Web Application</title>
    <link rel="stylesheet" type="text/css" href="~/css/site.css" />
</head>
<body>
    <header>
        <nav>
            <!-- نوار ناوبری -->
        </nav>
    </header>
    <main>
        @RenderBody()
    </main>
    <footer>
        <!-- فوتر -->
    </footer>
    @RenderSection("Scripts", required: false)
</body>
</html>
نتیجه:
با این کار، پیام‌های خطای اعتبارسنجی که توسط asp-validation-for تولید می‌شوند، به رنگ قرمز نمایش داده خواهند شد و تجربه کاربری بهتری را فراهم می‌کنند.

1 مشاهده06:52

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

پارشیال (Partial View) در ASP.NET Core MVC یک ویو جزئی است که می‌تواند برای ساختاردهی و مدیریت بهتر کدها و اجزای قابل تکرار ویوها استفاده شود. با استفاده از پارشیال‌ها، می‌توانید قطعات مشترکی از کد را در ویوهای مختلف استفاده کنید، بدون اینکه نیاز به تکرار آنها باشد. این روش به نوشتن کدهای تمیزتر و قابل نگهداری‌تر کمک می‌کند.

مثال کاربرد پارشیال ویو:
فرض کنید یک منوی ناوبری دارید که در تمام صفحات وب‌سایت تکرار می‌شود. می‌توانید آن را به صورت یک پارشیال ویو تعریف کنید.

1. ایجاد پارشیال ویو (_Navigation.cshtml):
<ul>
    <li><a href="/home">خانه</a></li>
    <li><a href="/about">درباره ما</a></li>
    <li><a href="/contact">تماس با ما</a></li>
</ul>
2. استفاده از پارشیال ویو در فایل Layout (_Layout.cshtml):
<!DOCTYPE html>
<html>
<head>
    <title>@ViewData["Title"] - My Web Application</title>
    <link rel="stylesheet" type="text/css" href="~/css/site.css" />
</head>
<body>
    <header>
        @Html.Partial("_Navigation")
    </header>
    <main>
        @RenderBody()
    </main>
    <footer>
        <!-- فوتر -->
    </footer>
    @RenderSection("Scripts", required: false)
</body>
</html>
3. استفاده از پارشیال ویو در یک ویو دیگر:
توضیحات:
پارشیال ویو (_Navigation.cshtml): شامل کد HTML برای منوی ناوبری است.

فایل Layout (_Layout.cshtml): از پارشیال ویو برای نمایش منوی ناوبری استفاده می‌کند.

ویو دیگر: نیز می‌تواند از همان پارشیال ویو استفاده کند تا منوی ناوبری را نمایش دهد.

استفاده از پارشیال ویوها باعث می‌شود که تکرار کدها کاهش یابد و مدیریت و نگهداری کدها ساده‌تر

1 مشاهده06:59

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

از پارشیال ویوها در سکشن‌ها نیز استفاده کنید. این کار به شما امکان می‌دهد تا محتوای تکراری را به صورت بهینه مدیریت کنید و همچنین کدهای تمیزتر و سازمان‌یافته‌تری داشته باشید.

مثال:
فرض کنید می‌خواهید یک سکشن به نام Footer داشته باشید که شامل محتوای فوتر است و این محتوا در یک پارشیال ویو جداگانه قرار دارد.

ایجاد پارشیال ویو (_Footer.cshtml):
<footer>
    <p>© 2024 - My Web Application</p>
</footer>
استفاده از پارشیال ویو در سکشن (_Layout.cshtml):
<!DOCTYPE html>
<html>
<head>
    <title>@ViewData["Title"] - My Web Application</title>
    <link rel="stylesheet" type="text/css" href="~/css/site.css" />
</head>
<body>
    <header>
        <nav>
            <!-- نوار ناوبری -->
        </nav>
    </header>
    <main>
        @RenderBody()
    </main>
    <footer>
        @RenderSection("Footer", required: false)
    </footer>
    @RenderSection("Scripts", required: false)
</body>
</html>
استفاده از سکشن در ویو (Index.cshtml):
@model YourNamespace.Models.SomeModel

<h1>Welcome to My Web Application</h1>
<p>This is the content of the home page.</p>

@section Footer {
    @Html.Partial("_Footer")
}

@section Scripts {
    <script src="~/js/customScript.js"></script>
}
توضیحات:
پارشیال ویو (_Footer.cshtml): شامل محتوای فوتر است.

فایل Layout (_Layout.cshtml): سکشن Footer را تعریف کرده که شامل پارشیال ویو می‌شود.

ویو (Index.cshtml): سکشن Footer را تعریف کرده و پارشیال ویو _Footer را در آن رندر می‌کند.

این کار به شما امکان می‌دهد تا محتوای تکراری مانند فوتر را به صورت مرکزی مدیریت کنید و در همه

1 مشاهده07:04

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

می‌توانید از @RenderPartial برای رندر کردن یک پارشیال ویو داخل یک سکشن استفاده کنید. معمولاً از await برای رندر کردن پارشیال ویوها به شکل غیرهمزمان استفاده می‌شود. با استفاده از await می‌توانید به صورت بهتری از منابع سرور استفاده کنید.

مثال:
برای قرار دادن پارشیال ویوی _ValidationScriptsPartial در سکشن Scripts، به صورت زیر عمل کنید:
@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}
توضیحات:
await Html.RenderPartialAsync("_ValidationScriptsPartial"):
 این متد به صورت غیرهمزمان پارشیال ویو _ValidationScriptsPartial را رندر می‌کند. استفاده از await برای رندر کردن پارشیال ویوها توصیه می‌شود زیرا به بهره‌وری بهتر از منابع سرور کمک می‌کند.

به این ترتیب، اسکریپت‌های اعتبارسنجی به درستی در سکشن Scripts بارگذاری می‌شوند و می‌توانند در فرم‌های شما استفاده شوند.

1 مشاهده07:11

مطالب بعدی

پرسش‌ها

قوانین

داغ‌ترین‌ها

چندسکویی