Question

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

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

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

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

    </div>

为了方便用户，我使用jQuery实现了modal dialog，允许用户向数据库添加选项，而不必离开表单将其输入到另一页面。这一切都运行正常，我的Controller返回局部视图，验证东西并将其发布到数据库。不幸的是，用户必须刷新新选项的页面才能从db加载到下拉列表中。

我正在尝试在插入后使用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()开始但没有任何反应。我也没有得到任何错误消息来解释出错的地方。

更新

立即行动。我必须从Action

中删除[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 );
    });
});

这只是一个选项...使用您的逻辑并使其适应您的系统。 C ya！

Answer 2

您可以执行一个返回更新列表的操作（如html或json）。在updateSuccess函数中使用jQuery的ajax函数调用该操作。

Answer 3

在提交AJAX表单时，尝试使用firebug来检查通过AJAX返回的内容。

然后你需要在updateSuccess()函数中添加一个变量来访问返回数据，如下所示：

function updateSuccess(ajaxResult) {
     $("#update-message").html(ajaxResult.SomeValue); //example
}

请注意，根据数据的形成方式，您需要更改上述函数中的实现。

如何在没有刷新页面的情况下重新加载asp.net mvc3中的下拉列表值

3 个答案: