blazor - 如何在泥浆中突出显示选定的列表项？

Question

我使用 MudBlazor 在 Dialog 组件中创建了一个简单的列表。您可以将屏幕截图作为示例。

这是上述对话框组件的代码部分。

    <div class="d-flex">
    <MudButton OnClick="OpenDialog" Variant="Variant.Filled" Color="Color.Primary" Class="mr-2">Edit </MudButton>
    <MudTextField @bind-Value="@paymentTerm" ></MudTextField>
</div>

<MudDialog @bind-IsVisible="visible" >

<DialogContent>
    
        <MudList Clickable="true" Dense="true" DisableGutters="false" >
            @foreach (var pytrm in paymentTermList)
            {
                <MudListItem Text="@pytrm" OnClick="@(()=>{paymentTerm=pytrm;visible=false;})"/>
            }

        </MudList>
   
</DialogContent>

</MudDialog>

@code{
    string paymentTerm;
    private bool visible;
    List<string> paymentTermList = new List<string>() { "Cash", "Credit", "Cheque - Cheque" };

    private void OpenDialog() => visible = true;
}

当我们单击这个列表项时，此对话框将关闭，单击项的文本值将分配给上述输入字段。现在我需要在此列表中添加 3 个功能。

1. 单击一项时，应突出显示。

2. 如果我们想点击另一个项目，当一个项目已经突出显示时，当前突出显示的项目应该被取消突出显示。并且单击的项目应突出显示。

3. 如果输入字段已经填充了此列表中的项目，那么如果我们要更改该值，当您再次打开对话框时，我们应该能够看到已经选择的值应该突出显示。

我如何使用 blazor 或 mudblazor 来做到这一点???任何知道这一点的人请帮助我。感谢您的帮助。

Answer 1

您可以尝试绑定到属性或字段：

<MudList @bind-SelectedItem="SelectedItem" Clickable="true" Dense="true" DisableGutters="false">
    @foreach (var pytrm in paymentTermList)
    {
        <MudListItem Text="@pytrm" OnClick="@(()=>{paymentTerm=pytrm;visible=false;})"/>
    }
</MudList>

@code{
    //...
    private MudListItem SelectedItem { get; set; }
    //...
}

Answer 2

我修复了您的代码以在列表中显示选定的值。您可以在这个在线游乐场尝试：https ://try.mudblazor.com/snippet/wuGPlGvzygPUlypU

这是固定代码：

<div class="d-flex">
    <MudButton OnClick="OpenDialog" Variant="Variant.Filled" Color="Color.Primary" Class="mr-2">Edit </MudButton>
    <MudTextField @bind-Value="@paymentTerm" ></MudTextField>
</div>

<MudDialog @bind-IsVisible="visible" >

<DialogContent>
    
        <MudList Clickable="true" Dense="true" DisableGutters="false" SelectedValue="@paymentTerm" >
            @foreach (var pytrm in paymentTermList)
            {
                <MudListItem Text="@pytrm" Value="@pytrm" OnClick="@(()=>{paymentTerm=pytrm; visible=false;})"/>
            }

        </MudList>
   
</DialogContent>

</MudDialog>

@code{
    string paymentTerm;
    private bool visible;
    List<string> paymentTermList = new List<string>() { "Cash", "Credit", "Cheque - Cheque" };

    private void OpenDialog() => visible = true;
}

Answer 3

在索引.razor

@page "/"

@inject IDialogService Dialog
@inject ISnackbar Snackbar

<div class="d-flex flex-wrap">
    <MudPaper Class="d-flex align-center pa-2 mx-2 my-2">
        <MudGrid>
            <MudItem xs="12" md="8">
                <MudTextField T="string" @bind-Value="PaymentTerm" />
            </MudItem>
        </MudGrid>
        <MudItem xs="12" md="4">
            <MudButton @onclick="@(_ => OpenPaymentTermsDialog(PaymentTerm))">Edit</MudButton>
        </MudItem>
    </MudPaper>
</div>
@code
{
    public string PaymentTerm { get; set; } = string.Empty;

    private async Task OpenPaymentTermsDialog(string paymentTerm)
    {
        var parameters = new DialogParameters { ["paymentTerm"] = paymentTerm };

        var dialog = Dialog.Show<PaymentTermsDialog>("Select payment term", parameters, new DialogOptions() { CloseButton = true, MaxWidth = MaxWidth.Medium });
        var result = await dialog.Result;

        if (!result.Cancelled)
        {
            Snackbar.Add($"{result.Data} selected as payment term", Severity.Success);
        }
    }
}

在PaymentTermsDialog .razor

@inject ISnackbar Snackbar

<MudDialog>
    <DialogContent>
        <MudChipSet @bind-SelectedChip="selected">
            @foreach (var term in PaymentTerms)
            {
                <MudChip Variant="Variant.Outlined" 
                    Text="@term" 
                    Class="@(term == PaymentTerm ? "mud-chip-selected" : "")" 
                    Color="Color.Secondary" OnClick="@(_ => SelectPaymentTerm(term))"/>
            }
        </MudChipSet>
    </DialogContent>
    <DialogActions>
        <MudButton OnClick="Cancel">Cancel</MudButton>
    </DialogActions>
</MudDialog>

@code {
    [CascadingParameter] MudDialogInstance MudDialog { get; set; }

    [Parameter] public string PaymentTerm { get; set; }

    public List<string> PaymentTerms { get; } = new List<string> { "Cash", "Credit", "Cheque - Cheque" };

    MudChip selected;

    void SelectPaymentTerm(string paymentTerm) => MudDialog.Close(DialogResult.Ok(paymentTerm));

    private void Cancel() => MudDialog.Cancel();

在MainLayout .razor

<MudThemeProvider/>
<MudDialogProvider/>
<MudSnackbarProvider/>