今天開始要還一些基本的技術債，很久沒有寫到前端了，最近因為開發一些 .NetCore 6 ASP.net 的專案
所以接下來，應該會分享一些稍微比較麻煩的東西，以後也方便我複製貼上，可能會有點瑣碎
不過都是我再重新製作比較容易懂的範例，這篇要分享的是，前端的 CheckBox 群，如何動態產生可以被選擇的選項、如何載入預先選好的選項、還有客戶在前端選取好後送回的資料
1. 載入CheckBox 預設需要的資料，當然你的資料來源是來自於四面八方，可能來自API 可能來自 Database , 但是最後你應該會變成一組 Key,Value 的形式
這範例我設計有四種權限 ADMIN,USER,CREATE,SPRCIAL
假設資料庫撈出來的值是 USER,CREATE
Index.cshtml.cs Code:
<![CDATA[
/// <summary>
/// 預設可以選擇的選項
/// </summary>
public Dictionary<string, string> AllPermissions { get; set; }
/// <summary>
/// 先載入可以選擇的
/// </summary>
[BindProperty]
public string[] SelectedPermissions { get; set; }
public string Result { get; set; }
public void OnGet()
{
//載入所有可以選擇的選項
LoadPermission();
//預設哪一些是一開始的資料
SelectedPermissions = new string[] { "USER", "CREATE" };
}
private void LoadPermission()
{
AllPermissions = new Dictionary<string, string>();
AllPermissions.Add("ADMIN", "管理者");
AllPermissions.Add("USER", "用戶");
AllPermissions.Add("CREATE", "可建立");
AllPermissions.Add("SPECIAL", "特殊權限");
}
]]>
2.前端的Code
Index.cshtml
<![CDATA[
<form method="post" id="formMain">
<div class="form-group col-lg-12 col-xs-12">
<label> 權限 CheckBox</label>
<br />
@foreach (var perm in Model.AllPermissions)
{
<input type="checkbox" name="userSelectPerms" value=@perm.Key @(Model.SelectedPermissions.Contains(perm.Key)?"checked":"") />
@perm.Value
<br />
}
</div>
<div class="col-lg-12 col-xs-12">
<button asp-page-handler="Upload" class="btn btn-success"><i class="fa fa-save" aria-hidden="true"></i> &nbsp;儲存</button>
<br />
</div>
<div style="color:red">
@Html.Raw(Model.Result)
</div>
</form>
]]>
Result:
3. 接下來就是 OnPost 的部分，因為前端生出來的 input name 都是 userSelectPerms 這時候 OnPost 中只需要 加入 parameter
string[] userSelectPerms 就可以
接到該值，我就是無腦的把顯示的值往前顯示，範例就盡量寫的簡單點。
Index.cshtml.cs Code:
<![CDATA[
public IActionResult OnPostUpload(string[] userSelectPerms)
{
LoadPermission();
SelectedPermissions = userSelectPerms;
Result = "userSelectPerms : " + string.Join(",", userSelectPerms);
return Page();
}
]]>
Result:
今天先筆記到這邊，不算太難，只是每次寫都會測試一下，想說就不如紀錄一下，可能是我太久沒寫惹~
