如何实现下拉框的绑定

开发工具与关键技术：Visual Studio、MVC
作者：幻奏
撰写时间：2019.7.5
           

下拉框你们都见过吧，下拉框的作用是方便用户更快的输入，同时也限制了用户，再也不怕用户乱写啦。

下拉框我们该如何绑定呢，这个我们先从它的html开始，先来了解一下证件类型下拉框的HTML的是如何写的吧！

<div class="form-group form-row m-0">
                                        <label class="col-form-label col-lg-5">证件类型:</label>
                                        <div class="col-lg-6">
                                            <select class="form-control" id="PapersType" name="PapersType" style="height:30px;width:100px;padding: 0;"></select>
                                        </div>
                                    </div>
           

我们HTML就这样了，我们再封装一下js的方法，然后引入到你的项目里面。

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

然后我们再写一个实体类，存储我们查询到的数据。

public class SelectVo
    {
        /// <summary>
        /// 选中值
        /// </summary>
        public int id { get; set; }
        /// <summary>
        /// 显示值
        /// </summary>
        public string text { get; set; }
    }
           

我们还需要一个实体类拼接“请选择”。

public class Tools
    {
        public static List<SelectVo> SetSelectJson (List<SelectVo> select)
        {
            //创建列表对象
            List<SelectVo> list = new List<SelectVo>();
            //创建实体对象
            SelectVo SelectVo = new SelectVo
            {
                id = 0,
                text = "请选择"
            };
            //将实体对象添加到对象列表
            list.Add(SelectVo);
            //将数据集添加到对象列表
            list.AddRange(select);
            return list;
        }
    }
           

准备工作我们都完成了，接下来就是控制器的写法了。

/// <summary>
        /// 证件类型下拉框
        /// </summary>
        /// <returns></returns>
        public ActionResult selectPapersType()
        {
            List<SelectVo> listPapersType = (from tbPapersType in myModel.S_PapersType
                                             select new SelectVo
                                             {
                                                 id = tbPapersType.PapersTypeID,
                                                 text = tbPapersType.PapersType
                                             }).ToList();
            //拼接选择项
            listPapersType = Common.Tools.SetSelectJson(listPapersType);
            return Json(listPapersType, JsonRequestBehavior.AllowGet);
        }
           

最后，我们回到视图那里调用它的方法。

createSelect(“PapersType”, “/Main/selectPapersType”, data.PapersTypeID);

括号里面第一个写的是ID，第二个写的是路径，第三个是回填下拉框用的，不需要会填数据的时候不用写。

最最后，我给你们看一下效果图。

效果图：