上一篇文章 ASP.NET Core 6.0 - 簡單實作 Razor 元件( Razor Component ) ，只是做簡單的 Binding 物件

這一篇文章我主要測試如果配合 form submit 後是不是一樣的好用，今天問 一下同事好像很少使用到

今天心血來潮測一下，其實還蠻好用的，這樣可以一些 重複的 code 可以被有效率的 reuse.

敘述一下這邊的案例，我會製作一個 Razor 元件 ( Pages\Components\UserInputComponent.razor )並且我會放入一些 input 

之後我有主頁面 ( Pages\UserInputComponentTest.cshtml , Pages\UserInputComponentTest.cshtml.cs) 引入該 Component

1. 製作 Razor 元件 ，這邊不贅述 可以看 之前的文章 ASP.NET Core 6.0 - 簡單實作 Razor 元件( Razor Component ) 

這邊提供原始碼

UserInputComponent.razor

@page "/Components/UserInputComponent" <div class="form-group col-lg-12 col-xs-12"> <label> Id</label> <input name="id" value="@UserData.Id" class="form-control" /> </div> <div class="form-group col-lg-12 col-xs-12"> <label> Name</label> <input name="name" value="@UserData.Name" class="form-control" /> </div> <div class="form-group col-lg-12 col-xs-12"> <label> Age</label> <input name="age" value="@UserData.Age" class="form-control" /> </div> @code { }

UserInputComponent.razor.cs

namespace Core6Tutorial.Pages.Components { public partial class UserInputComponent { [Microsoft.AspNetCore.Components.ParameterAttribute] public Models.User UserData { get; set; } } }

這裡面設計了三個 input 分別對應了 User 物件中的 Id,Name,Age

2.主頁面

UserInputComponentTest.cshtml

@page @model Core6Tutorial.Pages.UserInputComponentTestModel @{ } @Html.Raw(Model.Result) <form method="post" id="formMain"> <div class="col-lg-12 col-xs-12 form-group" style="margin-top:20px"> <component type="typeof(Components.UserInputComponent)" render-mode="Static" param-UserData=@Model.UserInMainPage /> <br /> <button asp-page-handler="Save" class="btn btn-success"><i class="fa fa-floppy" aria-hidden="true"></i> Save</button> <br /> </div> </form>

UserInputComponentTest.cshtml.cs

public class UserInputComponentTestModel : PageModel { [BindProperty] public User UserInMainPage { get; set; } [BindProperty] public string Result { get; set; } public void OnGet() { UserInMainPage = new User { Name = "許當麻測試From Main Page", Id = "TESTID", Age = 12 }; } public IActionResult OnPostSave(string id, string name, int age) { Result += id + "," + name + "," + age+"<br>"; Result += JsonConvert.SerializeObject(UserInMainPage); return Page(); } }

Result:

用起來比預期中的簡單  [BindProperty] 設定好之後就連動起來了，而且取得物件也容易