如何修复 blazor 下拉 onchange 和绑定问题？答案

【问题标题】：How can I fix blazor dropdown onchange and bind problem?如何修复 blazor 下拉 onchange 和绑定问题？
【发布时间】：2020-05-16 06:05:06
【问题描述】：

我正在尝试学习 blazor。我是 blazor 的全新学习者。假设我在一家公司下保存了一个部门。但现在我想换公司。我有一个部门列表页面，其中有一个编辑按钮。当我单击编辑按钮时，我想加载所选公司的部门名称和公司下拉列表。为了实现这一点，我使用了以下代码，它工作正常。

<div class="row">
<div class="input-group">
    <label class="col-md-3">Department Name</label>
    <div class="col-md-9">
        <input type="text" class="form-control" @bind="department.Name" />
    </div>
</div><br />
<div class="input-group">
    <label class="col-md-3">Company</label>
    <div class="col-md-9">
        <select class="form-control" @bind="@comId">
            @if (company != null && company.Any())
            {
                <option>Select Company</option>

                foreach (var c in company)
                {

                    <option value="@c.Id">@c.Name</option>
                }

            }
            else
            {
                <option>Select Company</option>
            }

        </select>
    </div>
</div><br />
<div class="input-group">
    <div class="col-md-12">
        <input type="button" value="Update" @onclick="UpdateDepartment" class="btn btn-primary pull-right" />
    </div>
</div>

但是当我尝试在<select class="form-control" @bind="@comId" @onchange="SelectCompany"> 添加@onchange 事件时，它会产生错误。那么如何从下拉列表中获取公司的新价值。 blazor 的服务器端代码如下

@code {

[Parameter]
public string id { get; set; }

string baseUrl;
Company[] company;
Department department = new Department();
int SelectedCompanyVal = 0;
int comId = 0;

protected override async Task OnInitializedAsync()
{
    baseUrl = AppSettingsService.GetBaseUrl();
    department = await Http.GetJsonAsync<Department>(baseUrl + "api/Departments/GetDepartment/" + id);
    var url = baseUrl + "api/Companies/GetCompanies";
    company = await Http.GetJsonAsync<Company[]>(url);
    comId = department.CompanyId;
}
protected async Task UpdateDepartment()
{
    department.CompanyId =SelectedCompanyVal;
    await Http.PutJsonAsync(baseUrl + "api/Departments/PutDepartment/" + id, department);
    NavigationManager.NavigateTo("listDepartment");
}
void  SelectCompany(ChangeEventArgs e)
{
    SelectedCompanyVal = Convert.ToInt32(e.Value.ToString());
}
}

【问题讨论】：

我认为使用@bind 是在表面下创建@onchange。所以它应该已经可以在没有额外的 onchange 的情况下工作。
谢谢。我已经删除了@onchange 并对我的代码进行了一些更改，它现在可以正常工作了。

标签： asp.net-core-mvc blazor

【解决方案1】：

好的。我已经更改了一些后端逻辑并删除了 @onchange 方法，现在它对我有用。我的新后端代码是

@code {

[Parameter]
public string id { get; set; }

string baseUrl;
Company[] company;
Department department = new Department();   
int comId = 0;

protected override async Task OnInitializedAsync()
{
    baseUrl = AppSettingsService.GetBaseUrl();
    department = await Http.GetJsonAsync<Department>(baseUrl + "api/Departments/GetDepartment/" + id);
    var url = baseUrl + "api/Companies/GetCompanies";
    company = await Http.GetJsonAsync<Company[]>(url);
    comId = department.CompanyId;
}


protected async Task UpdateDepartment()
{
    department.CompanyId = comId;
    await Http.PutJsonAsync(baseUrl + "api/Departments/PutDepartment/" + id, department);
    NavigationManager.NavigateTo("listDepartment");
}
}

前端和我发布的一样

【讨论】：