HtmlHelper

HtmlHelper:是为了方便View的开发而产生

HtmlHelper的演变

普通首页超级链接为:<a href="/home/index">首页</a>

当路由改变时候则可能需要修改为:<a href="/home/index1">首页</a>,如果项目里面有很多超级链接那需要改动很多地方

路由改变也不受影响:<a href="<%=Url.Action("Index","Home")%>">首页</a>

因为没有智能感知,调试不方便,所以应运而生了:Html.Action("Home","Index")

HtmlHelper之Action、表单标签

ActionLink()

动态生成超链接:根据路由规则,生成对应的 html 代码。

//1.注册路由信息
routes.MapRoute(
   name: "Test",
   url: "{controller}_yujie/{action}.html/{id}",
   defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
 );
//2.在视图上创建超链接
<a href="/Home/Index">网站首页</a><br />
@Html.ActionLink("网站首页","Index", "Home")
//3.在浏览器看到的生成结果
<a href="/Home/Index">网站首页</a><br />
<a href="/Home_yujie/Index.html">网站首页</a>

HtmlHelper – Form

方式一:{}   强烈推荐

@using(Html.BeginForm("HandleForm", "Home"))
{

}

方式二:Begin   End

@Html.BeginForm()
@{Html.EndForm();}

//1.在视图中 创建 表单

@using (Html.BeginForm("Add", "home", FormMethod.Post, new { id="form1" }))
{ 

}

//2.生成的html代码

<form action="/home/Add" id="form1" method="post"> </form>
//直接在视图中 @ 调用有返回值的方法,就已经相当于是将返回值写入Response了
@Html.Label("UserName")
//相当于下面代码
@{
    Response.Write(Html.Label("UserName"));
}

HtmlHelper –弱类型与强类型方法

Lable()等生成html标签方法

弱类型方法:指定name和value

注:所有的方法都默认去视图的Model属性所储存的对象中查找匹配属性

  using System.ComponentModel;  //1.为实体类添加特性DisplayName
    public class User
    {
        [DisplayName("用户名")]
        public string UserName { get; set; }
    }    //2.在Action方法中,为视图 的 Model 设置值    public ActionResult Index()    {         return View(new User { UserName = "郭靖" });    }

//3.在视图中,通过html的帮助方法,生成 html 标签,同时指定,要读取的 属性名

@Html.Label("UserName")

//4.生成对应的html标签,并自动读取了对应属性的DisplayName里的文本。

<label for="UserName">用户名</label>

其他控件方法也一样

强类型方法:通过lambda表达式指定模型属性(@model)

强类型方法,直接通过 lambda表达式,去视图的Model属性对象中查找对应的属性数据

  @Html.TextBoxFor(m=>m.UserName); //1.视图上调用方法
   <input type="text" id="UserName" name="UserName" value="郭靖"/> //2.生成的html代码

超强强类型方法(通过属性的DataType特性生成html标签)

using System.ComponentModel;
using System.ComponentModel.DataAnnotations;
        /// <summary>
        /// 1.在实体类中为Remark属性设置DataType特性,指定为多行文本框
        /// </summary>
        [DataType(DataType.MultilineText)]
        public string Remark { get; set; }

//2.视图上 自动根据model对象里属性保存的实体类属性的[DataType] 特性里指定的类型生成对应的html标签

@Html.EditorFor(a=> a.Remark)

/3.生成html代码

<textarea id="Remark" class="text-box multi-line" name="Remark"></textarea>

HtmlHelper – LabelFor & 模型元数据

模型类的元数据包括:属性(名称和类型) 与 特性包含的值。

为实体类属性设置 DisplayName 特性:

[DisplayName("用户名")]
public string UserName{ get; set; }

在 新增/修改 页面上显示某个属性的标签说明:

@Html.LabelFor(model => model.UserName)

生成Html源码:<label for="UserName">用户名</label>

HtmlHelper – Display / Editor 模型元数据

@Html.Editor / @Html.Display 可以通过读取特性值生成HTML:

        [DataType(DataType.MultilineText)]
        [DisplayName("备注")]
        public string Remark { get; set; }

控制器中:

        public ActionResult Index()
        {
            //ViewBag.UserName = "小李飞刀";
            return View(new User { UserName = "郭靖",Remark="武林高手" });
        }

在 新增/修改 页面上显示某个属性的input标签:

<div>@Html.DisplayFor(model => model.Remark):@Html.EditorFor(a=> a.Remark)</div>

生成Html源码:

<div>武林高手:<textarea id="Remark" class="text-box multi-line" name="Remark">武林高手</textarea></div>

支持强类型(1):Html.xxFor

这种方式生成的html控件的name和指定实体对应的属性名一致

弱类型(2):Html.xx(“”)

<%: Html.TextBox("Id")%>

DropDownList

var items = new List<SelectListItem>()
{
    (new SelectListItem() {Text = "001", Value = "1", Selected = false}),
    (new SelectListItem() {Text = "002", Value = "2", Selected = false})
}; 

将items值给ViewData: ViewData["items"] = items;
在视图中这样使用: @Html.DropDownList("items")
CheckBox & RadioButton & Hidden & Password

@Html.CheckBox(“bookType”) 在Controller获取提交的值为(true,false)未操作  true选择  false不选择三种
RadioButton第一个参数为控件名字(名字相同说明为同一个Group),返回值为第二个参数(红色部分)

@Html.RadioButton("favColor", "Blue", true)Blue <br />
@Html.RadioButton("favColor", "Purple", false) Purple <br />
@Html.RadioButton("favColor", "Red", false) Red <br />
@Html.RadioButton("favColor2", "Orange", false) Orange <br />
@Html.RadioButton("favColor2", "Yellow", false) Yellow <br />
@Html.RadioButton("favColor2", "Brown", false) Brown <br />
@Html.RadioButton("favColor2", "Green", false) Green

HtmlHelper –RenderPartial

从分部视图里取数据

@Html.RenderPartial( "Par", ViewData.Model );@Html.RenderPartial( "~/Views/Home/Par.cshtml ", ViewData.Model );

直接将用户控件嵌入到界面上
这个方法通过接受分部视图的文件名以及相应的可变化的数据进行的呈现可重用 分部视图 显示到具体的页面中
区别:
    布局页面(模板页)子页,是把自己的内容填到 布局页面上去;
    分部视图:供某个页面过来取分部视图的内容。

HtmlHelper类 - RenderAction

在视图中请求某个 Action方法 (违反了mvc设计)

 @{Html.RenderAction("Test");}

允许你直接调用某个Action,并把返回的结果直接显示在当前调用的View中

两者的相同点
RenderPartial和RenderAction通常都被用来显示一个功能相对独立的“块”,比如说显示菜单或者导航条。 两者输出的结果都被作为调用的View的一部分显示。
两者的不同点
RenderPatial的数据来自于调用的View,而RenderAction来自自己。
RenderAction会发起一个新的Request,而RenderPatial不会。
如何选择
根据两者不同点中的第二点,由于RenderAction会调用一个新的Action方法,而Asp.net Mvc中Action是最小的缓存单位,因此如果某一个“块”的数据比较固定,不会因为访问者的不同而发生变化,那么这时就是使用 RenderAction的时候了。 题外话,对于RenderAction会发起一个新的Request,感觉对调用页面的流程有点破坏。一个View在显示的时候,自己又发起一个 Request去获取数据来显示,显然有点破坏了作为一个View的原则:A View should only know how to render, but not what to render!

HtmlHelper扩展方法

扩展方法:

1.方法所在的类必须是静态的

2.方法也必须是静态的

3.方法的第一个参数必须是你要扩展的那个类型,比如你要给int扩展一个方法,那么第一个参数就必须是int。

4.在第一个参数前面还需要有一个this关键字。
在MVC中扩展HtmlHelper后,要在使用扩展方法的页面上引用扩展方法所在的名称空间
     例如: @ Import Namespace="Test.Helpers"

时间: 2024-10-08 00:19:16

HtmlHelper的相关文章

C#进阶系列——一步一步封装自己的HtmlHelper组件:BootstrapHelper(二)

前言:上篇介绍了下封装BootstrapHelper的一些基础知识,这篇继续来完善下.参考HtmlHelper的方式,这篇博主先来封装下一些常用的表单组件.关于BootstrapHelper封装的意义何在,上篇评论里面已经讨论得太多,这里也不想过多纠结.总之一句话:凡事有得必有失,就看你怎么去取舍.有兴趣的可以看看,没兴趣的权当博主讲了个“笑话”吧. 本文原创地址:http://www.cnblogs.com/landeanfen/p/5746166.html BootstrapHelper系列

自定义HtmlHelper控件

在asp.net mvc 中每一个Html控件都返回了MvcHtmlString ,他继承了HtmlString.下面自定义一个关于显示男女性别的自定义Html控件,使在创建页面时,可以直接调用该自定义的Html控件.可以查看其他的Html控件返回的是HtmlHelper,所以自定义的时候也要返回相同的类型直接在Controls文件夹下建立要自定义的html控件代码如下: using System.Web.Mvc; using System.Text; namespace System.Web.

页面开发辅助类—HtmlHelper初步了解

1.1 有失必有得 在ASP.Net MVC中微软并没有提供类似服务器端控件那种开发方式,毕竟微软的MVC就是传统的请求处理响应的回归.所以抛弃之前的那种事件响应的模型,抛弃服务器端控件也理所当然. 但是,如果手写Html标签效率又比较低,可重用度比较低.这时,我们该怎样来提高效率呢?首先,经过上篇我们知道可以通过ViewData传递数据,于是我们可以写出以下的Html代码: 1 <input name="UserName" type="text" value

[转]Asp.Net MVC使用HtmlHelper渲染,并传递FormCollection参数的陷阱

http://www.cnblogs.com/errorif/archive/2012/02/13/2349902.html 在Asp.Net MVC 1.0编程中,我们经常遇见这样的场景,在新建一个对象时候,通过HtmlHelper的方式在View模型中渲染Html控件,当填写完相关内容后,通过Form把需要新建的内容Post回View对应Controller的Action(例如:Create),指定的Action可以通过接受FormCollection参数.值参数或者某个类的实例参数(比如:

使用Htmlhelper,创建文本框TextBox

下面通过HtmlHelper帮助类,创建文本框. 首先新建一个实体类,做为下面的例子: using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace MVCRestartlearnning.Models { public class Student { /// <summary> /// 学号 /// </summary> public int Stude

一个分页的HtmlHelper

1 namespace System.Web.Mvc 2 { 3 public static class TianqyHtmlHelper 4 { 5 /// <summary> 6 /// 分页HtmlHelper 7 /// </summary> 8 public static HtmlString ShowPageNavigate(this HtmlHelper htmlHelper, int currentPage, int pageSize, int totalCount

Razor和HtmlHelper的使用意义

Razor和HtmlHelper的使用意义 写这篇文档的目的是为了给初学MVC的同伴们介绍在MVC的View中的两个新概念,能有利于我们更快,更好的开发项目.一个是视图引擎,一个是HtmlHlper.这两个知识都不是新的,知识概念新而已,都是在我们学过的ASPX和 Html上做了改进,是我们编程更加容易. 一.区别ASPX和Razor 在ASP.NET MVC模式中,我们的视图引擎选择有两种:ASPX(ASP.NET),Razor. 1.ASP.net. 如果选择ASPX,那么选择的引擎其实就是

MVC HtmlHelper

在ASP.Net MVC中微软并没有提供类似服务器端控件那种开发方式,微软的MVC就是传统的“请求--处理--响应”的回归. 微软为开发人员快速开发前台页面提供了丰富的HtmlHelper的辅助类,辅助我们快速开发前台页面,也提供了可扩展的接口,前台页面的标签可以做到高度可重 Url.Action  常用 修改路由规则,将 / 修改为 - 后,访问地址变为:http://localhost:11614/Home-Index <a href="/UserInfo/index">

自定义HtmlHelper方法

原文:http://www.cnblogs.com/wenjiang/archive/2013/03/30/2990854.html HtmlHelper方法是ASP.NET MVC中非常强大的特性,有了这个特性,我们就能更加随心所欲的定制自己的页面. 自定义自己的HtmlHelper方法通常有三种, 像是: 一.Razor语法 采用Razor的方式非常直观,像是这样: @model IEnumerable<MusicShop.Models.Album> @{ ViewBag.Title =

MVC 自定义HtmlHelper帮助类型之分页

方法一: 在项目中增加App_Code文件夹,新增一个MyHtmlper.cshtml视图文件 写入代码: @helper Pagger(int pageIndex, int pageCount) { <div> @for (int i = 1; i <= pageCount; i++) { if (i != pageIndex) { <span > <a href="/Home/Index/@(i)[email protected](pageCount)&q