下拉框绑定

                   下拉框绑定

开发工具与关键技术：MVC专题技术
作者：彭春怡
撰写时间：2019/4/21

各位IT朋友们好，今天我想给大家介绍下拉框的绑定，一个简单的操作，不难，理解就行。我今天介绍的下拉框呢是查询时使用的下拉框。简单的说，是直接把查询出来的数据绑定下拉框就完成了。代码不多，挺好理解的。虽然是很简单但也是我的一个小知识，跟大家分享下，希望可以给大家带来一点小帮助。如果有不对的地方请多多指教，谢谢。
因为是查询里的下拉框，使用首先是查询。为了让大家更好的理解，使用一个单表查询向大家介绍。而我所介绍的单表查询有两种，两种单表查询都可以绑定下拉框。
查询方法：
第一种方法、
public ActionResult mouywes()
{
var listDepartment = from tb in myModel.SYS_Department
select new
{
id = tb.DepartmentID,
text = tb.DeoartmentName
};
return Json(listDepartment, JsonRequestBehavior.AllowGet);
}
第二种方法、
public ActionResult mouywes()
{
var listDepartment = myModel.SYS_Department
.Select(a => new { id = a.DepartmentID, text = a.DeoartmentName });
return Json(listDepartment, JsonRequestBehavior.AllowGet);
}
当然两种方法的意思都是一样的，只是写法不同。首先是一个关键字“public”，ActionResult是方法的参数，mouvwes是自己命名的方法的名称。下面是命名一个字段，然后从数据库SYS_DeoartmentName表里面查询出自己想要的数据。便可直接绑定下拉框。
下面是视图页面下拉框绑定的代码：
function appendOption() {
$.getJSON("/pooy/mouywes", function (data) {
$("#sltTitleType").empty();
$("#sltTitleType").append("" + “----请选择----” + “”);
//console.log(data);
$.each(data, function (i) {
$("#sltTitleType").append("" + data[i].text + “”);
});
});
}
我这里用的是“getJSON”提交方法，当然不只是这个方法，绑定下拉框的提交方法有三种“get、post、getJSON”，整体的一个方法就这样。就是把控制器的链接复制过来进行绑定，然后把上面制作下拉框的样式代码的id填写完整便可，“sltTitleType”就是我的下拉框样式代码的id。这样下拉框绑定就完成啦。

整个下拉框就这样，点击三角形，下拉框就会出现。
总结：虽然是个小知识，但希望可以给大家带来一点小帮助。