در این قسمت view توضیح می دهیم قبل از توضیح یک کنترلر جدید به نام Blog اضافه می کنم کنترلر من یک اکشن به نام index دارد با return view که به mvc می گم که به دنبال view با نام index بگرد الان پروژه را اجرا کنیم و خروجی را ببینیم پروژه را اجرا کنیم به ما خطا می دهد می گوید view به نام index پیدا نکردم mvc مسیر به دنبال دو پوشه Blog و فایل index و پوشه shared و فایل index می گردد و اگر پیدا نکند این خطا را نشان می دهد
در قسمت اکشن کلیک راست کرده و add view را بزنید و Razor view را انتخاب کنید و در view Name نام view را بنویسید که به صورت پیشفرض که وقتی به اکشن کلیک کنید نام اکشن قرار داده می شود و Add را می زنیم می بینیم یک پوشه به نام Blog ایجاد کرد و فایل index.cshtml ایجاد کرد
اگر بتوانم در index Blog فایل index Home را نمایش بدهم در اینجا می توانم آدرس را کامل وارد کنم و پسوند فایل هم تایپ کرد
در 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 برای مدیریت نمایش دادهها و منطق ساده استفاده شده است.
یک مثال عملی
@{
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>
مثلا می خواهید یک 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>
در 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 قوی تایپشده برای ایجاد کنترلهای ورودی استفاده شده است.
و 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 در ویژوال استودیو هماهنگ هستند.