下拉框,也就是我们在搭建页面时经常会遇到的< select >标签,select标签通常和一起使用,一个作为下拉框一个则为其中的选择项。但到了自己做项目的时候才发现,< option >标签根本就用不上。在制作页面时,其中大部分的下拉框中的数据都是通过控制器中的Linq小查询方法查询出来的,其中的选项数据在控制器中被获取到后,再通过封装好的方法再绑定到下拉框中供用户查看&选择。以至于手打的option标签根本就用不上,那么如何将查询到的数据成功绑定到下拉框标签当中呢?

如图例,左侧为此次的演示下拉框,右侧则是为它绑定上数据后的效果图:

mysql select的结果作为变量 如何把select结果作为查询_实体类

mysql select的结果作为变量 如何把select结果作为查询_下拉框_02

首先,我们需要定义好绑定下拉框数据的方法,暂且命名为bindingSelect(),该方法有三个参数,分别是(需要绑定的下拉框id值【selectid】,相关的控制器Linq查询方法【url】,设置option的id值【value】),让我们来看看代码结构:

function bindingSelect(selectId, url, value) {
    $.post(url, function (jsonData) {
        if (selectId.indexOf('#') != 0) {
            selectId = '#' + selectId;
      }
        $(selectId).empty();//清空该元素
        for (k in jsonData) {//创建option
$(selectId).append('<option value="' + jsonData[k].id + '">' + jsonData[k].text + '</option>');
      }
        //设置选中值
        if (value != undefined && value != null && value != '') {
            $(selectId).val(value);
        }
    });
}

每个由此方法拼接的选项都有着唯一的选中值&显示值,选中值就相当于是数据库中自段的id值,而显示值即为数据本身,这两个值在控制器的方法中便要查询出来。

在定义好页面的方法后,先不着急写查询方法。在前面提到的选中值(id),以及显示值(text),是通过一个数据接收实体类来获取的,那么我们现在要做的便是先将该实体类定义好,实体类命名为< SelectVo >:

mysql select的结果作为变量 如何把select结果作为查询_mysql select的结果作为变量_03


定义好< SelectVo >后,让我们将目光移到控制器,运用创建好的实体类对查询出来的数据进行处理后再返回至页面中:

//<制单人>下拉框查询
public ActionResult selectZhiDanRen()
{
//查询数据
 List<SelectVo> listZhiDanRen = (from tbEmployee in myMondel.S_Employee
                                join tbEmployeeType in myMondel.S_EmployeeType on tbEmployee.EmployeeTypeID equals tbEmployeeType.EmployeeTypeID
                                select new SelectVo
                                {
                                     //id = 选中值
                                     id = tbEmployee.EmployeeID,
                                     //text = 文本显示值
                                     text = tbEmployeeType.EmployeeType,
                                 }).ToList();
   return Json(listZhiDanRen, JsonRequestBehavior.AllowGet);
}

最后,来到页面这边,调用已定义好的数据绑定方法,在小括号中填入参数:

//绑定"制单人"下拉框
createSelect("ZhiDanRen", "selectZhiDanRen");

绑定后启动项目查看是否成功,上图:

mysql select的结果作为变量 如何把select结果作为查询_数据_04


大功告成!数据绑定成功且无异常。