IT轮子系列——DropDownList 的绑定，你秒懂了吗
Posted 天道酬勤
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了IT轮子系列——DropDownList 的绑定，你秒懂了吗相关的知识，希望对你有一定的参考价值。
前言
最近猛然惊觉（说是猛然，是因为自己工作那么多年，居然不自知、不反省），在开发中，自己碰到一些常用的功能代码块，还是习惯性的baidu，然后copy....这样的操作，不知自己重复了多少遍。现在回想起来，其实每一次在网上搜索查找代码块，都耗费了自己一定的时间、精力。
既然如此，自己为什么不总结、汇总这些常用的轮子呢，又，为什么要一遍一遍的消耗时光？
一个字，懒！
懒的动手，怕麻烦。
出来混，总是要混的。
现在到了自己还的时候了。
第一个款轮子——select 或者叫 html.DropDownList
直接上代码：
1 @{ 2 Layout = null; 3 } 4 @using PartyInvites.Models 5 6 @model School 7 8 <!DOCTYPE html> 9 10 <html> 11 <head> 12 <meta name="viewport" content="width=device-width" /> 13 <script src="~/Content/js/jquery-3.2.1.min.js"></script> 14 <title>select 轮子的使用</title> 15 </head> 16 <body> 17 <div> 18 <h1> 19 第一种绑定Html.DropDownList 20 </h1> 21 @{ 22 var schoolList = (List<School>)ViewData["SchoolList"]; 23 var list = new SelectList(schoolList.AsEnumerable(), "Id", "Name"); 24 @Html.DropDownList("SchoolList", list,"请选择"); 25 } 26 </div> 27 <div> 28 <h2> 29 第二种绑定Html.DropDownList<span style="color:red">给定默认值</span> 30 </h2> 31 @{ 32 var secondeList = new SelectList(schoolList.AsEnumerable(), "Id", "Name", Model.Id); 33 /* 34 注意 当使用Model.Id 绑定默认值，Html.DropDownList 方法中的第一个参数名 不能与 35 * ViewData["名字"] 一样，否则无法显示默认值。不懂什么原因 36 */ 37 @Html.DropDownList("SecondList", secondeList, "请选择默认值"); 38 } 39 </div> 40 <div> 41 <h3> 42 第三种绑定html select控件 43 </h3> 44 @* 45 这里使用到jquery库 46 *@ 47 <select id="selSchool"> 48 </select> 49 </div> 50 </body> 51 </html> 52 <script type="text/javascript"> 53 $(function () { 54 //页面加载完成执行 55 bindSchooList(); 56 }); 57 function bindSchooList() { 58 $.ajax({ 59 url: ‘Home/BindSchool‘, 60 type:"POST", 61 success: function (data) { 62 $("#selSchool").empty();//清空绑定的列表 63 $("#selSchool").append("<option value=‘0‘>请选择</option>");//设置首项 64 //遍历json数据源 65 var options = ""; 66 $.each(data.SchoolList, function (indx, item) { 67 options += "<option value=‘" + item.Id + "‘>" + item.Name + "</option>"; 68 }); 69 //追加html options 到select 70 $("#selSchool").append(options); 71 72 //设置默认值 73 $("#selSchool").val(data.DefaultValue); 74 }, 75 error: function (data) { 76 77 } 78 }); 79 } 80 </script>
1 using PartyInvites.Models; 2 using System; 3 using System.Collections.Generic; 4 using System.Linq; 5 using System.Web; 6 using System.Web.Mvc; 7 8 namespace PartyInvites.Controllers 9 { 10 public class HomeController : Controller 11 { 12 //声明数据源 13 //实际可从数据库查询返回 14 public List<School> schoolList = new List<School>() { 15 new School{Id=1,Name="山东大学"}, 16 new School{Id=2,Name="济南大学"} 17 }; 18 19 public ViewResult Index() 20 { 21 //传数据源到view 22 ViewData["SchoolList"] = schoolList; 23 24 25 School shool = new School(); 26 //页面根据这个id 显示下拉选中的值 27 //可按实际给定 28 shool.Id = 1; 29 30 //页面绑定强类型 31 return View(shool); 32 } 33 /// <summary> 34 /// 第三种方法 35 /// 绑定到html select 控件 36 /// </summary> 37 /// <returns></returns> 38 public ActionResult BindSchool() 39 { 40 var obj = new 41 { 42 SchoolList = schoolList,//数据源 43 DefaultValue = 1 //默认值 44 }; 45 return Json(obj); 46 } 47 } 48 }
项目是用vs2013,新建mvc empty模版项目的。
以上是关于IT轮子系列——DropDownList 的绑定，你秒懂了吗的主要内容，如果未能解决你的问题，请参考以下文章
winform 写App.config配置文件——IT轮子系列