آموزش استفاده از Razor Pages در ASP.NET MVC Core

Razor Pages در ASP.NET Core

Razor Pages یک ویژگی جدید در ASP.NET Core MVC است. ما می توانیم زمانی که برخی از سناریوهای page-focused وجود دارد از این روش استفاده کنیم.

ایجاد Razor Pages در ASP.NET Core

برای ایجاد این پروژه باید .Net Core و Visual Studio 2015 یا ورژن های جدید تر نصب باشد.

در ویژوال استودیو File -> New -> Project انتخاب کنید.

حالا، ASP.NET Core Web Application جدید ایجاد کنید ونام آن را RazoPagesDemo بگذارید.

روی OK کلیک کنید و آخرین ASP.NET Core را از منوی drop-down انتخاب کنید. سپس، ASP.NET Core 2.0 را انتخاب کنید و Web Application را در پنجره بعدی انتخاب کنید.

روی OK کلیک کنید ویژوال استودیو یک پروژه ایجاد خواهد کرد.

در Solution Explorer، می توانید ببینید یک پوشه به نام pages وجود دارد و همه views ها در آن پوشه وجود دارد.

اکنون پروژه را اجرا کنید در قالب مرورگر یک قالب Razor page را خواهید دید.

ساختار پروژه

• wwwroot : این پوشه شامل تمام فایل های client-side مانند CSS و جاوا که static می باشند است.
• Pages : این پوشه شامل تمام Razor pages های پروژه است.
• appsettings.json : این فایل پیکربندی(configuration) است.
• bower.json : این برای مدیریت client side package استفاده می شود.
• Program.cs : این برنامه وب را میزبانی(hosts) می کند.
• Startup.cs : این application’s services و request pipelines پیکربندی می کند.

چگونه Razor Pages کار می کند

اول، بگذارید Razor page خودمان را ایجاد کنیم.

روی پوشه Pages کلیک راست کرده و یک Razor page جدید اضافه کنید.

یک Razor page با نام test.cshtml ایجاد شده است. فایل test.cshtml را گسترش دهید می بینید که یک فایل cs با همان نام وجود دارد .

این فایل cs به نام فایل code-behind نامیده می شود.

کد زیر را در صفحه test خود کپی کنید.

@page  
@model testModel  
@using Microsoft.AspNetCore.Mvc.RazorPages  
@functions {  
    public class testModel : PageModel  
    {  
        public string Message { get; private set; } = "In test page model: ";  
        public void OnGet()  
        {  
            Message += $" Current Time  { DateTime.Now.ToString() }";  
        }  
    }  
}  
< h2 >In page sample< /h2 >  
< p >  
    @Model.Message  
< /p >  

فایل را ذخیره کنید و پروژه خود را اجرا کنید. در برخی از موارد در port های خاصی اجرا می شود.شما به صفحه test بروید:

http://localhost:x/test.

صفحه نمایش زیر را در مرورگر مشاهده خواهید کرد.

حالا اگر شما کد Razor page را ببینید متوجه خواهید شد که شبیه کد Razor View است. اما تفاوت این است که دارای یک دستور @ Page است که باعث می شود فایل یک MVC action باشد. این request را مستقیما بدون رفتن به Controller انجام می دهد.@ Page باید اولین دستور در هر Razor Page باشد.دستور @ function می تواند برای اتصال model با page استفاده شود. اما همین کار را می توان با استفاده از فایل code behind انجام داد.

حالا اجازه دهید که ما کد @ function به فایل code-behind منقل کنیم.فایل code-behind را باز کرده و این کدها را در cs فایل کپی کنید:

using Microsoft.AspNetCore.Mvc.RazorPages;  
using System;  
  
namespace RazorPages.Pages  
{  
    public class testModel : PageModel  
    {  
        public string Message { get; private set; } = "In test page model: ";  
        public void OnGet()  
        {  
            Message += $" Code Behind Current Time  { DateTime.Now.ToString() }";  
        }  
    }  
}  

و حالا test Razor Page شما باید شبیه این باشد:

@page  
@model testModel  
@using Microsoft.AspNetCore.Mvc.RazorPages  
< h2 >In page sample< /h2 >  
< p >  
    @Model.Message  
< /p >  

تمام فایل ها را ذخیره کنید و دوباره پروژه را اجرا کنید. خروجی زیر در مرورگر نمایش داده می شود.

هنگامی که ما پروژه را اجرا می کنیم، به دنبال نام Razor page در فولدر Pages. می گردد. به صورت پیش فرض، صفحه index نمایش داده می شود.