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

1 مشاهده07:09

مثلا می خواهید یک view بسازید برای ویرایش پروفایل کاربر پروفایل کابر نام و نام خانوادگی و ایمیل و چیزهای دیگر وقتی شما می خواهید ویرایش کنید تمامی اطلاعات کاربر را داخل text box یا کارتهای مربوطه وارد کنید و کاربر داده های خودش را ببیند و ویرایش کند view یک چیزی به نام model داره که میتواند کلاس سی شارپ باشد یا هر نوع داده ای که بهش پاس داد این model را می توانیم از اکشن به view پاس بدی 
در مدل کلاس Users
namespace AspNetCorMVC.Models
{
    public class Users
    {
        public string Name { get; set; }
        public string Family { get; set; }
        public string Email { get; set; }
    }
}
در کنترلر  UserController
using AspNetCorMVC.Models;
using Microsoft.AspNetCore.Mvc;

namespace AspNetCorMVC.Controllers
{
    public class UserController : Controller
    {
        public IActionResult Index()
        {
            Users users = new Users()
            {
                Name ="ali",
                Family ="rezai",
                Email ="ali@yahoo.com"
            };
            return View(users);
        }
    }
}
در views پوشه User و Index.cshtml
نکته  : در اینجا وقتی می خواهیم مدل view را معرفی کنیم باید model حروف کوچک اضافه کنیم و آدرس کلاس را بنویسیم و کلاس را معرفی کنیم و با استفاده از علامت @Model با حروف بزرگ می توانم به محتویات مدل دسترسی داشته باشم
@model AspNetCorMVC.Models.Users
@{
    Layout = null;
}


<!DOCTYPE html>

<html lang="fa" dir="rtl">
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <h1>صفحه کاربر</h1>
    نام:<input type="text" value="@Model.Name"/> <br />
    نام خانوادگی:<input type="text" value="@Model.Family"/> <br />
    ایمیل:<input type="email" value="@Model.Email"/> <br />
    <button>ذخیره</button>
</body>
</html>

1 مشاهده07:13

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

در Asp.Net Core MVC، HTML Helpers متدهایی هستند که در ویوهای Razor استفاده می‌شوند تا تولید کد HTML را ساده‌تر و سریع‌تر کنند. این متدها به شما اجازه می‌دهند تا کنترل‌های HTML را به صورت داینامیک ایجاد کنید.

انواع HTML Helpers:
Helpers ساده: این متدها برای تولید عناصر ساده HTML مانند لینک‌ها، تصاویر و پاراگراف‌ها استفاده می‌شوند. مثلاً:


@Html.TextBox("name", "default value")
@Html.ActionLink("Home", "Index")
Helpers قوی تایپ‌شده: این متدها به شما اجازه می‌دهند تا با مدل‌های قوی تایپ‌شده کار کنید و کنترل‌های HTML مرتبط با آنها ایجاد کنید. مثلاً:


@Html.TextBoxFor(model => model.Name)
@Html.DropDownListFor(model => model.CategoryId, Model.Categories)
مثال:
فرض کنید یک فرم ثبت‌نام دارید:


@model MyApp.Models.RegisterViewModel

@using (Html.BeginForm())
{
    @Html.LabelFor(m => m.Username)
    @Html.TextBoxFor(m => m.Username)

    @Html.LabelFor(m => m.Password)
    @Html.PasswordFor(m => m.Password)

    <input type="submit" value="ثبت نام" />
}
در این مثال، از HTML Helpers قوی تایپ‌شده برای ایجاد کنترل‌های ورودی استفاده شده است.

1 مشاهده08:11

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

و Tag Helpers در Asp.Net Core ابزارهایی هستند که به شما امکان می‌دهند تا کد HTML را با استفاده از سینتکس C# تولید کنید. این ابزارها به نوشتن کد HTML تمیزتر و مختصرتر کمک می‌کنند و از امکانات IntelliSense در Visual Studio بهره می‌برند.

مثال:
فرض کنید می‌خواهید یک فرم HTML برای ورود اطلاعات کاربر ایجاد کنید. به کمک Tag Helpers می‌توانید این کار را به سادگی انجام دهید:


<form asp-action="Register" asp-controller="Account">
    <div>
        <label asp-for="Username"></label>
        <input asp-for="Username" />
    </div>
    <div>
        <label asp-for="Password"></label>
        <input asp-for="Password" type="password" />
    </div>
    <button type="submit">ثبت نام</button>
</form>
در این مثال، از Tag Helpers برای تولید فرم HTML استفاده شده است:

در asp-action و asp-controller مسیر اکشن و کنترلر مربوطه را مشخص می‌کنند.

و asp-for با مدل مورد نظر اتصال برقرار می‌کند و نام مناسب برای کنترل‌های HTML تولید می‌کند.

و Tag Helpers خوانایی کدها را افزایش می‌دهند و با قابلیت‌های IntelliSense در ویژوال استودیو هماهنگ هستند.

1 مشاهده08:15

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

مطالب بعدی

پرسش‌ها

قوانین

داغ‌ترین‌ها

چندسکویی