如何在 Blazor 中获得级联值?
How can I get a cascading value in Blazor?
我有一个表单,其中用户首先 select 在下拉列表中选择一家公司,然后基于此他们可以从下拉列表中 select 一个项目。从数据库中查询的项目是基于用户和公司的。
我试图遵循一个较早的 post 关于级联下拉列表:https://www.mikesdotnetting.com/article/320/improved-cascading-dropdowns-with-blazor but this is rather old, and seems quite different from the current documentation. A lot has happened with Blazor in the last year. In reading the current official Blazor documentation (https://docs.microsoft.com/en-us/aspnet/core/blazor/components?view=aspnetcore-3.0#cascading-values-and-parameters)我看到他们有一个名为 "CascadingValue" 的 "HTML" 标签,这是正确的方法吗为我前进?如果可以,有人可以给我举一个如何做到这一点的例子吗?
<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;"> </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();
}
}
现在它只能根据用户名获取项目,这可行,但我
还需要获取selected client,这样usernN和client都传递给查询DB的方法。
如果有人能在这里指出正确的方向,我将不胜感激。
编辑:
根据我在此处获得的答案以及受 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;"> </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>
}
有一个名为 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>
我有一个表单,其中用户首先 select 在下拉列表中选择一家公司,然后基于此他们可以从下拉列表中 select 一个项目。从数据库中查询的项目是基于用户和公司的。
我试图遵循一个较早的 post 关于级联下拉列表:https://www.mikesdotnetting.com/article/320/improved-cascading-dropdowns-with-blazor but this is rather old, and seems quite different from the current documentation. A lot has happened with Blazor in the last year. In reading the current official Blazor documentation (https://docs.microsoft.com/en-us/aspnet/core/blazor/components?view=aspnetcore-3.0#cascading-values-and-parameters)我看到他们有一个名为 "CascadingValue" 的 "HTML" 标签,这是正确的方法吗为我前进?如果可以,有人可以给我举一个如何做到这一点的例子吗?
<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;"> </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();
}
}
现在它只能根据用户名获取项目,这可行,但我 还需要获取selected client,这样usernN和client都传递给查询DB的方法。
如果有人能在这里指出正确的方向,我将不胜感激。
编辑: 根据我在此处获得的答案以及受 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;"> </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>
}
有一个名为 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>