在 Blazor Webassembly 版本 5 中：
我有一個for回圈遍歷資料項以顯示它們，并且用戶應該能夠通過單擊來選擇這些項。實作這一目標的最佳方法是什么？我想選擇選定的PersonItem但取消選擇其他組件。問題在于取消選擇其他人。
PersonItem.Razor：
@if (Person!= null)
{
<div @onclick="InvokeOnClick" style="@GetStyle()">@Person.Name</div>
}
@code {
[Parameter] public PersonPerson { get; set; } = null;
[Parameter] public bool IsSelected { get; set; }=false;
[Parameter] public EventCallback<Person> OnClick { get; set; }
private string GetStyle() => IsSelected ? "cursor:default;color:blue" : "cursor:pointer";
protected override Task OnParametersSetAsync()
{
StateHasChanged();
return base.OnParametersSetAsync();
}
private async Task InvokeOnClick()
{
IsSelected = true;
await OnClick.InvokeAsync(Person);
}
}
MyPage.razor ：
@inject IPersonRepo personRepo;
@if (PersonList !)
{
foreach (var person in PersonList)
{
<PersonItem Person="@person"></PersonItem>
}
}
else
{
<div>Not Yet!</div>
}
@code {
public List<Person>? PersonList { get; set; } = null;
protected async override Task OnInitializedAsync()
{
await GetAllPersons(null);
await base.OnInitializedAsync();
}
public async Task GetAllPersons(EventArgs e)
{
PersonList = await personRepo.GetAllPersons();
}
}
uj5u.com熱心網友回復：
您已經擁有了大部分成分。使用 OnCLick 和 IsSelected 時滿足要求：
foreach (var person in PersonList)
{
<PersonItem Person="@person"
OnClick="SelectPerson"
IsSelected="person==selectedPerson" />
}
并在@code中：
Person selectedPerson = null;
void SelectPerson(Person person)
{
selectedPerson = person;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/343450.html
標籤：C＃ asp.net核心 西装外套 blazor-webassembly
上一篇：如何使用郵遞員發出POST請求？
下一篇：帶有Razor頁面的Ajax帖子