Razer page 的 OnPost 怎麼用? 參數會得到什麼資料?

在 ASP.NET Core 中，Razor Pages 是一種用於構建網頁應用程式的簡化方法。OnPost 方法是 Razor Page 的一部分，用於處理 POST 請求，例如表單提交。下面是 OnPost 方法的基本使用方式以及如何獲取參數資料的介紹。


基本使用方式
定義 Razor Page: 在 .cshtml 檔案中定義頁面。

csharp

@page
@model MyApp.Pages.IndexModel
@{
    ViewData["Title"] = "Home page";
}

<form method="post">
    <input type="text" name="InputData" />
    <button type="submit">Submit</button>
</form>

定義 PageModel 類別: 在 .cshtml.cs 檔案中定義 PageModel 類別及其 OnPost 方法。

csharp

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace MyApp.Pages
{
    public class IndexModel : PageModel
    {
        [BindProperty]
        public string InputData { get; set; }

        public IActionResult OnPost()
        {
            // 使用 InputData 做一些事情
            if (!string.IsNullOrEmpty(InputData))
            {
                // 處理輸入資料
            }
            
            // 重定向或返回頁面
            return Page();
        }
    }
}

如何獲取參數資料

1. 使用 [BindProperty] 屬性
使用 [BindProperty] 屬性將表單資料直接綁定到 PageModel 類別中的屬性。

csharp

public class IndexModel : PageModel
{
    [BindProperty]
    public string InputData { get; set; }

    public IActionResult OnPost()
    {
        // InputData 將包含表單提交的值
        if (!string.IsNullOrEmpty(InputData))
        {
            // 處理輸入資料
        }
        
        return Page();
    }
}

2. 使用 FromForm 特性
可以在 OnPost 方法中使用 [FromForm] 特性來獲取表單參數。

csharp 複製程式碼

public IActionResult OnPost([FromForm] string inputData)
{
    // inputData 參數將包含表單提交的值
    if (!string.IsNullOrEmpty(inputData))
    {
        // 處理輸入資料
    }
    
    return Page();
}

3. 使用 Request.Form
直接從 Request.Form 獲取表單資料。

csharp

public IActionResult OnPost()
{
    var inputData = Request.Form["InputData"];
    
    if (!string.IsNullOrEmpty(inputData))
    {
        // 處理輸入資料
    }
    
    return Page();
}

使用範例
假設我們有一個簡單的表單頁面，使用 Razor Page 和 OnPost 方法處理表單提交：

Index.cshtml
csharp

@page
@model MyApp.Pages.IndexModel
@{
    ViewData["Title"] = "Home page";
}

<h2>Submit Data</h2>
<form method="post">
    <label for="InputData">Enter some data:</label>
    <input type="text" id="InputData" name="InputData" />
    <button type="submit">Submit</button>
</form>

@if (Model.Message != null)
{
    <p>@Model.Message</p>
}

Index.cshtml.cs
csharp

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace MyApp.Pages
{
    public class IndexModel : PageModel
    {
        [BindProperty]
        public string InputData { get; set; }
        public string Message { get; set; }

        public void OnGet()
        {
            // 初始化頁面
        }

        public IActionResult OnPost()
        {
            if (!string.IsNullOrEmpty(InputData))
            {
                Message = $"You submitted: {InputData}";
            }
            else
            {
                Message = "Please enter some data.";
            }

            return Page();
        }
    }
}

小結
OnPost 方法主要用於處理 POST 請求，例如表單提交。您可以通過多種方式獲取表單資料，包括使用 [BindProperty] 屬性、[FromForm] 特性以及 Request.Form。選擇哪種方式取決於您的具體需求和偏好。