阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      html.dropdownlist

      html.dropdownlist

      .Net MVC 原生提供非常多种 Html Helper 给大家使用

      其中最容易忘记怎么用的就是 DropDownList

      假设我们希望看到的画面如下

      需求为

      1. 从后端准备好 SelectList 的内容(选项通常来自资料库或静态档案)

      2. 在后端决定哪个 Item 为预设 Selected

      3. 前端呈现时还要能自订 SelectList 的 Css Style

      4. 根据 User 改变 SelectList 的状态时,做出 alert 提示

      控制者

      public ActionResult Sample()
      {
          var selectList = new List<SelectListItem>()
          {
              new SelectListItem {Text="text-1", Value="value-1" },
              new SelectListItem {Text="text-2", Value="value-2" },
              new SelectListItem {Text="text-3", Value="value-3" },
          };
      
          //預設選擇哪一筆
          selectList.Where(q => q.Value == "value-2").First().Selected = true;
      
          ViewBag.SelectList = selectList;
      
          return View();
      }
      

      视图

      <head>
          <script src="~/Scripts/jquery-1.10.2.min.js"></script>
          <script>
              $(document).ready(function () {
                  $('#selector').change(function () {
                      alert($('#selector').val());
                  });
              })
          </script>
      </head>
      <p>
          @Html.DropDownList("selector", (IEnumerable<SelectListItem>)ViewBag.SelectList, new { @style = "background-color:yellow" })
      </p>
      

      实际对比

      实际对比一下 Razor 的 HtmlHelper 帮我们自动产生的 Html Script 会长得像。..

      <select id="selector" name="selector" style="background-color:yellow">
          <option value="value-1">text-1</option>
          <option selected="selected" value="value-2">text-2</option>
          <option value="value-3">text-3</option>
      </select>
      

      更多 HTML 搜索

      通过查看前端开发者在搜索引擎里的搜了哪些 HTML 内容,可以知道他们实际工作使用了什么技术或者什么地方薄弱;

      你可以通过点击 HTML 常见搜索 来查看前端开发者都在搜哪些内容;

      注:这里仅收录了常见搜索,并不是无论搜索什么都记录在里面的;

      如果你是为了面试做准备的,那么推荐你查看 HTML面试题,这里基本包涵了市场上的所有 HTML 方面的面试题,让你更加牢固的掌握 HTML 知识

      卖前端学习教程

      只需几十元,就能买到培训班的内部教程!开启高薪之路!

      零基础小白阿里P7的教程都有!

      同时长期收购所有培训班的前端教程

      目录
      目录