asp.net-core-mvc - 如何修复 blazor 下拉 onchange 和绑定问题?
问题描述
我正在尝试学习 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>
但是当我试图在它添加@onchange 事件时 <select class="form-control" @bind="@comId" @onchange="SelectCompany">
会产生错误。那么如何从下拉列表中获取公司的新价值。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());
}
}
解决方案
行。我已经更改了一些后端逻辑并删除了 @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");
}
}
前端和我发布的一样
推荐阅读
- vue.js - Vue,js 显示来自 json 的数据
- mysql - 从机架空间导出更大尺寸的数据库
- android - 是否可以在 Android Studio 中使用材质调色板?
- php - 如何在用户模型中使用“Jenssegers\Mongodb” - Laravel 5.5
- xamarin - Xamarin.Forms - 将两个流加入单个流
- python - Django表单返回空白到下一个模板
- php - 验证 simple-php-captcha() 输入
- javascript - 从 url 拆分文本
- maven - 从flyway maven插件中的jar迁移
- c# - 为什么堆中的FREE块这么大