上一篇文章 ASP.NET Core 6.0 - 簡單實作 Razor 元件( Razor Component ) ，只是做簡單的 Binding 物件
這一篇文章我主要測試如果配合 form submit 後是不是一樣的好用，今天問 一下同事好像很少使用到
今天心血來潮測一下，其實還蠻好用的，這樣可以一些 重複的 code 可以被有效率的 reuse.
之後我有主頁面 ( Pages\UserInputComponentTest.cshtml , Pages\UserInputComponentTest.cshtml.cs) 引入該 Component
ASP.NET Core 6.0 - 簡單實作 Razor 元件( Razor Component )
這邊提供原始碼
UserInputComponent.razor
<![CDATA[
@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
<![CDATA[
namespace Core6Tutorial.Pages.Components
{
public partial class UserInputComponent
{
[Microsoft.AspNetCore.Components.ParameterAttribute]
public Models.User UserData { get; set; }
}
}
]]>
這裡面設計了三個 input 分別對應了 User 物件中的 Id,Name,Age
2.主頁面
<![CDATA[
@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
<![CDATA[
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] 設定好之後就連動起來了，而且取得物件也容易
--
Before you read this, the article was in a superposition of human and AI. Upon observation, the wave function collapsed into a sleep-deprived developer.
如果這篇文章有幫助到您幫我分享一下，讓我有寫下去的動力...
