英文:
Blazor: How to show a loading text immediately after clicking a button?
问题
我有一个 Blazor 页面用于创建用户，当按钮被点击时，我想显示一个加载文本，当完成时，我想隐藏文本，以下是我的代码：
<AuthorizeView>
<Authorized>
@if (IsLoading) {
<div>Loading</div>
} else {
<div class="add-user">
<PageHeader Text="Add User" />
<form Model="NewUser" class="user-form">
<div class="line">
<label for="name">Name</label>
<input type="text" id="name" @bind="NewUser.Name" />
</div>
<div class="line">
<label for="email">Email</label>
<input type="email" id="email" @bind="NewUser.Email" />
</div>
<div class="line">
<div>
<label>Gender</label>
</div>
<div>
<label for="male">Male</label>
<input type="radio" id="male" name="gender" value="Male" @onchange="UpdateGender" checked="@IsMaleRadioButtonChecked" />
<label for="female">Female</label>
<input type="radio" id="female" name="gender" value="Female" @onchange="UpdateGender" checked="@IsFemaleRadioButtonChecked"/>
</div>
</div>
<div class="line">
<label for="date-of-birth">Date of Birth</label>
<input type="date" id="date-of-birth" @bind="NewUser.DateOfBirth" />
</div>
<Button Text="Add User" OnClick="Save" />
</form>
</div>
}
</Authorized>
</AuthorizeView>
@code {
private async void Save()
{
IsLoading = true;
StateHasChanged();
if (!AreFormValuesValid()) return;
NewUser.Id = 0;
NewUser.Password = NewUser.Name;
NewUser.Role = roleService.Get("Participant");
NewUser.Gender = Gender == "Male" ?
Enumerations.Gender.Male : Enumerations.Gender.Female;
if (await userService.AddOrUpdate(NewUser))
{
js.InvokeVoidAsync("alert", "User Added Successfully");
NewUser = new User();
Gender = "";
StateHasChanged();
} else
{
js.InvokeVoidAsync("alert", "Couldn't Save User");
}
IsLoading = false;
StateHasChanged();
}
}
加载文本在警报后立即显示，但我希望在点击按钮时立即显示加载文本。如何更改我的代码以实现这一点。
我尝试了许多方法，卡在这里已经几个小时了，有人能帮忙吗？（这是一个 Blazor 服务器应用程序项目）
英文:
I have a blazor page that is used to create a user, when the button is clicked, i want to display a loading text. and when it is done, i want to hide the text, here is my code:
<AuthorizeView>
<Authorized>
@if (@IsLoading) {
<div>Loading</div>
} else {
<div class="add-user">
<PageHeader Text="Add User" />
<form Model="NewUser" class="user-form">
<div class="line">
<label for="name">Name</label>
<input type="text" id="name" @bind="NewUser.Name" />
</div>
<div class="line">
<label for="email">Email</label>
<input type="email" id="email" @bind="NewUser.Email" />
</div>
<div class="line">
<div>
<label>Gender</label>
</div>
<div>
<label for="male">Male</label>
<input type="radio" id="male" name="gender" value="Male" @onchange="UpdateGender" checked="@IsMaleRadioButtonChecked" />
<label for="female">Female</label>
<input type="radio" id="female" name="gender" value="Female"
@onchange="UpdateGender" checked="@IsFemaleRadioButtonChecked"/>
</div>
</div>
<div class="line">
<label for="date-of-birth">Date of Birth</label>
<input type="date" id="date-of-birth" @bind="NewUser.DateOfBirth" />
</div>
<Button Text="Add User" OnClick="Save" />
</form>
</div>
}
</Authorized>
</AuthorizeView>
@code {
private async void Save()
{
IsLoading = true;
StateHasChanged();
if (!AreFormValuesValid()) return;
NewUser.Id = 0;
NewUser.Password = NewUser.Name;
NewUser.Role = roleService.Get("Participant");
NewUser.Gender = Gender == "Male" ?
Enumerations.Gender.Male : Enumerations.Gender.Female;
if (await userService.AddOrUpdate(NewUser))
{
js.InvokeVoidAsync("alert", "User Added Successfully");
NewUser = new User();
Gender = "";
StateHasChanged();
} else
{
js.InvokeVoidAsync("alert", "Couldn't Save User");
}
IsLoading = false;
StateHasChanged();
}
the loading text appears righ after the alert, but i want the loading text to appear right when i click the button. how do i change my code to achieve that.
i tried a lot of methods, and have been stuck for hours, can anyonw help? (this is a blazor server app project)
答案1
得分: 1
更新用户界面只能在await期间进行。当消息只在警告后出现时，userService.AddOrUpdate()实际上并不是异步的。添加延迟以更新屏幕：
//private async void Save() -- 避免使用`async void`
private async Task Save()
{
IsLoading = true;
//StateHasChanged(); -- 这一行不需要更改
await Task.Delay(1);
if (!AreFormValuesValid()) return;
英文:
Updating the UI can only happen during an await.
When the message only appears after the alert then userService.AddOrUpdate() isn't really async. Add a delay to update the screen:
//private async void Save() -- avoid `async void`
private async Task Save()
{
IsLoading = true;
//StateHasChanged(); -- you get this one for free
await Task.Delay(1);
if (!AreFormValuesValid()) return;
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论