时间戳

首页 > 解决方案 > 在使用模型绑定进行 Ajax 调用后填充的 MVC 核心选择列表

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

问题描述

起初这似乎是一件容易的事，但现在几个小时后我仍然没有弄清楚这一点。

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), "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, status, err) {

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

标签： c#ajaxasp.net-mvcmodel-bindingselectlist

解决方案

首先，您必须创建一个包含所有选择的局部视图，例如“_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), "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, status, err) {

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

推荐阅读