MVC 核心选择列表在使用模型绑定的 Ajax 调用后填充

问题描述

起初这似乎是一项简单的任务，但现在几个小时后我仍然没有弄清楚这一点。

AddProduct 的第一个 GET 只会填充 ProductCategories，当单击此列表中的项目时，SetSubCats 函数被调用，并将 ID 传递给 AddProduct 控制器方法。这是设置 SubCats 选择列表。我可以看到它们在我的当地人中进行调试。

最后一步只是更新这个选择的选项，而不刷新页面（这会向控制器发送一个 0 作为 ID）。似乎微不足道，但解决方案是在暗指我。我想我没有正确处理服务器的返回。我找到了仅使用 jquery 填充选择的答案，但我想保留模型绑定。

非常感谢任何帮助。

//控制器：

public IActionResult AddProduct(int ID)
        {
            AddProductVM model = new AddProductVM();
            model.ProductCategories = new SelectList(productService.GetAllProductCategories(),"ID","Name");
            model.SubCategories = new SelectList(productService.getSubCatsByMainCatID(ID),"Name");
            return View(model);
        }

//视图的选择：

<fieldset class="form-group">
        <label class="badge-light" asp-for="ProductCategories">@Localizer["Product category"]</label>
        @if (Model.ProductCategories != null)
        {
            <select size="@Model.ProductCategories.Count()" class="form-control slctCat" asp-for="Product.Category" asp-items="@Model.ProductCategories">
            </select>
        }
        <span class="text-info">@Localizer["Select the main category this product belongs to"]</span>
        <span class="text-danger">@Html.ValidationMessageFor(m => m.Product.Category)</span>
    </fieldset>

    <fieldset class="form-group" >
        <label class="badge-light" asp-for="SubCategories">@Localizer["Product sub category"]</label>
        @if (Model.SubCategories != null)
        {
            <select size="@Model.SubCategories.Count()" class="form-control" id="slctSubCats" asp-for="Product.SubCategory" asp-items="@Model.SubCategories">
            </select>
        }
        <span class="text-info hide">@Localizer["Select the sub category this product belongs to"]</span>
        <span class="text-danger">@Html.ValidationMessageFor(m => m.Product.SubCategory)</span>
    </fieldset>

//ajax调用：

const SetSubCats = (e) => {
    console.log($(e.currentTarget).val());
    var ID = $(e.currentTarget).val();
    $.ajax({
        url: '/ShopkeeperDashboard/AddProduct',type: "GET",dataType: 'json',data: { ID: ID },success: function (data,status,jqXHR) {

        },error: function (jqXHR,err) {

        },complete: function (jqXHR,status) {
            //What to do here so only the #slctSubCats gets loaded? 
        }
    });

解决方法

首先，您必须创建一个包含所有选择的部分视图， 例如“_Selects.cshtml”

在您的主视图中，您可以通过部分视图替换您选择的 html：

<div id="selects">
 <partial name="_Selects" />
</div>

此后，您必须从您在 AJax 中调用的操作返回部分视图：

public IActionResult GetSelects(int ID)
        {
            var model = new AddProductVM();
            model.ProductCategories = new SelectList(productService.GetAllProductCategories(),"ID","Name");
            model.SubCategories = new SelectList(productService.getSubCatsByMainCatID(ID),"Name");
            return PartialView("_Selects",model);
        }

还有你的 ajax：

const SetSubCats = (e) => {
    console.log($(e.currentTarget).val());
    var ID = $(e.currentTarget).val();
    $.ajax({
        url: '/ShopkeeperDashboard/GetSelects/'+ID,type: "GET",success: function (result,status,jqXHR) {

          $("#selects").html(result);
        },error: function (jqXHR,err) {

        },complete: function (jqXHR,status) {
            //What to do here so only the #slctSubCats gets loaded? 
        }
    });

,

感谢 Sergey 的部分视图提示！

最终代码：

//在表单中保留空字段集

<fieldset class="form-group" id="selectSubCats"></fieldset>

//Ajax 调用的方法返回partialView

public IActionResult SetSubCats(int ID)
        {
            IEnumerable<SubCategories> subCats = productService.getSubCatsByMainCatID(ID);
            AddProductVM model = new AddProductVM();
            model.SubCategories = new SelectList(subCats,"Name");
            return PartialView("_SelectedSubCats",model);
        }

//最重要的是使用调用的返回结果

const SetSubCats = (e) => {
    console.log($(e.currentTarget).val());
    var ID = $(e.currentTarget).val();
    $.ajax({
        url: '/ShopkeeperDashboard/SetSubCats',dataType: 'html',data: { ID: ID },success: function (result) {
            $('#selectSubCats').html(result);
        },complete: function (result) {            
        }
    });    
}