下拉框数据的绑定

开发工具与关键技术：Visual Studio ASP.NET MVC

作者：刘剑鸿

撰写时间：2019年5月01日 星期三

                                  下拉框数据的绑定

下拉框的绑定通常都是借用jQuery方式给下拉框追加内容，通过追加内容方式往里面添加内容。其实是借用两个jQuery中的属性：prepend和append，而prepend是向每个匹配的元素内部前置内容。append是向每个匹配的元素内部追加内容。一般在绑定下拉框我们都是使用post异步提交，提交的时候一般下两个参数，一个是URL链接，还有一个是回调函数。回调函数中，首先要做的是清空下拉框的值，所以会用到empty（）。然后使用prepend属性向内部前置内容，下拉框还没有选择数据时，给它一个默认值。简单的说就是还没使用下拉框时，所看到的内容。再然后使用append属性内部追加内容，也就是点开下来框时，所看到的内容，也就是数据库传递过来的。具体代码如下：

    @*下拉框*@

    <label class="control-label">所在班级:</label>

    <select id="SRole" name="RoleID">            

    </select> 

</div>

@*jquery 引用*@

<script src="~/Content/jquery-3.2.1.min.js"></script>

<script>

    $.post("/Select/SelectList", function (jsonData) {

        //清空该元素

        $("#SRole").empty();

        //内部前置内容

        $("#SRole").prepend('<option value="' + 0 + '">' + "--请选择--" + '</option>');

        for (k in jsonData) {

            //内部追加内容

            $("#SRole").append('<option value="' + jsonData[k].id + '">' + jsonData[k].text + '</option>');

        }

    });

之所以会用到for循环，是因为jsonData得到的方法是一个列表，而列表是不能直接给到下拉框。所以会用到一个for in ，遍历整个列表，把每一条遍历出来。通过append获取出特定的ID和特定的名称，绑定到<option value= 这里。

在控制器中，主要是单表查询的代码：

public ActionResult SelectList()

    {

        try

        {

            //使用select和匿名类型返回仅含学院ID、学院名称和学院代码的序列

            var Role= (from dbRole in myEntities.SYS_Role                            

                         select new

                         {

                               id=

dbRole.RoleID,

                               text= dbRole.Role

                         }).ToList();

            return Json(Role, JsonRequestBehavior.AllowGet);

        }

        catch (Exception)

        {

            return Json("failed", JsonRequestBehavior.AllowGet);

        }

    }

该方法返回的Role，也就是jsonData得到列表。

数据库中Role数据为：

所以的到页面效果如下图所示：

一般来说，我们不会在视图里去书写绑定下拉框的代码，都是通过类进行封装。然后直接调用。因为在网页设计会遇到很多个下拉框。代码都是大同小异的。下面是下拉框封装的函数

 function
 createSelect(selectId, url) {

//console.log(defaultValue);

$.post(url, function (jsonData) {

    if (selectId.indexOf('#') != 0) {

        selectId = '#' + selectId;

    }

    $(selectId).empty();//清空该元素

    //内部前置内容

    //创建option

    $(selectId).prepend('<option
     value="' + 0  + '">' + "--请选择--" + '</option>');

    for (k in jsonData) {

        $(selectId).append('<option value="' +jsonData[k].id + '">' + jsonData[k].text+ '</option>');

    }

  });

}