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

Posted 2023-03-27

【中文标题】如何在泥浆中突出显示选定的列表项？

【英文标题】：How to highlight selected list item in mud blazor?

【发布时间】：2021-10-29 07:31:21

【问题描述】：

我使用 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 个功能。

当点击一个项目时，它应该被突出显示。

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

如果输入字段已经填充了这个列表中的一个项目，那么如果我们想改变那个值，当你再次打开对话框时，我们应该能够看到已经选择的值应该被突出显示。

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

【参考方案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; 
    //...

【讨论】：

SelectedItem 不能很好地工作，因为它需要 MudListItem 引用。 MudList 中现在有 SelectedValue。您需要做的就是将值放入每个项目的 Value 参数中，请参阅我的答案。

【参考方案2】：

在索引.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/>

【参考方案3】：

我修复了您的代码以在列表中显示选定的值。你可以在这个在线游乐场尝试一下：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;