如何在 MVC 中动态绑定 html.DropDownList()

Question

我的页面中有一个下拉列表和一个文本框，我想通过更改文本框来更改下拉列表。我使用这样的 JQuery 帖子：

$("#txtBuildId").change(function() { var builddate = $("#txtBuildId").val(); $.post("/UTOverview/Index?builddate=" + builddate); });

我的索引函数是：

public ActionResult Index()
    {
        string buildDate = Request.Params.Get("builddate");
        DataTable tbBuildid = DatabaseService.getBuilidByDate(buildDate);
        List<SelectListItem> list = new List<SelectListItem>();
        foreach (DataRow bd in tbBuildid.Rows as IEnumerable)
        {
            list.Add(new SelectListItem { Text = bd["buildid"].ToString(), Value = bd["buildid"].ToString() });
        }
        ViewData["tbbuildid"] = list;
        return View();
    }

但我发现下拉列表并没有随着 DataView["tbbuildid"] 的变化而变化？为什么？

我尝试通过完整的回发方式来做到这一点，例如：window.location = "/UTOverview/Index?builddate=" + builddate; 它有效。每次我将新的 builddate 发布到方法 index 时，ViewData["tbbuildid"] 都会发生变化。但是我怎样才能通过 Ajax 方式做到这一点？

Answer 1

在你的 Action 方法中，你返回一个视图，但是你有这个视图吗？在这种情况下，我会简单地从 action 方法中返回 Json。

只需从您的 Action 方法返回 Json 并使用它来填充您的下拉菜单。由于您正在进行 Http Post 调用，它会命中您的 HTTPPost Action 方法

[HttpPost]
public ActionResult Index()
{
        string buildDate = Request.Params.Get("builddate");
        DataTable tbBuildid = DatabaseService.getBuilidByDate(buildDate);
        List<SelectListItem> list = new List<SelectListItem>();
        foreach (DataRow bd in tbBuildid.Rows as IEnumerable)
        {
            list.Add(new SelectListItem { Text = bd["buildid"].ToString(), Value = bd["buildid"].ToString() });
        }
        return Json(list);
}

在你的脚本中，

    $("#txtBuildId").change(function () {
        var builddate = $("#txtBuildId").val();
        $.post("@Url.Action("Index","UTOverview")", {builddate:builddate},function(data){
          $.each(data, function() {
                $("#select1").append($("<option />").val(this.Value).text(this.Text));
         });
        }); 
     });

使用Url.Action HTML helper 获取Action 方法的路径始终是一个好习惯，因为MVC 将负责返回到action 方法的正确路径。您无需担心要使用多少个../。

上面的代码经过测试，可以正常工作。

Answer 2

您是否尝试过调试您的 cs 代码并在您的 javascript 代码中添加警报。

尝试这样做，您应该更接近实际问题，并在您的问题中发布这些发现。

Answer 3

jquery .post() 实际上是对服务器的异步调用。它返回一些数据，然后您需要对其进行处理。

如果你只是想通过完整的回发来刷新你的页面，你可以这样做

window.location = "/UTOverview/Index?builddate=" + builddate;

如果您想动态更改下拉菜单的状态，而不需要刷新页面，您需要将回调传递给 .post()，它会根据返回的数据更新您的下拉框。在这种情况下，您不想让它调用您的索引操作，而是用于检索更新数据的特定操作。比如：

$.post("/UTOverview/BuildSelect?builddate=" + builddate, function(data) {
  $('#buildDropDown').html(data);
});

请参阅jQuery.post() 了解更多信息。或者，与其在控制器操作中构造 HTML（这有点禁忌），不如返回一个 Json 结果并将您的下拉列表绑定到此。

在这两种情况下，请注意只有在文本框失去焦点时才会触发 onchange 事件。