Form Action Tag Helper (Tag Helper Hành động Form) trong ASP.NET Core

Nguồn: Tag Helpers in forms in ASP.NET Core – The Form Action Tag Helper

Tác giả: Rick Anderson, N. Taylor Mullen, Dave Paquette, và Jerrie Pelser

Form Action Tag Helper

Form Action Tag Helper tạo thuộc tính formaction trên thẻ <button ...> hoặc <input type="image" ...> được sinh ra. Thuộc tính formaction điều khiển nơi form gửi dữ liệu của mình. Nó liên kết với các phần tử <input> kiểu image và phần tử <button>. Form Action Tag Helper cho phép sử dụng nhiều thuộc tính asp- của AnchorTagHelper để điều khiển link formaction được tạo cho phần tử tương ứng.

Các thuộc tính AnchorTagHelper được hỗ trợ để kiểm soát giá trị của formaction:

Thuộc tính	Mô tả
asp-controller	Tên của controller.
asp-action	Tên của action method.
asp-area	Tên của area.
asp-page	Tên của Razor page.
asp-page-handler	Tên của Razor page handler.
asp-route	Tên của route.
asp-route-{value}	Một giá trị URL route đơn. Ví dụ: `asp-route-id="1234"`.
asp-all-route-data	Tất cả các giá trị route.
asp-fragment	Fragment (đoạn) của URL.

Ví dụ: Gửi đến controller

Markup sau gửi form đến action Index của HomeController khi input hoặc button được chọn:

cshtml

<form method="post">
    <button asp-controller="Home" asp-action="Index">Click Me</button>
    <input type="image" src="..." alt="Or Click Me" asp-controller="Home" 
                                asp-action="Index">
</form>

Markup trên tạo ra HTML sau:

html

<form method="post">
    <button formaction="/Home">Click Me</button>
    <input type="image" src="..." alt="Or Click Me" formaction="/Home">
</form>

Ví dụ: Gửi đến Razor Page

Markup sau gửi form đến Razor Page About:

cshtml

<form method="post">
    <button asp-page="About">Click Me</button>
    <input type="image" src="..." alt="Or Click Me" asp-page="About">
</form>

Markup trên tạo ra HTML sau:

html

<form method="post">
    <button formaction="/About">Click Me</button>
    <input type="image" src="..." alt="Or Click Me" formaction="/About">
</form>

Ví dụ: Gửi đến route

Xét endpoint /Home/Test:

csharp

public class HomeController : Controller
{
    [Route("/Home/Test", Name = "Custom")]
    public string Test()
    {
        return "This is the test page";
    }
}

Markup sau gửi form đến endpoint /Home/Test:

cshtml

<form method="post">
    <button asp-route="Custom">Click Me</button>
    <input type="image" src="..." alt="Or Click Me" asp-route="Custom">
</form>

Markup trên tạo ra HTML sau:

html

<form method="post">
    <button formaction="/Home/Test">Click Me</button>
    <input type="image" src="..." alt="Or Click Me" formaction="/Home/Test">
</form>