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

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

فایل Layout در Asp.Net Core MVC یک قالب است که برای تعریف ساختار کلی صفحات وب استفاده می‌شود. این فایل می‌تواند شامل عناصری باشد که در تمام یا اکثر صفحات وب سایت شما مشترک هستند، مانند هدر، فوتر و نوار ناوبری. به این ترتیب، نیاز به تکرار کد در صفحات مختلف ندارید و می‌توانید به راحتی تغییرات سراسری در وب سایتتان اعمال کنید.

مثال:
در یک فایل 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>
        <nav>
            <!-- نوار ناوبری -->
        </nav>
    </header>
    <main>
        @RenderBody()
    </main>
    <footer>
        <!-- فوتر -->
    </footer>
    <script src="~/js/site.js"></script>
</body>
</html>
توضیحات:
@RenderBody():
 این متد جایگاهی را در فایل Layout مشخص می‌کند که محتوای خاص هر ویو در آن قرار می‌گیرد.

ViewData["Title"]:
 عنوان صفحه که از ویوهای مختلف می‌آید.

با استفاده از فایل Layout، می‌توانید ساختار و استایل کلی وب‌سایت خود را به راحتی مدیریت کنید و از تکرار کد در ویوهای مختلف جلوگیری کنید.

1 مشاهده08:24

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

رندربادی @RenderBody() یک متد در فایل Layout است که مشخص می‌کند کجا محتوای خاص هر ویو در صفحه قرار بگیرد. وقتی یک ویو به همراه Layout ارائه می‌شود، محتوای ویو در محل @RenderBody() قرار می‌گیرد.

مثال کاربردی:
فرض کنید فایل Layout به این شکل باشد:

<!DOCTYPE html>
<html>
<head>
    <title>@ViewData["Title"] - My Web Application</title>
</head>
<body>
    <header>
        <nav>
            <!-- نوار ناوبری -->
        </nav>
    </header>
    <main>
        @RenderBody()
    </main>
    <footer>
        <!-- فوتر -->
    </footer>
</body>
</html>
اگر یک ویو مانند Index.cshtml داشته باشیم:
@{
    ViewData["Title"] = "Home Page";
}

<h1>Welcome to the Home Page!</h1>
<p>This is the content of the home page.</p>
محتوای ویو Index.cshtml در محل @RenderBody() قرار می‌گیرد و خروجی نهایی به این شکل خواهد بود:
<!DOCTYPE html>
<html>
<head>
    <title>Home Page - My Web Application</title>
</head>
<body>
    <header>
        <nav>
            <!-- نوار ناوبری -->
        </nav>
    </header>
    <main>
        <h1>Welcome to the Home Page!</h1>
        <p>This is the content of the home page.</p>
    </main>
    <footer>
        <!-- فوتر -->
    </footer>
</body>
</html>
این روش باعث می‌شود که بتوانید ساختار کلی صفحات خود را در یک فایل Layout مدیریت کنید و محتوای خاص هر صفحه را به صورت جداگانه در ویوها تعریف کنید.

1 مشاهده08:30

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

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

مثال:
فرض کنید فایل Layout شما به شکل زیر باشد:
<!DOCTYPE html>
<html>
<head>
    <title>@ViewData["Title"] - My Web Application</title>
</head>
<body>
    <header>
        <nav>
            <!-- نوار ناوبری -->
        </nav>
    </header>
    <main>
        @RenderBody()
        @RenderSection("Scripts", required: false)
    </main>
    <footer>
        <!-- فوتر -->
    </footer>
</body>
</html>

در این مثال، یک بخش به نام Scripts تعریف شده که اختیاری است (required: false).

حالا اگر بخواهید در یک ویو مانند Index.cshtml از این بخش استفاده کنید:
@{
    ViewData["Title"] = "Home Page";
}

<h1>Welcome to the Home Page!</h1>
<p>This is the content of the home page.</p>

@section Scripts {
    <script>
        // کد جاوااسکریپت مخصوص به این ویو
        console.log("Home Page Loaded");
    </script>
}
در اینجا، بخش Scripts تنها در ویو Index.cshtml تعریف و استفاده شده است. اگر ویوی دیگری این بخش را تعریف نکند، هیچ خطایی رخ نمی‌دهد و بخش Scripts در آن ویو نمایش داده نمی‌شود.

1 مشاهده08:34

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

برای اطمینان از اینکه لینک جاوااسکریپت در انتهای صفحه قرار بگیرد، مطمئن شوید که بخش مربوط به جاوااسکریپت را در فایل Layout در محل مناسب قرار داده‌اید. برای این کار، بهتر است از @RenderSection استفاده کنید. مثلاً:

فایل Layout (_Layout.cshtml):
<!DOCTYPE html>
<html>
<head>
    <title>@ViewData["Title"] - My Web Application</title>
</head>
<body>
    <header>
        <nav>
            <!-- نوار ناوبری -->
        </nav>
    </header>
    <main>
        @RenderBody()
    </main>
    @RenderSection("Scripts", required: false)
    <footer>
        <!-- فوتر -->
    </footer>
</body>
</html>
سپس در فایل ویو (Index.cshtml):
@{
    ViewData["Title"] = "Home Page";
}

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

1 مشاهده08:43

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

برای لینک دادن 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 برای اضافه کردن استایل‌های خاص این ویو تعریف شده است.

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

1 مشاهده08:51

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

@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 اضافه می‌شوند. این به شما کمک می‌کند تا کنترل بیشتری بر روی محتوای هر صفحه داشته باشید و از تکرار کد جلوگیری کنید.

1 مشاهده08:56

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

کلمه 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 که نقش زیرساختی در نمایش ویوها دارند.

1 مشاهده09:17

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

این روش به شما کمک می‌کند تا اطمینان حاصل کنید اسکریپت‌های اعتبارسنجی در هر فرم که نیاز به اعتبارسنجی سمت کلاینت دارد، به‌صورت درست و استاندارد اضافه شود.

1 مشاهده09:48

پروژه 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 هدایت می‌شود و پیام‌های خطا نمایش داده می‌شود.

این کار اطمینان می‌دهد که کاربران با یک صفحه خطای دوستانه و واضح برخورد می‌کنند.

1 مشاهده09:51

پروژه 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 هدایت می‌شود و پیام‌های خطا نمایش داده می‌شوند.

1 مشاهده10:05

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

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های منظم و مدیریت‌پذیر ایجاد کنید.

1 مشاهده12:38

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

مطالب بعدی

پرسش‌ها

قوانین

داغ‌ترین‌ها

چندسکویی