我正在开发Blazor WebAssembly应用程序,其中我有一个包含两个子组件(Child1Child2)的父组件Father.只有在满足Child 1中的特定条件时才应启用Child2,但我在维护这些组件之间的正确状态时遇到了问题.

Child1中,我有一个自动完成组件MudAutocomplete,在 Select 后,它应该通过在父组件Father中设置状态Model.SuperUser来启用Child2中的某些功能.我已经确保在更新Child1中的状态后调用StateHasChanged(),但即使满足条件Model.SuperUser != nullChild2中的输入也保持禁用状态.

@page "/father"

<Child1 Model="model" />
<Child2 Model="model" />

@code {

    private MyModel model;
    protected override void OnInitialized()
    {
        model = new MyModel();
        base.OnInitialized();
    }


    public class MyModel
    {
        public int? AdminUserId { get; set; }
        public UserDTO? AdminUser { get; set; }

        public int? CustomerUserId { get; set; }
        public UserDTO? CustomerUser { get; set; }

        public int? SuperUserId { get; set; }
        public UserDTO? SuperUser { get; set; }
    }
}

// Child1.razor
<!-- SuperUser -->
<div class="form-group col-6">
    <label class="required" for="SuperUser">@Localizer["SuperUser"]</label>
    <MudAutocomplete T="UserDTO"
                     ResetValueOnEmptyText="true"
                     SearchFunc="@SearchSuperUser"
                     ToStringFunc="@(e => e == null ? null : $"{e.Email}")"
                     ShowProgressIndicator="true"
                     Variant="Variant.Outlined"
                     Clearable="true"
                     Placeholder="@Localizer["PleaseSelectSuperUser"]"
                     OnClearButtonClick="OnSuperUserCleared"
                     ProgressIndicatorColor="Color.Primary"
                     ValueChanged="OnSuperUserValueChanged">
        <NoItemsTemplate>
            <MudList Clickable="false">
                <MudListItem>
                    @Localizer["NoItemsWasFound"]
                </MudListItem>
            </MudList>
        </NoItemsTemplate>
        <BeforeItemsTemplate>
            <MudText Color="Color.Primary" Class="mud-list-item mud-list-item-gutters mud-list-item-clickable mud-ripple">@Localizer["PleaseSelectSuperUser"]</MudText>
        </BeforeItemsTemplate>
        <ProgressIndicatorInPopoverTemplate>
            <MudList Clickable="false">
                <MudListItem>
                    @Localizer["Loading"]
                </MudListItem>
            </MudList>
        </ProgressIndicatorInPopoverTemplate>
    </MudAutocomplete>
    <ValidationMessage For="@(() => Model.SuperUserId)" />
</div>

@code {
    [Parameter][EditorRequired] public MyModel Model { get; set; } = null!;

    private async Task<IEnumerable<UserDTO>> SearchSuperUser(string value)
    {
        var result = await _myService.GetSuperUserFiltered(value);
        if (result != null)
        {
            return result;
        }
        return new List<UserDTO>();

    }

    private void OnSuperUserCleared(MouseEventArgs args)
    {
        Model.SuperUser = null;
        Model.SuperUserId = null;
        StateHasChanged();
    }

    private void OnSuperUserValueChanged(UserDTO value)
    {
        Model.SuperUser = value;
        Model.SuperUserId = value.Id;
        StateHasChanged();
    }
}

// Child2.razor
<!-- AdminUser -->
<div class="form-group col-6">
    <label class="required" for="AdminUser">@Localizer["AdminUser"]</label>
    <MudAutocomplete T="UserDTO"
                     ResetValueOnEmptyText="true"
                     SearchFunc="@SearchAdminUser"
                     ToStringFunc="@(e => e == null ? null : $"{e.Email}")"
                     ShowProgressIndicator="true"
                     Variant="Variant.Outlined"
                     Clearable="true"
                     Placeholder="@Localizer["PleaseSelectAdminUser"]"
                     OnClearButtonClick="OnAdminUserCleared"
                     ProgressIndicatorColor="Color.Primary"
                     ValueChanged="OnAdminUserValueChanged"
                     Disabled="Model.SuperUser == null"> <!-- It should be enabled only id SuperUser is selected -->
        <NoItemsTemplate>
            <MudList Clickable="false">
                <MudListItem>
                    @Localizer["NoItemsWasFound"]
                </MudListItem>
            </MudList>
        </NoItemsTemplate>
        <BeforeItemsTemplate>
            <MudText Color="Color.Primary" Class="mud-list-item mud-list-item-gutters mud-list-item-clickable mud-ripple">@Localizer["PleaseSelectAdminUser"]</MudText>
        </BeforeItemsTemplate>
        <ProgressIndicatorInPopoverTemplate>
            <MudList Clickable="false">
                <MudListItem>
                    @Localizer["Loading"]
                </MudListItem>
            </MudList>
        </ProgressIndicatorInPopoverTemplate>
    </MudAutocomplete>
    <ValidationMessage For="@(() => Model.AdminUserId)" />
</div>

@code {
    [Parameter][EditorRequired] public MyModel Model { get; set; } = null!;

    private async Task<IEnumerable<UserDTO>> SearchAdminUser(string value)
    {
        if (Model.SuperUserId.HasValue && Model.SuperUserId.Value > 0)
        {
            var filter = new { Model.SuperUserId, value };
            var result = await _myService.GetAdminUserBySuperUserFiltered(filter);
            if (result != null)
            {
                return result;
            }
        }
        return new List<UserDTO>();

    }

    private void OnAdminUserCleared(MouseEventArgs args)
    {
        Model.AdminUser = null;
        Model.AdminUserId = null;
        StateHasChanged();
    }

    private void OnAdminUserValueChanged(UserDTO value)
    {
        Model.AdminUser = value;
        Model.AdminUserId = value.Id;
        StateHasChanged();
    }
}

尽管在Child1中正确更新了Model.SuperUser并调用了StateHasChanged(),但Child2中的Disabled="Model.SuperUser == null"条件并未如预期那样启用输入.

关于如何根据Model.SuperUserChild1的状态正确启用/禁用Child2中的输入有任何建议吗?

推荐答案

您可以使用cascading valuesModelParent传递到Childred个元素.然后使用Children内的事件回调将更改传递回Parent.

Here是您提供的代码的修改版本.

Csharp相关问答推荐

EF Core:看不到任何查询日志(log)?

如何注册实现同一接口的多个服务并注入到控制器构造函数中

WPF DataGrid中的三维数据

选取器与.NET Maui MVVM的绑定属性

使页面内容居中

UWP中的任务和界面

如何在C#中使用Postman中的本地IP向本地主机上运行的本地API发出请求

C#阻塞调用或await calling inside calling方法

在使用Audit.NET的AuditTrail实现中,如何逐月将数据摄取到AzureTableStorage?

使用泛型可空类实现接口

用于管理System.Text.Json中的多态反序列化的自定义TypeInfoResolver

该函数不能检测两条曲线的交点

如何管理Azure认证客户端响应和证书 fingerprint

EF核心新验证属性`DeniedValues`和`StringCompison`不起作用

委托RequestDelegate不带2个参数-ASP.NET Core 8最小API

WPF动态设置弹出窗口水平偏移

我应该为C#12中的主构造函数参数创建私有属性吗?

DropDownListFor未显示选定值

无法向Unity注册Microsoft Logger

ASP.NET核心MVC|如何在控制器方法之间传递值