在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>
}

结果：