使用minimalect更新DropDownList

时间:2015-05-20 20:42:57

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

好的,所以现在的情况是我使用以下代码填充我的模型的下拉列表

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);
    }

当新选项添加​​到数据库中时,我需要刷新我的下拉列表以获取这些新数据(目前如果我刷新页面,我可以看到新选项)。我正在使用minimalect插件进行下拉。

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

提前感谢您的帮助

1 个答案:

答案 0 :(得分:0)

好的,所以在做了一些研究后,这是我的解决方案,希望它能帮助其他人。有人甚至可能有一个更清洁的解决方案。

我首先创建了一个看起来像这样的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,一旦构建它就会更新selectpicker id上的html。

像魅力一样工作!!!

感谢所有看过这篇文章的人。