下拉框绑定并数据回填

最新推荐文章于 2021-09-21 22:49:41 发布

原创最新推荐文章于 2021-09-21 22:49:41 发布 · 476 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何在应用程序中实现下拉框的数据绑定，并详细阐述了选择发车站编码后如何回填对应的站名。通过控制器查询数据，视图中封装下拉框方法进行绑定，以及设置改变事件来完成数据回填的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下拉框绑定并数据回填

本次任务完成时间：2019年07月18日
开发工具与关键技术：Visual  Studio 2015 && 下拉框绑定并数据回填
展示效果：下拉框绑定并数据回填

怎么绑定下拉框数据并进行后面相关数据的回填？本章内容就告诉大家，先看看下面这个例子，是不是你所需要实现的效果

在这里插入图片描述

操作是选择发车站的编码，进行发车站对应选择编码的名称回填；首先去控制器那边查询出下拉框里面的数据，再进行数据绑定；代码如下：

public ActionResult SelectbeginSite()
 {
   var list = from tbLine in myModel.S_Line
join tbSite in myModel.S_Site on tbLine.beginSiteID equals tbSite.SiteID
              select new
                   {
                       id = tbLine.beginSiteID,
                       text = tbSite.SiteCode
                   };
        return Json(list, JsonRequestBehavior.AllowGet);
   }

回到视图，写一个下拉框封装的方法，方便下拉框绑定

function appendOption(id, url) {
  $.getJSON(url, function (data) {
      $("#" + id).empty(); // 清空
      $("#" + id).append('<option value="0">----请选择----</option>');
      $.each(data, function (i) {
      var str = '<option value="' + data[i].id + '">' + data[i].text + '</option>';
      $("#" + id).append(str);
      });
  });
}

接着使用上面的封装方法绑定下拉框数据；
appendOption(“sltbeginSite”, “SelectbeginSite”);
//sltbeginSite:input标签的id； SelectbeginSite：控制器查询的方法
到这一步，发车站的编码下拉框的数据就绑定了，接着就是去控制器查询出需要回填对应编码的发车站名称；

public ActionResult SelectSiteName(int SiteID)
    {
        var List = from tbSite in myModel.S_Site
                   where tbSite.SiteID == SiteID
                   select new
                   {
                       SiteID = tbSite.SiteID,
                       SiteName = tbSite.SiteName
                   };
        return Json(List, JsonRequestBehavior.AllowGet);
    }

查询完数据后，回到视图这边，给它写改变事件，绑定完下拉框，进行数据回填；

$("#sltbeginSite").change(function () {
        var Code = $("#sltbeginSite").val();
        $.post("SelectSiteName", { SiteID: Code }, function (data) {
            Code = data[0].beginSiteID
            $("input[name='sltbeginSiteName']").val(data[0].SiteName);
        })
    });

绑定下拉框数据并进行后面相关数据的回填就完成了。