开发工具与关键技术：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();//清空该元素//创建optionfor (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_PapersTypeselect 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，第二个写的是路径，第三个是回填下拉框用的，不需要会填数据的时候不用写。
最最后，我给你们看一下效果图。
效果图：