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

  • 相关阅读:
    电容在电路中的作用
    C语言中的弱符号(weak)用法及实例
    一种高灵敏度自带DSP降噪算法的音频采集解决方案
    高灵敏度自带DSP降噪算法的audio codec解决方案
    git clone error: RPC failed; curl 18 transfer closed with outstanding read data remaining
    stm32f103中freertos的tasks基本使用案例及备忘
    移植freertos到stm32 f103 的基本流程和总结
    stm32_f103使用gcc编译的环境下printf打印函数的实现
    C语言中指针和取地址符&的关系
    STM32中ARM系列编译工具链的编译宏选择(__CC_ARM、__ICCARM__、__GNUC__、__TASKING__)
  • 原文地址:https://www.cnblogs.com/liangxiarong/p/7613045.html
Copyright © 2020-2023  润新知