使用最小化更新 DropDownList答案

【问题标题】：Updating DropDownList using minimalect使用最小化更新 DropDownList
【发布时间】：2015-05-20 20:42:56
【问题描述】：

好的，所以目前我正在使用以下代码从我的模型中填充一个下拉列表

ViewBag.LeaseCompanyID = new SelectList(ContractModelEntity.system_supplier.Where(x => x.Type == "Lease"), "CompanyID", "Name", data.LeaseCompanyID);

这很好用，但是在我的表单上，我在下拉列表旁边有一个按钮，它使用 ajax 和模式弹出窗口在数据库中添加了另一个选项。

控制器代码在这里

[HttpPost]
    public JsonResult AddSupplier([Bind(Include="Name,Type")] system_supplier data)
    {
        if (ModelState.IsValid)
        {
            ContractModelEntity.system_supplier.Add(data);
            ContractModelEntity.SaveChanges();
            return Json(0, JsonRequestBehavior.AllowGet);
        }
        return Json(1, JsonRequestBehavior.AllowGet);
    }

当新选项添加到数据库中时，我需要刷新我的下拉列表以获取这些新数据（目前，如果我刷新页面，我可以看到新选项）。我正在为下拉菜单使用最小化插件。

有没有人知道更新这个最小列表的方法，必须有一种方法通过返回一些 JSON 数据的 ajax 调用来构建列表。

提前感谢您的帮助

【问题讨论】：

标签： javascript jquery asp.net ajax asp.net-mvc

【解决方案1】：

好的，经过一番研究，这里是我的解决方案，希望它可以帮助其他人。有人甚至可能有更清洁的解决方案。

我首先创建了一个 jsonresult 控制器方法，看起来像这样

[HttpGet]
    public JsonResult RetreiveSuppliers(string contractType)
    {
        var supplierData = ContractModelEntity.system_supplier.Where(x => x.Type == contractType);
        var result = new List<object>();
        foreach (var x in supplierData)
        {
            result.Add(new { Id = x.CompanyID, Name = x.Name });
        }
        return Json(result, JsonRequestBehavior.AllowGet);
    }

这让我从数据库中获取了数据。然后我在页面上创建了一个 javascript，看起来像这样

$("body").on("click", "#btn_InsertNewSupplier", function () {
        var supForm = $("#addSupData");
        $.ajax({
            url: "@Url.Action("AddLeaseSupplier", "Contract")",
            data: supForm.serialize(),
            type: "POST",
            success: function (result) {
                if (result === 0) {
                    var inst = $.remodal.lookup[$('[data-remodal-id=modal_AddSupplier]').data('remodal')];
                    inst.close();
                    NotificationAlert("success", "New Supplier Created");
                    GetNewSupplierList();
                } else {
                    NotificationAlert("error", "Failed Adding New Supplier");
                }
            }
        });
    });

    function GetNewSupplierList() {
        var actionurl = "@Url.Action("RetreiveSuppliers", "Contract", new { contractType = "Lease"})";
        $.getJSON(actionurl, tempdata);
    }

    function tempdata(response) {
        if (response != null) {
            var html = "";
            for (var i = 0; i < response.length; i++) {
                html += '<option value="' + response[i].Id + '">' + response[i].Name + '</option>';
            }
            $("#LeaseCompanyID").html(html);
        }
    }

因此，一旦 ajax 调用成功，它将触发 GetNewSupplierList 函数，该函数调用我的控制器方法并返回一些 JSON 数据。一旦返回，它就会调用 tempdata，它为我的选择选择器构建新的 HTML，一旦构建它就会更新选择选择器 id 上的 html。

像魅力一样工作！！！

感谢所有查看此帖子的人。

【讨论】：