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模版项目的。

posted @ 2017-09-29 22:30  早起Abc  阅读(173)  评论(0)  编辑  收藏  举报