在ASP.NET MVC框架中没有了自己的控件,页面显示完全就回到了写html代码的年代。还好在asp.net mvc框架中也有自带的HtmlHelper和UrlHelper两个帮助类。另外在MvcContrib扩展项目中也有扩展一些帮助类,这样我们就不光只能使用完整的html来编写了需要显示的页面了,就可以使用这些帮助类来完成,但最后运行时都还是要生成html代码的。

System.Web.Mvc.HtmlHelper学习及使用

先来看看HtmlHelper能帮我们生成一些什么样的html呢。直接看效果吧。

1.使用HtmlHelper生成超链接:
        <%=Html.ActionLink("我是超链接","") %>
        生成的结果:

<a href="/">我是超链接</a>
        2.使用HtmlHelper生成表单:
        <% Html.BeginForm("Index", "Simple", FormMethod.Post, new { id = "myForm" }); %>
        <% Html.EndForm();%>
        生成的结果:

<form action="/Index/Simple" id="myForm" method="post"></form>
        3.使用HtmlHelper根据路由规则生成表单:
        <% Html.BeginRouteForm(new { controller = "Simple", action = "Demo" }); %>
        <%Html.EndForm(); %>
        生成的结果:
        <form action="/Simple/Demo" method="post"></form>
        4.使用HtmlHelper生成一个复选框:
        <%= Html.CheckBox("checkBox",new { id="myCheckBox" })%>复选框
        生成的结果:

<input id="myCheckBox" name="checkBox" type="checkbox" value="true" /><input name="checkBox" type="hidden" value="false" />复选框

5.使用HtmlHelper生成上拉列表框:
        <% var dropList = new List<SelectListItem>();
           for (int i = 0; i < 5; i++)
           {
               var dropItem = new SelectListItem();
               dropItem.Value = i.ToString();
               dropItem.Text = i.ToString();
               dropList.Add(dropItem);
           }
        %>
        <%=Html.DropDownList("myList", dropList, new { style = "width:100px;" })%>
        生成的结果:
        <select id="myList" name="myList" style="width:100px;"><option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
        6.使用HtmlHelper生成隐藏域:
        <%=Html.Hidden("hidden") %>
        生成的结果:
        <input id="hidden" name="hidden" type="hidden" value="" />
        7.使用HtmlHelper生成列表框:
        <%var list = new List<SelectListItem>();
          for (var i = 0; i < 5; i++)
          {
              var item = new SelectListItem();
              item.Value = i.ToString();
              item.Text = i.ToString();
              list.Add(item); 
          }  
             %>
        <%=Html.ListBox("listBox", list, new {style="width:100px;" })%>  
        生成的结果:       
        <select id="listBox" multiple="multiple" name="listBox" style="width:100px;"><option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>       
        8.使用HtmlHelper生成密码输入框:
        <%=Html.Password("password","longgel") %>
        生成的结果:
        <input id="password" name="password" type="password" value="longgel" />
        9.使用HtmlHelper生成单选框:
        <%=Html.RadioButton("radio","boy",true) %>男
        <%=Html.RadioButton("radio","girl",false) %>女
        生成的结果:
        <input checked="checked" id="radio" name="radio" type="radio" value="boy" />男
        <input id="radio" name="radio" type="radio" value="girl" />女
        10.使用HtmlHelper生成部分视图(用户控件):
        <% Html.RenderPartial("PartialView"); %>
        生成的结果:
        <span style="background-color:Red">Hi,我是部分视图(用户控件)</span>
        11.使用HtmlHelper根据路由规则生成超链接:
        <%= Html.RouteLink("我是由路由生成的超链接",new {controller="Simple",action="Index"}) %>
        生成的结果:
        <a href="/">我是由路由生成的超链接</a>
        12.使用HtmlHelper生成富文本框:
        <%=Html.TextArea("myTxtArea",new{style="width:300px; height:100px;"}) %>
        生成的结果:
        <textarea cols="20" id="myTxtArea" name="myTxtArea" rows="2" style="width:300px; height:100px;">
</textarea>
        13.使用HtmlHelper生成文本框:
        <%=Html.TextBox("myTxtBox","我是文本框")%>
        生成的结果:
        <input id="myTxtBox" name="myTxtBox" type="text" value="我是文本框" />

另外HtmlHelper中还有ValidationMessage()和 ValidationSummary()等方法,用于验证的时候使用。

其实大家可能注意到了,当我们在使用<%%>中有同样都是使用的HtmlHelper中的方法,为什么有的需要加上等号,有的不需要,其实在HtmlHelper中的方法中,只要是返回的是MvcHtmlString类型的方法都需要使用等号将值输出。

大家对ASP.NET MVC 2要求的一个常用特性是,要我们支持强类型的HTML辅助方法,这样的辅助方法使用 lambda 表达式来引用传到视图模板中的模型或视图模型。这可以促成更好的编译时视图检查(可以在编译时发现缺陷,而不是在运行时),还可以促成视图模板中更好的代码intellisense支持。

新的强类型HTML辅助方法现在已经内置于ASP.NET MVC 2中了,这些方法使用"Html.HelperNameFor()”的命名规范。例如,Html.TextBoxFor(), Html.CheckBoxFor(), Html.TextAreaFor()等等。它们支持使用lambda表达式来指定元素的名称和id,以及要显示的值。

例如,除了上面的Html.TextBox()辅助方法外,使用ASP.NET MVC 2,我们现在还可以使用新的Html.TextBoxFor()辅助方法:

注意上面,我们不再需要指定 “ProductName” 字符串参数,lambda表达式是相当灵活的,除了值以外,我们还可以获取我们模型对象中的属性/字段的名称。

因为这些HTML辅助方法是强类型的,编写lambda表达式时我们还可以在Visual Studio中得到完整的intellisense支持:

显示的HTML跟前面的后期绑定的HTML辅助方法版本的输出是一样的:

内置于ASP.NET MVC 2中的强类型HTML辅助方法列表

ASP.NET MVC 2对下列强类型的HTML辅助方法提供内置支持:

HTML元素辅助方法:

  • Html.TextBoxFor()
  • Html.TextAreaFor()
  • Html.DropDownListFor()
  • Html.CheckboxFor()
  • Html.RadioButtonFor()
  • Html.ListBoxFor()
  • Html.PasswordFor()
  • Html.HiddenFor()
  • Html.LabelFor()

其他辅助方法:

  • Html.EditorFor()
  • Html.DisplayFor()
  • Html.DisplayTextFor()
  • Html.ValidationMessageFor()

System.Web.Mvc.UrlHelper的学习与使用

我们学习一下UrlHelper帮助类,看类名也都知道这个类是用来帮我们生成URL在ASP.NET MVC应用程序中。让我们来看看该类给我们带来了哪些方便的方法和属性,UrlHelper提供了四个非常常用的四个方法,

1.Action方法通过提供Controller,Action和各种参数生成一个URL,

2.Content方法是将一个虚拟的,相对的路径转换到应用程序的绝对路径,

3.Encode方法是对URL地址进行加密,与Server.Encode方法一样。

4.方法是提供在当前应用程序中规定的路由规则中匹配出URL。

另外还有两个属性,分别是RequestContext和RouteCollection两个属性,分别指的是包含HTTP上下文和RouteData两个属性,另外,RouteCollection是整个当前应用程序中规定的路由规则。

下面对上面的方法使用写成代码看

1.使用Action方法生成URL(Controller将是默认的)

<a href='<%= Url.Action("DemoAction") %>' title="">指定Action名称生成URL</a>

<a href='<%= Url.Action("DemoAction","id") %>' title="">指定Action和一个RouteData(参数)生成URL</a>

<a href='<%= Url.Action("DemoAction", new {id=2,category=5 })%>' title="">指定Action名称和多个参数生成URL</a>

<a href='<%= Url.Action("DemoAction","DemoController")%>' title="">指定Action和Controller生成URL</a>

<a href='<%= Url.Action("DemoAction","DemoController","id")%>' title="">指定Action,Controller和一个参数生成URL</a>

<a href='<%= Url.Action("DemoAction","DemoController", new {id=2,category=5 })%>' title="">指定Action,Controller和多个参数生成URL</a>

<a href='<%= Url.Action("DemoAction","DemoController", new {id=2,category=5 },"https")%>' title="">指定传输协议生成URL</a>

<% var rvd = new RouteValueDictionary();

rvd.Add("id", 5);

rvd.Add("category", 2);

var tmp = 5;  %>

<a href='<%= Url.Action("DemoAction","DemoController", rvd,"https","local")%>' title="">指定主机名生成URL</a>  
         生成的结果:

<a href='/simple/DemoAction' title="">指定Action名称生成URL</a>

<a href='/id/DemoAction' title="">指定Action和一个RouteData(参数)生成URL</a>

<a href='/simple/DemoAction?id=2&category=5' title="">指定Action名称和多个参数生成URL</a>

<a href='/DemoController/DemoAction' title="">指定Action和Controller生成URL</a>

<a href='/DemoController/DemoAction?Length=2' title="">指定Action,Controller和一个参数生成URL</a>

<a href='/DemoController/DemoAction?id=2&category=5' title="">指定Action,Controller和多个参数生成URL</a>

<a href='https://localhost/DemoController/DemoAction?id=2&category=5' title="">指定传输协议生成URL</a>

<a href='https://local/DemoController/DemoAction?id=5&category=2' title="">指定主机名生成URL</a>

2.使用Content方法将虚拟(相对)路径生成为绝对路径

<a href='<%= Url.Content("~/DemoController/DemoAction")%>' title="">指定虚拟路径生成绝对路径</a>

<a href='/DemoController/DemoAction' title="">指定虚拟路径生成绝对路径</a>

3.使用Encode加密URL

<a href='<%= Url.Encode("http://www.cnblogs.com/longgel/")%>' title="">加密过的URL连接</a>  
         生成的结果:

<a href='http%3a%2f%2fwww.cnblogs.com%2flonggel%2f' title="">加密过的URL连接</a>

4.使用RouteUrl生成URL

<a href='<%= Url.RouteUrl(tmp)%>' title="">指定RouteValue生成URL</a>

<a href='<%= Url.RouteUrl("Default")%>' title="">指定RouteName生成URL</a>

<a href='<%= Url.RouteUrl(rvd)%>' title="">指定多个参数生成URL</a>

<a href='<%= Url.RouteUrl("Default",tmp) %>' title="">指定路由规则名和单个路由值</a>

<a href='<%= Url.RouteUrl("Default",rvd) %>' title="">指定路由规则名和多个路由值</a>

<a href='<%= Url.RouteUrl("Default",tmp,"https") %>' title="">指定传输协议</a>

<a href='<%= Url.RouteUrl("Default",rvd,"https","www.cnblogs.com") %>' title="">指定主机名</a>  
         生成的结果:

<a href='/simple/urlhelperdemo' title="">指定RouteValue生成URL</a>

<a href='/Longgel/Index/Id' title="">指定RouteName生成URL</a>

<a href='/simple/urlhelperdemo?id=5&category=2' title="">指定多个参数生成URL</a><br />/Longgel/Index/Id

<a href='/Longgel/Index/Id' title="">指定路由规则名和单个路由值</a>

<a href='/Longgel/Index/Id?id=5&category=2' title="">指定路由规则名和多个路由值</a>

<a href='https://localhost/Longgel/Index/Id' title="">指定传输协议</a>

<a href='https://www.cnblogs.com/Longgel/Index/Id?id=5&category=2' title="">指定主机名</a>

ASP.NET MVC的帮助类HtmlHelper和UrlHelper相关推荐

  1. 在 ASP.NET MVC 中创建自定义 HtmlHelper

    在ASP.NET MVC应用程序的开发中,我们常碰到类似Html.Label或Html.TextBox这样的代码,它将在网页上产生一个label或input标记.这些HtmlHelper的扩展方法有些 ...

  2. ASP.NET MVC 重点教程一周年版 第九回 HtmlHelper 【转】

    许多时候我们会遇到如下场景 在写一个编辑数据的页面时,我们通常会写如下代码 1: <input type="text" value='<%=ViewData[" ...

  3. ASP.NET MVC 重点教程一周年版 第九回 HtmlHelper

    许多时候我们会遇到如下场景 在写一个编辑数据的页面时,我们通常会写如下代码 1: <input type="text" value='<%=ViewData[" ...

  4. C# , ASP.NET MVC

    C# 是一个简单的.现代的.通用的.面向对象的编程语言,它是由微软(Microsoft)开发的. C Sharp 在任何 C# 程序中的第一条语句都是:using System; 包含main函数的类 ...

  5. 艾伟_转载:学习 ASP.NET MVC (第五回)理论篇

    本系列文章导航 学习 ASP.NET MVC (第一回)理论篇 学习 ASP.NET MVC (第二回)实战篇 学习 ASP.NET MVC (第三回)实战篇 学习 ASP.NET MVC (第四回) ...

  6. ASP.NET MVC案例教程(基于ASP.NET MVC beta)——第二篇:第一个页面

    摘要       本文首先一步一步完成Demo的第一个页面--首页.然后根据实现过程,说明一下其中用到的与ASP.NET MVC相关的概念与原理. 让第一个页面跑起来       现在,我们来实现公告 ...

  7. 最近自学 Asp.net MVC 小总结

    1.类 public class Restaurant { public int ID { get; set; } public string Name { get; set; } //  publi ...

  8. ASP.NET MVC:实现我们自己的视图引擎

    在ASP.NET MVC的一个开源项目MvcContrib中,为我们提供了几个视图引擎,例如NVelocity, Brail, NHaml, XSLT.那么如果我们想在ASP.NET MVC中实现我们 ...

  9. 学习 ASP.NET MVC (第五回)理论篇

    通过前几篇文章,我们通过ASP.NET MVC创建了一个简单的应用程序,学习了ASP.NET MVC的基本框架和工作流程.但是Demo中很多东西都是VS为我们自动生成的,比如View的html代码等. ...

  10. 艾伟:ASP.NET MVC,深入浅出IModelBinder,在Post方式下慎用HtmlHelper

    本文基于ASP.NET MVC Beta版本,正式版如有变动诸不另行通知! 在开始这个主题之前,我先简要介绍一下如何在ActionMethod中通过Form使用Post的方式进行传递参数. 原生类型参 ...

最新文章

  1. 马化腾:腾讯要帮助中国加快数字化,主要靠小程序(附演讲)
  2. Linux之 proc文件系统
  3. 基于Away3D实现全景的相机控制器。
  4. 总有人愿意为了你多做一些
  5. jmeter接口测试多数据组合登陆场景
  6. 如何搭建低延时、交互式的在线教育平台?(内附视频回放)
  7. Nginx配置相关结构划分的技巧和禁止IP访问
  8. jquery table ajax,JQuery Ajax动态加载Table数据的实例讲解
  9. java怎么弄redis,java怎么使用redis
  10. [SDOI2017]遗忘的集合
  11. Windows API ——GetLogicalDriveStrings——获取逻辑驱动器
  12. wpf之窗口ShowDialog
  13. 国内首款 FPGA 云服务器,性能是通用 CPU 服务器 30 倍以上
  14. itext 表格宽度自适应_微信公众号推文中如何自定义添加表格?
  15. c语言计算圆周率的第100位,JavaScript实现计算圆周率到小数点后100位的方法示例...
  16. vant 做表格_vue实现简单表格组件
  17. 给小朋友讲故事——科学课,地球,太阳和月亮第二集人类登月第一段
  18. 数学建模重要算法简介及算法实现
  19. OFDMA和OFDM的区别
  20. 计算机网络路由器的配置连接不上,为什么路由器连接不上_我的电脑换了一个路由器怎么就连接不上网络呢...

热门文章

  1. linux读usb转ttl串口数据,ubuntu16.04使用USB转TTL(ch340)串口转usb调试过程
  2. java周报简单模板_快速成长从写一份走心的周报开始
  3. java零基础从入门到精通(全)
  4. 干货来袭!java从入门到精通第五版pdf
  5. win10 完全卸载 MYsql8.0
  6. python代码怎么弄颜色_python的颜色显示
  7. Windows装机必备软件大全,全部支持Vista系统
  8. 深度优先搜索 - 最短路径
  9. CodeJock 实现MFC换肤
  10. java zk_zk框架:zul文件,纯Java或混合更好的性能