Question

如何更新MVC3中的下拉列表。我想用其他视图填充的最新数据填充它，但我不想回发视图并希望用jquery实现它。我有一个下拉列表，如：

@Html.DropDownListFor(m => m.Department, Model.Departments)
@Html.ValidationMessageFor(m => m.Departments)
<input type="button" value="Refresh" id="btnrefresh" />

我编写了jquery代码来调用控制器的方法：

 $("#btnrefresh").click(function () {
 var ref = '@Url.Action("RefreshDepartments")';
 var model = '@Model.ToJson()';
 var data = { empModel: model };
 $.getJSON(ref, data, function (result) { alert(result.message); });
        return false;
    });

以下是控制器方法：

public ActionResult RefreshDepartments(EmployeeModel empModel)
    {
        empModel.Departments = GetDepartments();
        empModel.Roles = GetRoles();
        return Json(new { message = "Updated successfully"}, JsonRequestBehavior.AllowGet);
    }

如何在没有任何回发的情况下点击“刷新”按钮更新带有最新值的下拉列表？将模型传递给控制器并更新模型属性是一个好主意吗？还有什么方法可以吗？

Answer 1

我并不认为您需要将模型发布到您的控制器中以实现您的目的。另外，是的，你绝对可以用jquery做到这一点！另外，您也可以使用Ajax.BeginForm（）辅助方法来完成它，但是让我们来处理你的jquery示例。

您可以简单地调用路径本身，而不是将您的jquery与@ Url.Action复杂化。

$("#btnrefresh").click(function () {
    var ref = 'ControllerName/RefreshDepartments';
    $.each(result, function (index, val) {
        $('#whateverYourRenderedDropdownListHtmlObjectis')
            .append($("<option></option>")
            .attr("value", val.Text)
            .text(val.Text));
    });
});

现在，对于你的控制器......

public JsonResult RefreshDepartments()
{
    return Json(GetDepartments, JsonRequestBehavior.AllowGet);
}

private SelectList GetDepartments
{
    var deparments = GetDepartments;
    SelectList list = new SelectList(departments);
    return list;
}

这是返回模型的替代方法。它允许您操纵原始JSON。希望它有所帮助！

Answer 2

你几乎做到了！你为什么不通过RefreshDepartments动作发送数据，我的意思是列表？您发送了一条消息进行查看，因此您可以类似地发送列表，而不是警告结果，您可以填写下拉列表。像这样的东西：

public ActionResult RefreshDepartments(EmployeeModel empModel)
    {
        return Json(new { departments = GetDepartments()}, JsonRequestBehavior.AllowGet);
    }


$.getJSON(ref, data, function (result) { 
    $("#Department").html("");
    for (var i = 0; i < result.departments.length; i++) {
        var item = result.departments[i];
        $("#Department").append(
              $("<option></option>").val(item.Id).html(item.Name);
        );
    });
});

如何在MVC3中更新没有回发的视图

2 个答案: