如何解决在ASP Core MVC中发布后如何在层叠selectList中获取项目
我有一个国家/省/市的级联列表，它在创建和编辑操作中工作正常，除了一件事，它在编辑获取中始终为空，这是我的代码：
public class LocationController : Controller
{
public List<Country> countries = new List<Country>
{
new Country(){Id=1,Name="Country1"},new Country(){Id=2,Name="Country2"}
};
public List<Province> provinces = new List<Province>()
{
new Province() { Id = 1,CountryId = 1,Name = "Province1"},new Province() { Id = 2,CountryId = 2,Name = "Province2"},};
public List<City> cities = new List<City>()
{
new City() { Id = 1,ProvinceId = 1,Name = "City1" },new City() { Id = 2,ProvinceId = 2,Name = "City2" },new City() { Id = 3,Name = "City3" },};
public IActionResult Province(int value)
{
var l = provinces.Where(x => x.CountryId == value).ToList();
return Json(l);
}
public IActionResult City(int value)
{
var c = cities.Where(c => c.ProvinceId == value).ToList();
return Json(c);
}
}
“编辑”视图：
<div class="form-group row">
<div class="col-2">
<label asp-for="Country" class="col-form-label"></label>
</div>
<div class="col-sm-5">
<select id="CountryList" asp-for="Country" asp-items="@new LocationController().countries.Select(c=> new SelectListItem() {Text=c.Name,Value=c.Id.ToString() }).ToList() as IEnumerable<SelectListItem>" class="form-control">
<option selected disabled value="">--- Choose ---</option>
</select>
</div>
</div>
<div class="form-group row">
<div class="col-2">
<label asp-for="Province" class="col-form-label"></label>
</div>
<div class="col-sm-5">
<select id="ProvinceList" asp-for="Province" data-url="@Url.Action("Province","Location")" class="form-control">
<option selected disabled value="">--- Choose ---</option>
</select>
</div>
</div>
<div class="form-group row">
<div class="col-2">
<label asp-for="City" class="col-form-label"></label>
</div>
<div class="col-sm-5">
<select id="CityList" asp-for="City" data-url="@Url.Action("City","Location")" class="form-control">
<option selected disabled value="">--- Choose ---</option>
</select>
</div>
</div>
这是Javascript：
@section Scripts {
<script>
$(function () {
$("#CountryList").change(function () {
$("#CityList").empty();
var v = $(this).val();
var url = $("#ProvinceList").data("url") + '?value=' + v;
$.getJSON(url,function (data) {
$("#ProvinceList").empty();
$("#ProvinceList").append('<option selected disabled value="">--- Choose ---</option>');
$.each(data,function (i,item) {
$("#ProvinceList")
.append($("<option>").text(item.name).val(item.id));
});
});
});
$("#ProvinceList").change(function () {
var v = $(this).val();
var url = $("#CityList").data("url") + '?value=' + v;
$.getJSON(url,function (data) {
$("#CityList").empty();
$("#CityList").append('<option selected disabled value="">--- Choose ---</option>');
$.each(data,item) {
$("#CityList")
.append($("<option>").text(item.name).val(item.id));
});
});
});
});
$('#formId').submit(function () {
$('#CountryList option').val(function () {
return $(this).text();
});
$('#ProvinceList option').val(function () {
return $(this).text();
});
$('#CityList option').val(function () {
return $(this).text();
});
});
</script>
}
当然，在get操作中，我尝试从数据库中获取用户的位置，并在get中工作：
[HttpGet]
public async Task<IActionResult> Edit(string id)
{
var user = await _userManager.FindByIdAsync(id);
EditUserViewModel modelVM = new EditUserViewModel
{
Country = user.Country,Region = user.Region,City = user.City,};
return View(modelVM);
}
但是在视图中，省/地区和城市为空：
如果我单击“更新”，则省份和城市将为空。
解决方法
以下是有关如何将所选项目传递到动作的有效演示：
型号：
new更新：
似乎您要编辑一个用户，并且编辑视图将显示该用户的默认城市，省份和国家/地区。因此，我认为您的js在编辑视图中是不需要的。
这是一个工作示例，如下所示：
型号：
public class Country
{
public int Id { get; set; }
public string Name { get; set; }
}
public class Province
{
public int Id { get; set; }
public string Name { get; set; }
public int CountryId { get; set; }
}
public class City
{
public int Id { get; set; }
public string Name { get; set; }
public int ProvinceId { get; set; }
}
Index.cshtml（显示用户数据）：
public class UserProfile
{
public string Id { get; set; }
public string City { get; set; }
public string Country { get; set; }
public string Province { get; set; }
}
public class EditUserViewModel
{
public string City { get; set; }
public string Country { get; set; }
public string Province { get; set; }
}
Edit.cshtml：
@model IEnumerable<UserProfile>
<table>
<thead>
<tr>
<th>
@Html.DisplayNameFor(model => model.Country)
</th>
<th>
@Html.DisplayNameFor(model => model.Province)
</th>
<th>
@Html.DisplayNameFor(model => model.City)
</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.Country)
</td>
<td>
@Html.DisplayFor(modelItem => item.Province)
</td>
<td>
@Html.DisplayFor(modelItem => item.City)
</td>
<td>
<a asp-action="Edit" asp-route-id="@item.Id">Edit</a>
</td>
</tr>
}
</tbody>
</table>
HomeController：
@model EditUserViewModel
<form id="formId" asp-controller="Location" asp-action="Edit">
<div class="form-group row">
<div class="col-2">
<label asp-for="Country" class="col-form-label"></label>
</div>
<div class="col-sm-5">
//change here....
<select id="CountryList" asp-for="Country" asp-items="@ViewBag.Country" class="form-control">
<option selected disabled value="">--- Choose ---</option>
</select>
</div>
</div>
<div class="form-group row">
<div class="col-2">
<label asp-for="Province" class="col-form-label"></label>
</div>
<div class="col-sm-5">
//change here....
<select id="ProvinceList" asp-for="Province" asp-items="@ViewBag.Province" data-url="@Url.Action("Province","Location")" class="form-control">
<option selected disabled value="">--- Choose ---</option>
</select>
</div>
</div>
<div class="form-group row">
<div class="col-2">
<label asp-for="City" class="col-form-label"></label>
</div>
<div class="col-sm-5">
//change here....
<select id="CityList" asp-for="City" asp-items="@ViewBag.City" data-url="@Url.Action("City","Location")" class="form-control">
<option selected disabled value="">--- Choose ---</option>
</select>
</div>
</div>
<input type="submit" value="aaa" />
</form>
@section Scripts
{
<script>
$(function () {
$("#CountryList").change(function () {
$("#CityList").empty();
var v = $(this).val();
var url = $("#ProvinceList").data("url") + '?value=' + v;
$.getJSON(url,function (data) {
$("#ProvinceList").empty();
$("#ProvinceList").append('<option selected disabled value="">--- اختر ---</option>');
$.each(data,function (i,item) {
$("#ProvinceList")
.append($("<option>").text(item.name).val(item.id));
});
});
});
$("#ProvinceList").change(function () {
var v = $(this).val();
var url = $("#CityList").data("url") + '?value=' + v;
$.getJSON(url,function (data) {
$("#CityList").empty();
$("#CityList").append('<option selected disabled value="">--- اختر ---</option>');
$.each(data,item) {
$("#CityList")
.append($("<option>").text(item.name).val(item.id));
});
});
});
});
$('#formId').submit(function () {
$('#CountryList option').val(function () {
return $(this).text();
});
$('#ProvinceList option').val(function () {
return $(this).text();
});
$('#CityList option').val(function () {
return $(this).text();
});
});
</script>
}
结果：
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。