برای لینک دادن CSS در یک فایل Layout، باید از تگ <link> داخل تگ <head> استفاده کنید. این تضمین می‌کند که استایل‌هایتان در تمامی صفحات اعمال می‌شوند.
مثال:
فایل Layout (_Layout.cshtml):
<!DOCTYPE html>
<html>
<head>
<title>@ViewData["Title"] - My Web Application</title>
<link rel="stylesheet" type="text/css" href="~/css/site.css" />
@RenderSection("Styles", required: false)
</head>
<body>
<header>
<nav>
<!-- نوار ناوبری -->
</nav>
</header>
<main>
@RenderBody()
</main>
<footer>
<!-- فوتر -->
</footer>
@RenderSection("Scripts", required: false)
</body>
</html>
ویو با استایل‌های اضافی (Index.cshtml):
@{
ViewData["Title"] = "Home Page";
}
@section Styles {
<link rel="stylesheet" type="text/css" href="~/css/custom.css" />
}
<h1>Welcome to the Home Page!</h1>
<p>This is the content of the home page.</p>
@section Scripts {
<script src="~/js/customScript.js"></script>
}
در این مثال:
فایل اصلی CSS (site.css) در فایل Layout قرار داده شده است.
بخش Styles در فایل Layout ایجاد شده است تا بتوانید استایل‌های اضافی برای ویوهای خاص را اضافه کنید.
در ویو Index.cshtml، بخش Styles برای اضافه کردن استایل‌های خاص این ویو تعریف شده است.
این روش به شما کمک می‌کند تا استایل‌های عمومی و خاص هر صفحه را به راحتی مدیریت کنید.
@RenderSection()
کاربردهای متنوعی دارد که به شما امکان می‌دهد بخش‌های مختلفی را به صفحات خود اضافه کنید. این کاربردها شامل موارد زیر می‌شود:
اسکریپت‌های جاوااسکریپت: همان‌طور که قبلاً اشاره کردیم، می‌توانید از @RenderSection برای قرار دادن اسکریپت‌های جاوااسکریپت خاص هر ویو استفاده کنید.
استایل‌های CSS: می‌توانید استایل‌های CSS خاص هر ویو را نیز از طریق @RenderSection اضافه کنید.
محتوای پویا: می‌توانید بخش‌های پویا ایجاد کنید که فقط در برخی از صفحات نمایش داده شوند. مثلاً یک بخش تبلیغات یا پیام خاص.
منوهای ناوبری خاص: اگر می‌خواهید منوهای ناوبری خاصی برای برخی صفحات داشته باشید، می‌توانید از @RenderSection استفاده کنید.
مثال:
فایل Layout (_Layout.cshtml):
<!DOCTYPE html>
<html>
<head>
<title>@ViewData["Title"] - My Web Application</title>
<link rel="stylesheet" type="text/css" href="~/css/site.css" />
@RenderSection("Styles", required: false)
</head>
<body>
<header>
<nav>
@RenderSection("Navigation", required: false)
</nav>
</header>
<main>
@RenderBody()
</main>
<footer>
@RenderSection("Footer", required: false)
</footer>
@RenderSection("Scripts", required: false)
</body>
</html>
ویو با استفاده از بخش‌های مختلف (Index.cshtml):
@{
ViewData["Title"] = "Home Page";
}
@section Styles {
<link rel="stylesheet" type="text/css" href="~/css/custom.css" />
}
@section Navigation {
<ul>
<li><a href="/home">Home</a></li>
<li><a href="/about">About</a></li>
</ul>
}
<h1>Welcome to the Home Page!</h1>
<p>This is the content of the home page.</p>
@section Footer {
<p>Custom footer content for the home page.</p>
}
@section Scripts {
<script src="~/js/customScript.js"></script>
}
با این کار، می‌توانید بخش‌های خاص و متنوعی را در هر ویو داشته باشید که به فایل Layout اضافه می‌شوند. این به شما کمک می‌کند تا کنترل بیشتری بر روی محتوای هر صفحه داشته باشید و از تکرار کد جلوگیری کنید.
کلمه Validation
به معنای اعتبارسنجی داده‌هاست که کمک می‌کند تا ورودی‌های کاربر قبل از پردازش یا ذخیره در پایگاه داده چک شوند. در Asp.Net Core MVC، می‌توانید از Data Annotations برای اعتبارسنجی مدل‌ها استفاده کنید. مثلاً:
public class User
{
[Required]
public string Name { get; set; }
[Range(18, 99)]
public int Age { get; set; }
}
Error Handling
مدیریت خطاها بخشی مهم از یک برنامه وب است. در Asp.Net Core MVC، می‌توانید از Middleware برای مدیریت خطاها استفاده کنید. یک روش معمول استفاده از صفحه خطای سفارشی است. مثلاً:
public void Configure(IApplicationBuilder app)
{
app.UseExceptionHandler("/Home/Error");
app.UseHsts();
}
ViewImports
فایل _ViewImports.cshtml شامل دستورات و importهای مورد نیاز در همه ویوهای پروژه است. می‌توانید فضای نام‌ها و Tag Helpers را در این فایل وارد کنید تا در تمام ویوها دسترسی داشته باشید. مثلاً:
@using MyApp.Models
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
ViewStart
فایل _ViewStart.cshtml حاوی کدی است که باید قبل از هر ویوی دیگر اجرا شود. معمولاً برای تنظیم Layout استفاده می‌شود. مثلاً:
@{
Layout = "_Layout";
}
چرا برخی از فایل‌ها یک خط قبل از نام دارند؟
فایل‌هایی که با _ (Underscore) شروع می‌شوند، نشان‌دهنده فایل‌های خاصی هستند که معمولاً به صورت مستقیم فراخوانی نمی‌شوند بلکه در فرآیند اجرای دیگر فایل‌ها دخیل هستند. مانند _Layout.cshtml، _ViewStart.cshtml و _ViewImports.cshtml که نقش زیرساختی در نمایش ویوها دارند.
پروژه ASP.Net Core MVC (وب و سی شارپ)
کلمه Validation به معنای اعتبارسنجی داده‌هاست که کمک می‌کند تا ورودی‌های کاربر قبل از پردازش یا ذخی
_ValidationScriptsPartial
یک فایل جزئی (Partial View) در Asp.Net Core MVC است که شامل اسکریپت‌های مورد نیاز برای اعتبارسنجی سمت کلاینت با استفاده از jQuery و jQuery Validation است. این فایل به شما کمک می‌کند تا از اعتبارسنجی سمت کلاینت در فرم‌ها استفاده کنید بدون نیاز به اضافه کردن دستی اسکریپت‌ها در هر ویو.
محتویات نمونه _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>
استفاده از _ValidationScriptsPartial:
برای استفاده از این فایل جزئی، آن را در ویوی خود قرار دهید. مثلاً در یک فرم ثبت‌نام:
@model MyApp.Models.RegisterViewModel
<form asp-action="Register">
<div>
<label asp-for="Username"></label>
<input asp-for="Username" />
<span asp-validation-for="Username"></span>
</div>
<div>
<label asp-for="Password"></label>
<input asp-for="Password" type="password" />
<span asp-validation-for="Password"></span>
</div>
<button type="submit">ثبت نام</button>
</form>
@section Scripts {
@{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}
توضیحات:
asp-validation-for: برای نمایش پیام‌های خطای اعتبارسنجی.
@{await Html.RenderPartialAsync("_ValidationScriptsPartial");}:
این خط کد فایل جزئی _ValidationScriptsPartial را در بخش اسکریپت‌ها رندر می‌کند و اسکریپت‌های اعتبارسنجی را به ویو اضافه می‌کند.
این روش به شما کمک می‌کند تا اطمینان حاصل کنید اسکریپت‌های اعتبارسنجی در هر فرم که نیاز به اعتبارسنجی سمت کلاینت دارد، به‌صورت درست و استاندارد اضافه شود.
پروژه ASP.Net Core MVC (وب و سی شارپ)
کلمه Validation به معنای اعتبارسنجی داده‌هاست که کمک می‌کند تا ورودی‌های کاربر قبل از پردازش یا ذخی
در Asp.Net Core MVC، می‌توانید برای نمایش خطاهای سفارشی یک ویو خاص ایجاد کنید. این ویو می‌تواند برای نمایش پیام‌های خطا و اطلاعات مفید به کاربر استفاده شود. معمولاً، یک ویو خطا به نام Error.cshtml ایجاد می‌شود و در پوشه Views/Shared قرار می‌گیرد.
مثال:
ایجاد فایل Error.cshtml در مسیر Views/Shared:
@model Microsoft.AspNetCore.Mvc.RazorPages.PageModel
<!DOCTYPE html>
<html>
<head>
<title>خطا رخ داده است</title>
</head>
<body>
<h1>متاسفیم، یک خطا رخ داده است.</h1>
<p>لطفاً مجدداً تلاش کنید یا با پشتیبانی تماس بگیرید.</p>
</body>
</html>
پیکربندی Middleware برای استفاده از این ویو: در فایل Startup.cs، در متد Configure، خطای عمومی را به این ویو هدایت کنید:
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
else
{
app.UseExceptionHandler("/Home/Error");
app.UseHsts();
}
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();
app.UseAuthorization();
app.UseEndpoints(endpoints =>
{
endpoints.MapControllerRoute(
name: "default",
pattern: "{controller=Home}/{action=Index}/{id?}");
});
}
افزودن اکشن Error به کنترلر Home:
public class HomeController : Controller
{
public IActionResult Error()
{
return View();
}
}
با این کار، هنگامی که یک خطا در برنامه رخ دهد، کاربر به ویوی Error.cshtml هدایت می‌شود و پیام‌های خطا نمایش داده می‌شود.
این کار اطمینان می‌دهد که کاربران با یک صفحه خطای دوستانه و واضح برخورد می‌کنند.
پروژه ASP.Net Core MVC (وب و سی شارپ)
در Asp.Net Core MVC، می‌توانید برای نمایش خطاهای سفارشی یک ویو خاص ایجاد کنید. این ویو می‌تواند برای
اگر فایل Startup.cs را در پروژه‌تان ندارید، احتمالاً از یک نوع پروژه متفاوتی استفاده می‌کنید که تنظیمات آن متفاوت است. برای پیکربندی خطا در Asp.Net Core، می‌توانید به جای استفاده از Startup.cs از فایل Program.cs استفاده کنید.
نمونه پیکربندی خطا در Program.cs:
var builder = WebApplication.CreateBuilder(args);
// سایر تنظیمات و سرویس‌ها
var app = builder.Build();
// پیکربندی برای مدیریت خطاها
if (!app.Environment.IsDevelopment())
{
app.UseExceptionHandler("/Home/Error");
app.UseHsts();
}
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();
app.UseAuthorization();
app.MapControllerRoute(
name: "default",
pattern: "{controller=Home}/{action=Index}/{id?}");
app.Run();
اضافه کردن اکشن Error به کنترلر Home:
public class HomeController : Controller
{
public IActionResult Error()
{
return View();
}
}
ایجاد فایل Error.cshtml در مسیر Views/Shared:
@model Microsoft.AspNetCore.Mvc.RazorPages.PageModel
<!DOCTYPE html>
<html>
<head>
<title>خطا رخ داده است</title>
</head>
<body>
<h1>متاسفیم، یک خطا رخ داده است.</h1>
<p>لطفاً مجدداً تلاش کنید یا با پشتیبانی تماس بگیرید.</p>
</body>
</html>
این کد تضمین می‌کند که اگر یک خطا در محیط غیرتوسعه رخ دهد، کاربر به ویوی Error.cshtml هدایت می‌شود و پیام‌های خطا نمایش داده می‌شوند.
Routing
در Asp.Net Core MVC فرایندی است که در آن درخواست‌های HTTP به اکشن‌های مناسب در کنترلرهای مربوطه هدایت می‌شوند. این فرایند به شما کمک می‌کند تا URLها را با منطق کسب‌وکار و محتوای اپلیکیشن خود تطبیق دهید.
اجزای اصلی Routing:
Endpoints:
نقاط پایانی که توسط اکشن‌های کنترلر یا ریزکنترل‌ها (Razor Pages) مشخص می‌شوند.
Routes:
الگوهایی که برای تطبیق URLها با اکشن‌های کنترلر استفاده می‌شوند.
Route Constraints:
محدودیت‌هایی که برای محدود کردن URLها به الگوهای خاص اعمال می‌شوند.
انواع Routing:
1- Convention-based Routing (Routing بر اساس قواعد):
این نوع Routing بر اساس الگوهای از پیش تعریف شده انجام می‌شود. مثلاً:
app.UseEndpoints(endpoints =>
{
endpoints.MapControllerRoute(
name: "default",
pattern: "{controller=Home}/{action=Index}/{id?}");
});
در اینجا، الگوی پیش‌فرض شامل کنترلر، اکشن و پارامتر اختیاری id است.
2- Attribute-based Routing (Routing بر اساس صفات):
با استفاده از Attributeهای مشخصی، مسیرهای URL در اکشن‌ها تعریف می‌شوند. مثلاً:
[Route("products/{id}")]
public IActionResult GetProduct(int id)
{
// منطق برای دریافت محصول با استفاده از شناسه
return View();
}
این روش بیشتر برای اکشن‌ها و کنترلرهایی که نیاز به مسیرهای پیچیده دارند استفاده می‌شود.
تنظیمات Routing در فایل Program.cs:
برای پیکربندی 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های مورد نظر خود را به اکشن‌های کنترلرها هدایت کنید و اپلیکیشنی با ساختار URLهای منظم و مدیریت‌پذیر ایجاد کنید.
اکشن پیش‌فرض (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 هدایت خواهد شد.
تغییر URLها می‌تواند دلایل مختلفی داشته باشد:
(بهینه‌سازی برای موتورهای جستجو)SEO :
URLهای
تمیز و قابل خواندن برای انسان‌ها و موتورهای جستجو بهتر هستند و می‌توانند رتبه سایت شما را در نتایج جستجو بهبود دهند.
امنیت: بعضی اوقات، تغییر URLها می‌تواند به افزایش امنیت کمک کند. مثلاً می‌توانید URLهایی که شامل پارامترهای حساس هستند را پنهان کنید.
خوانایی و دسترسی‌پذیری: URLهایی که توصیفی هستند، برای کاربران و توسعه‌دهندگان قابل فهم‌تر و دسترسی‌پذیرتر هستند.
مدیریت مسیرها: زمانی که مسیرهای جدیدی به برنامه اضافه می‌کنید یا معماری برنامه تغییر می‌کند، نیاز به تغییر URLها به وجود می‌آید.
جلوگیری از تکرار: برای جلوگیری از تکرار URLهای مشابه و اطمینان از اینکه هر مسیر یکتا است.
این تغییرات می‌توانند تجربه کاربری بهتری ارائه دهند و برنامه را مدیریت‌پذیرتر کنند.
بیایید یک صفحه تماس با ما را با استفاده از 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های کاربردی و خوانایی داشته باشید که تجربه کاربری بهتری را فراهم می‌کند.
ترتیب قرارگیری مسیرها (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?} بعد از مسیر خاص قرار داده شده تا درخواستی که به هیچ‌کدام از مسیرهای خاص مطابقت ندارد، به این مسیر هدایت شود.
این ترتیب اطمینان می‌دهد که مسیرهای خاص‌تر قبل از مسیرهای عمومی‌تر بررسی می‌شوند، و از تصادف در مسیرها و ارسال اشتباه درخواست‌ها جلوگیری می‌کند.
علامت سوال ? در مسیرها به معنای اختیاری بودن پارامتر است. یعنی اگر پارامتری مانند id در URL ذکر نشده باشد، اکشن همچنان اجرا می‌شود. این به شما امکان می‌دهد مسیرهای منعطف‌تری داشته باشید.
و اگر علامت سوال را بردارید id اجباری می شود
مثال:
endpoints.MapControllerRoute(
name: "default",
pattern: "{controller=Home}/{action=Index}/{id?}");
در این مثال، id? نشان می‌دهد که پارامتر id اختیاری است. بنابراین، هر دو URL زیر معتبر هستند و به اکشن Index در کنترلر Home هدایت می‌شوند:
/Home/Index
/Home/Index/123
این ویژگی مفیده برای زمان‌هایی که پارامترها همیشه نیاز نیستند و می‌خواهید مسیرها تمیز و ساده باشند.