使用者編輯和角色編輯幾乎一模一樣，這裡先直接貼程式碼。
@page "/user"
@using BlazorLearn.Entity
@using Furion.DataEncryption
<Table TItem="UserEntity" IsBordered="true" ShowAddButton="true" ShowToolbar="true"
ShowExtendButtons="true" ShowEditButtonCallback="entity => entity.Id != 1" ShowDeleteButtonCallback="entity => entity.Id != 1"
OnQueryAsync="OnQueryAsync" OnSaveAsync="OnSaveAsync">
<TableColumns>
<TableColumn @bind-Field="@context.UserName"></TableColumn>
<TableColumn @bind-Field="@context.Name"></TableColumn>
<TableColumn @bind-Field="@context.RoleId" Lookup="Roles"></TableColumn>
</TableColumns>
<RowButtonTemplate>
<TableCellButton Color="Color.Success" Icon="fa fa-edit" Text="重置密碼" OnClickWithoutRender="() => ShowModal(context)"></TableCellButton>
</RowButtonTemplate>
</Table>
<Modal @ref="PasswordModal">
<ModalDialog Title="重置密碼">
<BodyTemplate>
<BootstrapInput @bind-Value="SelectedUser.Password" DisplayText="請輸入新密碼"></BootstrapInput>
</BodyTemplate>
<FooterTemplate>
<Button OnClick="ResetPassword">重置密碼</Button>
</FooterTemplate>
</ModalDialog>
</Modal>
@code {
private List<SelectedItem>? Roles { get; set; }
private Modal? PasswordModal { get; set; }
private UserEntity? SelectedUser { get; set; }
protected override void OnInitialized()
{
base.OnInitialized();
SelectedUser = new UserEntity();
Roles = RoleEntity.Select.ToList().Select(x => new SelectedItem(x.Id.ToString(), x.Name!)).ToList();
}
private Task<QueryData<UserEntity>> OnQueryAsync(QueryPageOptions arg)
{
var users = UserEntity.Select.Count(out var count)
.Page(arg.PageIndex, arg.PageItems).ToList();
return Task.FromResult(new QueryData<UserEntity>()
{
Items = users,
TotalCount = (int)count
});
}
private Task<bool> OnSaveAsync(UserEntity arg1, ItemChangedType arg2)
{
if (arg2 == ItemChangedType.Add)
{
arg1.Password = MD5Encryption.Encrypt(arg1.UserName);
}
arg1.Save();
return Task.FromResult<bool>(true);
}
private void ResetPassword()
{
SelectedUser.Password = MD5Encryption.Encrypt(SelectedUser.Password);
SelectedUser?.Save();
PasswordModal?.Toggle();
}
private Task ShowModal(UserEntity userEntity)
{
SelectedUser = userEntity;
SelectedUser.Password = "";
PasswordModal?.Toggle();
StateHasChanged();
return Task.CompletedTask;
}
}這裡解釋幾個地方。
一個是Lookup，這個東西還是很好用的，可以直接使用SelectedItem把Id類的東西直接轉成名字，同時修改新增等等功能也會一同使用。
這裡我們直接在初始化的時候拿出所有的角色轉換成SelectedItem
private List<SelectedItem>? Roles { get; set; }
Roles = RoleEntity.Select.ToList().Select(x => new SelectedItem(x.Id.ToString(), x.Name!)).ToList();然後我們只需要將User繫結的RoleId列的Lookup指向Roles就行了。
<TableColumn @bind-Field="@context.RoleId" Lookup="Roles"></TableColumn>另一個就是修改密碼的時候我偷懶了，不應該直接把整個UserEntity拿過來去掉密碼欄位。這裡應該單獨拿出密碼來處理完再Update進去更好，不過例子嘛，這樣寫也行。
第三個就是我這裡在新增新使用者的時候預設使用了使用者名稱相同的密碼，這個要根據安全需求來，並且第一次是否需要改密碼之類的可以都在這裡處理。
程式碼在github:https://github.com/j4587698/BlazorLearn，分支lesson11。