时间戳

首页 > 解决方案 > 如何在 Blazor 中获得级联值？

forms - 如何在 Blazor 中获得级联值？

问题描述

我有一个表单，用户首先在下拉列表中选择一家公司，然后基于此他们可以从下拉列表中选择一个项目。从数据库中查询的项目是基于用户和公司的。

我曾尝试关注有关 cascadingdropdownlist 的较早帖子：https ://www.mikesdotnetting.com/article/320/improved-cascading-dropdowns-with-blazor但这相当旧，并且似乎与当前文档有很大不同。去年，Blazor 发生了很多事情。在阅读当前的 Blazor 官方文档（https://docs.microsoft.com/en-us/aspnet/core/blazor/components?view=aspnetcore-3.0#cascading-values-and-parameters）时，我看到他们有一个“ HTML”-tag 称为“CascadingValue”，这对我来说是正确的方法吗？如果是这样，有人可以给我看一个如何做到这一点的例子吗？

<EditForm Model="@expense" Context="formContext" OnValidSubmit="@HandleValidSubmit">
                    <DataAnnotationsValidator />
                    <ValidationSummary />
<div style="float:left;width: 40%;">
                        <label asp-for="Client" class="control-label">Selskap</label>
                        <select asp-for="Client" class="form-control" @bind="@expense.Client">
                            <option></option>

                            @foreach (var ExpClient in cList)
                            {
                                <option selected="selected">
                                    @ExpClient.client
                                </option>
                                <option value="@ExpClient.client">@ExpClient.client</option>
                            }
                        </select>
                    </div>
                    <div style="clear:both;">&nbsp;</div>
                    <div style="float:left;width: 50%;">
                        <label asp-for="Project" class="control-label">Prosjekt</label>
                        <select asp-for="Project" class="form-control" @bind="@expense.Project">
                            <option></option>
                            @foreach (var ExpPro in ProList)
                            {
                                <option selected="selected">
                                    @ExpPro.Project
                                </option>
                                <option value="@ExpPro.Project">@ExpPro.Project</option>
                            }
                        </select>
                    </div>
</EditForm>

@code{

protected void GetExpProList()
    {
               ProList = objexpense.GetExpProList(userN).ToList();
    }
}

现在它只根据用户名获取项目，这是可行的，但我还需要获取选定的客户端，以便将 usernN 和客户端都传递给查询数据库的方法。

如果有人能在这里指出我正确的方向，我将不胜感激。

编辑：我的解决方案最终看起来像这样，基于我在这里得到的答案并且还受到 Mikesdotnetting 的影响（https://www.mikesdotnetting.com/article/320/improved-cascading-dropdowns-with-blazor）：

        <InputSelect id="Client" class="form-control" @bind-Value="@expense.Client">
                        <option value=@(0)></option>

                        @foreach (var ExpClient in cList)
                {

                        <option value="@ExpClient.client">@ExpClient.client</option>
                }
                    </InputSelect>
                </div>
                @if (expense.Client != default ){
                <div style="clear:both;">&nbsp;</div>
                <div style="float:left;width: 50%;">

                    <label id="Project" class="control-label">Prosjekt</label>
                    <InputSelect id="Project" class="form-control" @bind-Value="@expense.Project">
                        <option value=@(0)></option>
                        @foreach (var ExpPro in objexpense.GetExpProList(userN,expense.Client).ToList())
                {

                        <option value="@ExpPro.Project">@ExpPro.Project</option>
                }
                    </InputSelect>
                </div>
                }

标签： formsblazorcascadingdropdown

解决方案

有一个名为 的组件InputSelect，您可以将值绑定到该组件。

<InputSelect @bind-Value="selectedClient" class="form-control">
    @foreach (var ExpClient in cList)
    {
        <option value="@ExpClient.client">@ExpClient.client</option>
    }
</InputSelect>

对于第二个下拉菜单，如下所示：

<InputSelect @bind-Value="selectedProject" class="form-control">
    @foreach (var ExpPro in objexpense.GetExpProList(userN, selectedClient).ToList())
    {
        <option value="@ExpPro.Project">@ExpPro.Project</option>
    }
</InputSelect>

推荐阅读