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

1 مشاهده14:21

فایل view ایجاد شد در قسمت بالا یک تیکه از کد  razor و بعد از اون کد html قرار دارد view که اجرا کردیم ساختار کامل یک فایل html  برای ما ایجاد کرده است

1 مشاهده14:27

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

اگر بتوانم در index Blog فایل index Home را نمایش بدهم در اینجا می توانم آدرس را کامل وارد کنم و پسوند فایل هم تایپ کرد

1 مشاهده14:39

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

در Asp.Net Core MVC، Razor یک موتور نمایش (view engine) است که برای ترکیب کد C# با HTML استفاده می‌شود. Razor این امکان را فراهم می‌کند که کد سمت سرور را به صورت مختصر و خوانا داخل فایل‌های HTML بنویسید. فایل‌های Razor معمولاً با پسوند .cshtml ذخیره می‌شوند.

ویژگی‌های کلیدی Razor:
استفاده از سینتکس ساده: از @ برای جدا کردن کد C# از HTML استفاده می‌کند.

پشتیبانی از IntelliSense: بهبود یافته برای ویژوال استودیو و ویژوال استودیو کد.

عملکرد بالا: کدهای Razor به طور مستقیم به کدهای C# کامپایل می‌شوند.

نمونه‌ای از کد Razor:

@{
    ViewData["Title"] = "صفحه اصلی";
}

<h2>@ViewData["Title"]</h2>
<p>به برنامه Asp.Net Core MVC خوش آمدید!</p>

@if (User.Identity.IsAuthenticated)
{
    <p>خوش آمدید, @User.Identity.Name!</p>
}
else
{
    <p>لطفاً وارد شوید.</p>
}
در این مثال، از Razor برای مدیریت نمایش داده‌ها و منطق ساده استفاده شده است.

1 مشاهده14:45

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

یک مثال عملی 
@{
    Layout = null;
}

<!DOCTYPE html>

<html lang="fa" dir="rtl">
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <h1>صفحه تست</h1>
    <h2>@DateTime.Now.ToString()</h2>
    @{
        string str = DateTime.Now.ToString();
        @:سلام
        @: زمان حال : @str
        <text>
            متن آزمایش
            متن آزمایش
        </text>
        int a = 25;
    }
    <p>@a</p>
    <hr />
    @if (a == 25)
    {
        <text>این عدد برابر است با 25</text>
    }
    else
    {
        <text>مخالف 25 است</text>
    }
    <hr />
    @for(int i=0;i<10;i++)
    {
        <h3>@i</h3>
    }

</body>
</html>

1 مشاهده06:07

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

1 مشاهده07:09

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

مثلا می خواهید یک 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

مطالب بعدی

پرسش‌ها

قوانین

داغ‌ترین‌ها

چندسکویی