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发布到方法索引时，ViewData [“tbbuildid”]都会改变。但是我怎么能用Ajax方式做到这一点？

Answer 1

在您的Action方法中，您将返回一个视图，但是您有一个视图吗？在这种情况下，我只是从action方法返回Json。

只需从Action方法返回Json，然后使用它填充您的下拉菜单。由于您正在进行Http Post呼叫，它将点击您的HTTPPost动作方法

[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帮助程序获取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事件。

如何在MVC中动态绑定html.DropDownList（）

3 个答案: