مشخصات مقاله
-
1959
-
0.0
-
4527
-
0
-
0
آموزش نحوه استفاده از صفحات Razor در ASP.NET MVC Core 2.0
نحوه استفاده از صفحات Razor در ASP.NET Core 2.0
صفحات Razor در ASP.NET Core 2.0 معرفی شده اند تا برنامه های ساده وب رابتوان سریعتر ساخت و راه خوبی برای بازی با مفاهیم مختلف ASP.NET Core مانند Razor، Layout Pages و Helpers Toggle هستند.
در این مقاله ما خواهیم آموخت که چگونه از Razor Pages در ASP.NET Core 2.0 استفاده کنیم.
راه حل
یک پروژه خالی ایجاد کنید و Startup.cs را تغییر دهید تا servicesو middleware را برای MVC اضافه کنید.
public void ConfigureServices(
IServiceCollection services)
{
services.AddSingleton< IMovieService, MovieService>();
services.AddMvc();
}
public void Configure(
IApplicationBuilder app,
IHostingEnvironment env)
{
app.UseMvc();
}
یک service و domain model (پیاده سازی IMovieService فقط در لیست حافظه در source code نمونه است).
public class Movie
{
public int Id { get; set; }
public string Title { get; set; }
public int ReleaseYear { get; set; }
public string Summary { get; set; }
}
public interface IMovieService
{
List< Movie > GetMovies();
Movie GetMovie(int id);
void AddMovie(Movie item);
void UpdateMovie(Movie item);
void DeleteMovie(int id);
bool MovieExists(int id);
}
مدلهای input و output را اضافه کنید (برای دریافت و ارسال اطلاعات از طریق property bindings).
public class MovieInputModel
{
public int Id { get; set; }
[Required]
public string Title { get; set; }
public int ReleaseYear { get; set; }
public string Summary { get; set; }
}
public class MovieOutputModel
{
public int Id { get; set; }
public string Title { get; set; }
public int ReleaseYear { get; set; }
public string Summary { get; set; }
public DateTime LastReadAt { get; set; }
}
یک پوشه به نام Pages اضافه کنید و صفحات مربوط به Index، _Layout، _ViewImports و _ViewStart را اضافه کنید. این صفحات از MVC متفاوت نیستند. همچنین، پوشه ای به نام Movies را به صفحات CRUD اضافه کنید.
اضافه کردن 4 مورد جدید RazorPage به پوشه Movies، به نام Index، Create، Edit و Delete. اینها فایلهای .cshtml و .cshtml.cs را اضافه خواهند کرد.
هر یک از این صفحات IMovieService ما را از طریق تزریق constructor تزریق می کند، به عنوان مثال:
private readonly IMovieService service;
public IndexModel(IMovieService service)
{
this.service = service;
}
تغییر Index.cshtml.
@page
@model IndexModel
@{
}
< h2 >Movie Listing< /h2 >
< div >
< a asp-page="/Index" >Home< /a > |
< a asp-page="./Create" >Add New< /a >
< /div >
< table >
< thead >
< tr >
< th >Title< /th >
< th >Year< /th >
< th >< /th >
< th >< /th >
< th >< /th >
< /tr >
< /thead >
< tbody >
@foreach (var item in Model.Movies)
{
< tr >
< td >@item.Title< /td >
< td >@item.ReleaseYear< /td >
< td >< a asp-page="./Edit" asp-route-id="@item.Id" >Edit< /a >< /td >
< td >< a asp-page="./Delete" asp-route-id="@item.Id" >Delete< /a >< /td >
< /tr >
}
< /tbody >
< /table >
تغییر Index.cshtml.cs.
public List< MovieOutputModel > Movies { get; set; }
public void OnGet()
{
this.Movies = this.service.GetMovies()
.Select(item = > new MovieOutputModel
{
Id = item.Id,
Title = item.Title,
ReleaseYear = item.ReleaseYear,
Summary = item.Summary,
LastReadAt = DateTime.Now
})
.ToList();
}
تغییر Create.cshtml.
@page
@model CreateModel
@{
}
< h2 >New Movie< /h2 >
< form method="post" >
< div asp-validation-summary="All" >< /div >
< label asp-for="Movie.Id" >< /label >
< input asp-for="Movie.Id" / >< br / >
< label asp-for="Movie.Title" >< /label >
< input asp-for="Movie.Title" / >
< span asp-validation-for="Movie.Title" >< /span >< br / >
< label asp-for="Movie.ReleaseYear" >< /label >
< input asp-for="Movie.ReleaseYear" / >< br / >
< label asp-for="Movie.Summary" >< /label >
< textarea asp-for="Movie.Summary" >< /textarea >< br / >
< button type="submit" >Save< /button >
< a asp-page="./Index" >Cancel< /a >
< /form >
تغییر Create.cshtml.cs.
[BindProperty]
public MovieInputModel Movie { get; set; }
public void OnGet()
{
this.Movie = new MovieInputModel();
}
public IActionResult OnPost()
{
if (!ModelState.IsValid)
return Page();
var model = new Movie
{
Id = this.Movie.Id,
Title = this.Movie.Title,
ReleaseYear = this.Movie.ReleaseYear,
Summary = this.Movie.Summary
};
service.AddMovie(model);
return RedirectToPage("./Index");
}
ویرایش Edit.cshtml را تغییر دهید.
@page "{id:int}"
@model EditModel
@{
}
< h2 >Edit Movie - @Model.Movie.Title< /h2 >
< form method="post" >
< div asp-validation-summary="All" >< /div >
< input type="hidden" asp-for="Movie.Id" / >
< label asp-for="Movie.Title" >< /label >
< input asp-for="Movie.Title" / >
< span asp-validation-for="Movie.Title" >< /span >< br / >
< label asp-for="Movie.ReleaseYear" >< /label >
< input asp-for="Movie.ReleaseYear" / >< br / >
< label asp-for="Movie.Summary" >< /label >
< textarea asp-for="Movie.Summary" >< /textarea >< br / >
< button type="submit" >Save< /button >
< a asp-page="./Index" >Cancel< /a >
< /form >
ویرایش Edit.cshtml.cs را تغییر دهید.
[BindProperty]
public MovieInputModel Movie { get; set; }
public IActionResult OnGet(int id)
{
var model = this.service.GetMovie(id);
if (model == null)
return RedirectToPage("./Index");
this.Movie = new MovieInputModel
{
Id = model.Id,
Title = model.Title,
ReleaseYear = model.ReleaseYear,
Summary = model.Summary
};
return Page();
}
public IActionResult OnPost()
{
if (!ModelState.IsValid)
return Page();
var model = new Movie
{
Id = this.Movie.Id,
Title = this.Movie.Title,
ReleaseYear = this.Movie.ReleaseYear,
Summary = this.Movie.Summary
};
service.UpdateMovie(model);
return RedirectToPage("./Index");
}
تغییر Delete.cshtml:
@page "{id:int}"
@model DeleteModel
@{
}
< h2 >Delete Movie< /h2 >
< p >Are you sure you want to delete < strong >@Model.Title< /strong >?< /p >
< form method="post" >
< input type="hidden" asp-for="Id" / >
< button type="submit" >Yes< /button >
< a asp-page="./Index" >No< /a >
< /form >
تغییر Delete.cshtml.cs:
[BindProperty]
public int Id { get; set; }
public string Title { get; set; }
public IActionResult OnGet(int id)
{
var model = this.service.GetMovie(id);
if (model == null)
return RedirectToPage("./Index");
this.Id = model.Id;
this.Title = model.Title;
return Page();
}
public IActionResult OnPost()
{
if (!service.MovieExists(this.Id))
return RedirectToPage("./Index");
service.DeleteMovie(this.Id);
return RedirectToPage("./Index");
}
اجرا کنید و به Movies / فیلم بروید:
بر روی اولین Edit کلیک کنید(توجه کنید که URL به این ترتیب خواهد(/Movies/Edit/1) بود ).
بر روی اولین Delete کلیک کنید(توجه کنید که URL به این ترتیب خواهد(/Movies/ Delete /3) بود ).
مباحثه:
صفحات Razor در ASP.NET Core 2.0 معرفی شده اند تا برنامه های ساده وب را بتوان سریعتر ساخت و راه خوبی برای بازی با مفاهیم مختلف ASP.NET Core مانند Razor، Layout Pages و Helpers Toggle هستند.
Razor Pages از ASP.NET Core MVC تحت hood استفاده می کند، اما مدل برنامه نویسی یکسان نیست. بر خلاف MVC که Controllers، Models ها و Views ها اجزای مجزا و جداگانه ای از معماری هستند، در Razor Pages این مفاهیم در زیر یک سقف، Page Model آورده شده اند.
مدل صفحه(Page Model)
من دوست دارم Page Model را به عنوان ترکیبی از Controller ها و Modelsها در نظر بگیرم. مانند controller ، زیرا آنها درخواست HTTP دریافت می کنند و مانند مدل، data/ properties را برای views ها نگه می دارند.
برای یک فایل .cshtml به عنوان Page Model عمل می کند، باید به عنوان خط اول آن دستورالعمل @page باشد. کلاس.cshtml.cs (code-behind) از کلاس PageModel abstract به ارث می برد. با هماهنگی، کلاس code-behind دارای Model به نام page’s اضافه شده است برای مثال Index page’s کد پشتی (code-behind) IndexModel است.
مسیر یابی(Routing)
مسیریابی به صفحات به موقعیت آنها در ساختار دایرکتوری پروژه بستگی دارد، در زیر پوشه Pages (به طور پیش فرض). اگر یک صفحه در URL مشخص نشده باشد، پیش فرض Index استفاده می شود.
در مثال ما، ما به URL / Movies رفتیم تا صفحه ای که در صفحه / Pages / Movies / Index در solution ما قرار دارد را مشاهده کنیم.
به طور مشابه، آدرس (/Movies/Edit maps) به (/Pages/Movies/Edit page).
ASP.NET Core 2.0 ساختارهای جدیدی را برای تولید URL ها معرفی کرده است:
- Page() method
- asp-page Tag Helper
- متد RedirectToPage () در کلاس BaseModel
توجه داشته باشید به URL هایی که از مسیرهای مطلق (absolute paths)شروع می شوند و به پوشه Pages اشاره می کنند. ما همچنین می توانیم URL های نسبی را با استفاده از(./) یا (../) یا به سادگی با حذف (/.) برای درک بهتر کمک کنیم در اینجا چیزی است که هنگام مرور به URL های مختلف از Page / Movies / Delete هدایت می شود،
ما می توانیم محدودیت های مسیریابی را بعنوان بخشی از دستور العمل @page مشخص کنیم تا در زمان اجرا انتظار داشته باشیم پارامترهای مسیر و یا 404 (Not Found) را از دست بدهیم.
در Edit page با استفاده از محدودیت(constraint) مانند:
@page “{id:int}”
اگر ترجیح می دهید نام دیگری از صفحات برای پوشه ریشه خود استفاده کنید، می توانید با تنظیم کردن options های صفحه، این کار را انجام دهید.
دستیار ها(Handlers)
همانطور که قبلا ذکر شد، این صفحه درخواست HTTP دریافت می کند (یعنی به عنوان یک Action در دنیای MVC عمل می کند) و با متد های handler پردازش می شود. این handlers (ActionResult ) بازگردانده و با استفاده از کنوانسیون On [verb] نامیده می شود. اغلب موارد استفاده شده OnGet() و OnPost() هستند. برای asynchronous می توان Async را به نام اضافه کرد، اما این اختیاری است.
کلاس پایه PageModel دارای روش RedirectToPage() است (که RedirectToPageResult را به ارمفان می آورد) ، برای حرکت به صفحات دیگر و Page() متد (که PageResult را به ارمفان می آورد) برای بازگشت صفحه فعلی است. توجه داشته باشید که اگر handler method (Void) باشد، runtime یک PageResult را بازگرداند.
برای داشتن متد های چندرسانه ای(multiple handler) برای فعل های HTTP، می توانیم از متد های پردازش شده با استفاده از ویژگی asp-page-handler استفاده کنیم. نام مشخص شده در اینجا باید یک روش در کلاس صفحه با استفاده از کنوانسیون On [verb] [handler] داشته باشد. بیایید یک لینک به لیست فیلم های مان اضافه کنیم تا فیلم را حذف کنیم.
< td >
< a asp-page="./Index"
asp-page-handler="delete"
asp-route-id="@item.Id">Delete< /a >
< /td >
یک متد در کلاس page model برای رسیدگی به این درخواست اضافه کنید (به نام و پارامتر آن توجه داشته باشید).
public IActionResult OnGetDelete(int id)
{
if (!service.MovieExists(id))
return RedirectToPage("./Index");
service.DeleteMovie(id);
return RedirectToPage("./Index");
}
ماوس خود را بر روی لینک Delete ببرید و متوجه می شوید که URL شبیه به(/Movies?id=1&handler=delete)است.
شما ترجیح می دهید که query parameters را با بخش های URL جایگزین کنید و سپس محدودیت مسیر زیر را به دستورالعمل @Page اضافه کنید و نشانی اینترنتی تولید شده خواهد بود:( /Movies/delete/1).
Binding
دستورالعمل @model در صفحات به کلاس page model اشاره می کند زیرا همانطور که قبلا ذکر شد، این کلاس به عنوان مدل برای Razor Pages عمل می کند. این برای خواندن properties کار می کند، با این حال برای پر کردن آنها در هنگام ارسال داده ها (به عنوان مثال هنگام استفاده از افعال غیر از GET) ما باید از ویژگی [BindProperty] برای علامت گذاری ویژگی ها برای استفاده از مدل Binding استفاده کنیم.
شما می توانید Source Code مربوط به این مقاله را از لینک زیر دانلود کنید: