jquery - 如何在asp.net mvc3中重新加载下拉列表值而不刷新页面

Question

我正在开发一个与数据库交互的 MVC3 应用程序。我正在使用表单来创建实体，其中一个属性依赖于另一个表。为了确保引用完整性，我填充一个下拉列表来限制用户，如下所示:

var processGroups = repository.getAllProcessGroups();
ViewBag.processGroup_drpdwn = new SelectList(processGroups, "process_group_id", "process_group_name");
return View(); //this is my Creation view

然后，在我的 View 中，我将下拉列表显示为

<div class="editor-field">
        @Html.DropDownList("groups", (SelectList)ViewBag.processGroup_drpdwn, new { id = "groupsList" })
         @Html.ActionLink("Add", "AddGroup", null, new { @class = "addGroupLink" })

    </div>

为了让用户更轻松，我实现了 modal dialog使用 jQuery，它允许用户向数据库添加选项，而无需离开表单在另一个页面上输入它。这一切都工作正常，我的 Controller 返回部分 View ，验证内容并将其发布到数据库。不幸的是，用户必须刷新页面才能将新选项从数据库加载到下拉列表中。

我尝试在插入后使用 JSON 和 JQuery 更新下拉列表，但由于某种原因它不起作用。

其他信息:

这是模态形式的相关部分:

@using (Ajax.BeginForm("AddGroup", "Process", null,
    new AjaxOptions
    {
        UpdateTargetId = "update-message",
        InsertionMode = InsertionMode.Replace,
        HttpMethod = "POST",
        OnSuccess = "updateSuccess"
    }, new { @id = "addGroupForm" }))

这是一个以 JSON 列表形式返回组的方法:

[AcceptVerbs(HttpVerbs.Post)]
    public ActionResult ShowGroups()
    {
        var groups = repository.getAllProcessGroups();
        List<SelectListItem> list=new List<SelectListItem>();
        foreach (PROCESS_GROUP p in groups)
        {
            list.Add(new SelectListItem() { Value = p.PROCESS_GROUP_ID.ToString(), Text = p.PROCESS_GROUP_NAME });
        }
        return Json(list,JsonRequestBehavior.AllowGet);
    }

这是插入我的数据后运行的 jQuery 代码片段:

function loadGroups() {
    alert();
    $.getJSON("/Process/ShowGroups", null, function (data) {
        var selectList = $("#groupsList");
        selectList.empty();
        $.each(data, function (index, optionData) {
            var option = $('<option>').text(optionData.Text).val(optionData.Value);
            selectList.append(option);
        });
    });
}
function updateSuccess() {
    if ($("#update-message").html() == "True") {

        loadGroups();
        $('#updateDialog').dialog('close');
        //twitter type notification
        $('#commonMessage').html("Successfully Added");
        $('#commonMessage').delay(400).slideDown(400).delay(3000).slideUp(400);

    }
    else {
        $("#update-message").show();
    }
    }

loadGroups() 开始，但没有任何反应。我也没有收到任何错误消息来解释出了什么问题。

更新:

现在可以工作了。我必须从操作中删除 [AcceptVerbs(HttpVerbs.Post)]

Answer 1

$("#mydropdown").change(function () {
    // let's assume /list page prints a JSON string
    $.getJSON('/list', function (data) {
       var result = '';
       for (var i = 0, iL = data.length; i < iL; i++) {
           result += '<option value="' + data[i].value + '">' + data[i].text + '</option>';
       }
       $("#otherdropdown").html( result );
    });
});

这只是一种选择...使用您的逻辑并使其适应您的系统。是啊!