-->

如何在MVC动态绑定html.DropDownList()(How to dynamic bind

2019-09-16 10:16发布

我有一个下拉列表,在我的页面上的文本框,我想改变与文本框变化下拉列表。 我使用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();
    }

但我发现,下拉列表并没有随着数据视图[“tbbuildid”]的变化而变化? 为什么呢?

我试着通过完全回发的方式一样做到这一点: window.location = "/UTOverview/Index?builddate=" + builddate; 有用。 计算机[“tbbuildid”]改变我每次发布新的创建日期的方法index.But时候我怎么能做到这一点通过Ajax的方式?

Answer 1:

在你的操作方法,则需要返回查看,但你有这样的看法? 在这种情况下,我会简单地从操作方法返回JSON。

只是返回Json从您的操作方法,并用它来填充你的dropdow。 既然你正在一个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辅助去操作方法的路径MVC将采取正确的路径返回操作方法的照顾。 你不需要担心多少../使用。

上面的代码进行测试,它会正常工作。



Answer 2:

你尝试调试你的CS代码,并在你的JavaScript代码添加警报。

尝试做这些,你应该得到更接近实际的问题,你的问题也发表了这些发现。



Answer 3:

jQuery的。员额()实际上是对服务器的异步调用。 它返回一些数据,然后需要做的东西。

如果你只是想通过一个完整的回发刷新页面,你可以做

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

如果要动态地修改你下拉的状态,不需要刷新页面,你将需要传递一个回调。员额(),它更新您的下拉根据返回的数据框。 在这种情况下,你不想拥有它打电话给你的指标作用,但具体的行动检索更新的数据。 一些诸如:

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

见jQuery.post()获取更多信息。 或者,而不是构建在控制器动作的HTML,这是一个有点没有没有,返回一个JSON结果和你降下来绑定到这一点。

在这两种情况下,要注意的是,当文本框失去焦点监听onchange事件才会触发。



文章来源: How to dynamic bind html.DropDownList() in MVC