ASP.NET Core MVC Razor Page Project

ASP.NET Core MVC 除了提供標的專案 template,還提供一個較為單純的 Razor Page template。將 Controller 的部份移掉,留下 View 也可以說是 Page 的部份,Page 有點像是早期 Web Form 的運作模式,以下為詳細說明。

在 Startup.cs 設定

首先新增新專案:

然後選擇專案類型:

開啟 Startup.cs,加入新的 routing 規則:

public void ConfigureServices(IServiceCollection services)
{
    services.AddMvc();
    services.AddMvc()
        .AddRazorPagesOptions(options =>
        {
            options.RootDirectory = "/Pages";
            options.Conventions.AuthorizeFolder("/MyPages/Admin");
            options.Conventions.AddPageRoute("/Pages/TestPage", "/TestPage/{id1}/{id2}");
        });
}

上述新增的規則,表示在 Pages/TestPage.cshtml 的頁面下對應到網址 /TestPage/{id1}/{id2},其中 id1 及 id2 為必要參數。

新增 Razor 頁面

之後新增 Razor 頁面:

然後將頁面修改如下:

@page "{id}/{id2}"
@model TestPageModel
@{
    ViewData["Title"] = "TestPage";
}
<div>
    Hello World!!
</div>
<div>
    @ViewData["id"] <p></p>
    @ViewData["id2"]
</div>
<div>
    @Model.Field1
</div>

其中 @page “{id}/{id2}" 代表頁面會收到的參數,這個頁面中只會單純顯示從 PageModel 傳回來的 id1 及 id2。

接下來看 TestPage.cshtml.cs 程式碼:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace RazorPageTest.Pages
{
    public class TestPageModel : PageModel
    {
        public void OnGet(int id, string id2)
        {
            ViewData["id"] = id;
            ViewData["id2"] = id2;
            this.Field1 = "aaaaa3";
        }
}

上述的程式,單純將從 url 收到的參數塞回 ViewData,再由 View 顯示出來。

而如果是接收從頁面 POST 過來的值,,可用下列方法:

首先,新增一個 Razor 頁面 TestPage2,而其中的 cshtml 內容GOO如下:

@page
@model RazorPageTest.Pages.TestPage2Model
@{
    ViewData["Title"] = "TestPage2";
}

<h2>TestPage2</h2>
@Model.Field1
<form method="post">
    Name: <input type="text" asp-for="Name" /> <br>
    Other: <input type="text" name="testaaa3" /> <br>
    <input type="submit" value="Submit" />
</form>

要讓後端可以接收到值,有兩個方式,一個是指定 name 這個 tag,另一個是指定 asp-for 這個 ASP.NET MVC tag。而後端的程式碼如下:

public class TestPage2Model : PageModel
{
public string Field1 { get; set; }

[BindProperty]
public string Name { get; set; }

[BindProperty]
public string testaaa3 { get; set; }

public void OnGet()
{
this.Field1 = "Unknown";
}

public void OnPost()
{
string name = this.Name;
name = this.Request.Form["testaaa3"];
this.Name = string.Empty;
this.Field1 = name;
}
}

從上面的程式碼,可以知道要拿到 POST 過來的值有兩個方法,一是利用 BindProperty 這個 attribute 來指定到 PageModel 裡,另一個就是直接從 Request.Form 裡直接取值。

透過上述的介紹,如果網站規模不大,不妨使用這個來建構網站,,相信可以加快開發速度。

範例參考

參考資料

廣告

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 登出 /  變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 /  變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 /  變更 )

連結到 %s