[2020鐵人賽] Day21 - Razor Page(1/3) - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

第 12 屆 iThome 鐵人賽

DAY 21

Modern Web

打net core肉飯系列第 21 篇

[2020鐵人賽] Day21 - Razor Page(1/3)

12th鐵人賽

Scott Hsing

團隊404 Not Found

2020-10-06 23:18:08

6600 瀏覽

分享至

這邊來講一下Razor Page，他是.net core才出現的產物，我覺得有點類似以前的Webform，但是功能更強大，主要有以下特色:

為.net core MVC的一部分
需.net core 2.0以上才支援
類似MVVM的概念，支援雙向binding，Controller和Action內建在Page中
適用於簡單的網頁
容易上手

接著，我們來建立Razor Page看看吧!
首先選擇新增專案->建立Web Application

可以看到建立好的方案資料夾結構如圖顯示

這邊介紹一下各資料夾

Folders	說明
wwwroot	前端用到的檔案會放在這裡，例如Javascript(如jQuery)、css(如bootstrap)、一些靜態網頁(htm)
Pages	Razor Page放置處
Program.cs	裝載程式設定，你可以想成console程式都要先執行Program.cs而.net core就是一個console程式。
Startup.cs	註冊服務專用，一堆雜七雜八初始設定要來這裡。

不免俗的，我們還是要在Startup.cs註冊服務(AddMvc)

    public class Startup
    {
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddMvc();
        }
        
        public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            app.UseStatusCodePages();
            app.UseStaticFiles();
            app.UseMvc();

        }
    }

接著，我們來新增Razor Page
有幾點必須注意:

須放在Pages資料夾
cshtml第一行必須是@page，代表我是Razor Page
將檔案轉成Action
在Pages資料夾下->新增項目->Razor頁面

Razor Page頁面新增完成之後，我們來設計PageModel
有幾點要注意:

必須繼承PageModel類別
通常會叫做頁面名稱+Model
Handler Method
- OnGet:初始化會先讀此Method(類似WebForm的PageLoad)
- OnPost:表單Post會跑來這裡
  剛剛新增了一個Test的Razor Page，我們來實作看看

namespace Test.Pages
{
    public class TestModel : PageModel
    {
        public string Hello { get; set; }
        public void OnGet()
        {
            Hello = "Hello...";
        }
    }
}

cshtml

@page
@model TestModel
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Test</title>
</head>
<body>
    Message:@Model.Hello
</body>
</html>

很簡單就完成前後端資料傳遞

參考資料
https://docs.microsoft.com/zh-tw/aspnet/core/tutorials/razor-pages/search?view=aspnetcore-3.1