c# - Blazor 选定 Row 参数传递

Question

我在这里创建了一个表格，并希望将所选参数传输到标题区域中的组件。

UserList.razor

<RadzenDataGrid Data="@usermodel"
                TItem="Userlistmodel"
                @bind-Value="@selectedUser"
                RowSelect=@RowSelect>
<Columns>
 <RadzenDataGridColumn TItem="Userlistmodel" Property="PNRUID" Title="PNRUID" Width="120px" />
 <RadzenDataGridColumn TItem="Userlistmodel" Property="PNR" Title="PNR" Width="120px" />
 <RadzenDataGridColumn TItem="Userlistmodel" Property="Nachname" Title="Nachname" Width="170px" />
 <RadzenDataGridColumn TItem="Userlistmodel" Property="Vorname" Title="Vorname" Width="170px" />
 <RadzenDataGridColumn TItem="Userlistmodel" Property="Geburtsdatum" Title="Geburtsdatum" /></Columns>
</RadzenDataGrid>

 <RadzenCard Style="margin-bottom:20px">
     User:
     <b>@selectedUser.FirstOrDefault()?.Nachname</b>
 </RadzenCard>

@code{

public IList<Userlistmodel>? selectedUser { get; set; }

void RowSelect( Userlistmodel userlistmodel )
{
    Console.WriteLine( userlistmodel.Nachname );
}
}

我尝试了以下方法来传输标题区域中的数据(Nachname)。仍然缺少一些东西。组件(UserInfo.razor)在 header 区域中实现。

UserInfo.razor

@using LMERP.AppAdmin.Shared.Models.UserMgmt

<div class="col d-flex justify-content-end">
    <h3>Header area</h3>
    <div class="col-1">
        <RadzenIcon Icon="account_box" Class="icon-s icon-outline icon-header-1 hidden-1 mt-header" />
    </div>
    <div class="col-1 pl-2">
        <div class="text div-header-1 hidden-2">
            <b>User:</b>
            @if ( selectedUser?.Any() == true )
            {
                foreach ( var role in selectedUser )
                {
                    <p class="mb-0">@role.Nachname</p>
                }
            }
            else
            {
                <p class="mb-0">Select Name</p>
            }
            </div>
    </div>
</div>

@code {
    [Parameter]
    public string Nachname { get; set; }

    [Parameter]
    public IList<Userlistmodel>? selectedUser { get; set; }

}

它也不适用于 CascadingValue。

Answer 1

您可以通过实现内存中状态容器服务来实现此目的，如 here 中所述。 .

创建一个StateContainer类。

public class StateContainer
{
    private Userlistmodel? _selectedUser;

    public Userlistmodel? SelectedUser
    {
        get => _selectedUser;
        set
        {
            _selectedUser = value;
            NotifyStateChanged();
        }
    }

    public event Action? OnChange;

    private void NotifyStateChanged() => OnChange?.Invoke();
}

在 Program.cs 中注册为单例服务(或范围为 Blazor 服务器端)

builder.Services.AddSingleton<StateContainer>();

内部UserList.razor:

@inject StateContainer State

<RadzenDataGrid Data="@usermodel"
                TItem="Userlistmodel"
                @bind-Value="@selectedUser"
                RowSelect=@RowSelect>
<Columns>
 <RadzenDataGridColumn TItem="Userlistmodel" Property="PNRUID" Title="PNRUID" Width="120px" />
 <RadzenDataGridColumn TItem="Userlistmodel" Property="PNR" Title="PNR" Width="120px" />
 <RadzenDataGridColumn TItem="Userlistmodel" Property="Nachname" Title="Nachname" Width="170px" />
 <RadzenDataGridColumn TItem="Userlistmodel" Property="Vorname" Title="Vorname" Width="170px" />
 <RadzenDataGridColumn TItem="Userlistmodel" Property="Geburtsdatum" Title="Geburtsdatum" /></Columns>
</RadzenDataGrid>

 <RadzenCard Style="margin-bottom:20px">
     User:
     <b>@selectedUser.FirstOrDefault()?.Nachname</b>
 </RadzenCard>

@code{

    public IList<Userlistmodel>? selectedUser { get; set; }

    void RowSelect( Userlistmodel userlistmodel )
    {
        Console.WriteLine( userlistmodel.Nachname );
        State.SelectedUser = userlistmodel;
    }
}

以及UserInfo.razor内

@implements IDisposable
@inject StateContainer State

@if (State.SelectedUser != null)
{
    <p>@State.SelectedUser.Nachname</p>
}

@code {
    protected override void OnInitialized()
    {
        StateContainer.OnChange += StateHasChanged;
    }

    public void Dispose()
    {
        StateContainer.OnChange -= StateHasChanged;
    }
}