12、ASP.NET MVC入门到精通——HtmlHelper
本系列目录:ASP.NET MVC4入门到精通系列目录汇总
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后,要在使用扩展方法的页面上引用扩展方法所在的名称空间
例如: @using Ebuy.Models
public class User
{
public string Name { get; set; }
}
public static class UserHelper
{
public static string UserShow(this HtmlHelper<User> helper)
{
var user = helper.ViewData.Model;
if (user.Name == "zouqj")
{
return string.Format("<div>我是{0}</div>",user.Name);
}
else
{
return "<div>找不到</div>";
}
}
}
控制器
public ActionResult Index()
{
ViewBag.Message = "Modify this template to jump-start your ASP.NET MVC application.";
var model = new User { Name="zouqj"};
return View(model);
}
View调用
@model Ebuy.Models.User
@using Ebuy.Models
@Html.Raw(Html.UserShow()
界面显示:
我是zouqj
12、ASP.NET MVC入门到精通——HtmlHelper的更多相关文章
- 25、ASP.NET MVC入门到精通——Spring.net-业务层仓储
本系列目录:ASP.NET MVC4入门到精通系列目录汇总 上一节,我们已经把项目框架的雏形搭建好了,那么现在我来开始业务实现,在业务实现的过程当中,不断的来完善我们现有的框架. 1.假设我们来做一个 ...
- 26、ASP.NET MVC入门到精通——后台管理区域及分离、Js压缩、css、jquery扩展
本系列目录:ASP.NET MVC4入门到精通系列目录汇总 有好一段时间没更新博文了,最近在忙两件事:1.看书,学习中...2.为公司年会节目做准备,由于许久没有练习双截棍了,难免生疏,所以现在临时抱 ...
- 1、ASP.NET MVC入门到精通——新语法
本系列目录:ASP.NET MVC4入门到精通系列目录汇总 在学习ASP.NET MVC之前,有必要先了解一下C#3.0所带来的新的语法特性,这一点尤为重要,因为在MVC项目中我们利用C#3.0的新特 ...
- 8、ASP.NET MVC入门到精通——View(视图)
本系列目录:ASP.NET MVC4入门到精通系列目录汇总 View视图职责是向用户提供界面.负责根据提供的模型数据,生成准备提供给用户的格式界面. 支持多种视图引擎(Razor和ASPX视图引擎是官 ...
- 11、ASP.NET MVC入门到精通——AspnetMVC分页
本系列目录:ASP.NET MVC4入门到精通系列目录汇总 说起分页,这基本上是我们Web开发中遇见得最多的场景,没有之一,可即便如此,要做出比较优雅的分页还是需要技巧的.这里我先说一种ASP.NET ...
- 13、ASP.NET MVC入门到精通——MVC请求管道
本系列目录:ASP.NET MVC4入门到精通系列目录汇总 ASP.NET MVC的请求管道和ASP.NET请求管道基本上一模一样,如果你对ASP.NET请求管道十分熟悉的话,你只要关注一下不同点.看 ...
- 15、ASP.NET MVC入门到精通——MVC-路由
本系列目录:ASP.NET MVC4入门到精通系列目录汇总 Routing(路由) – URL url 作为广泛使用的Web用户接口,需要被重视 好的Url应该满足如下条件: URL应为获取某种资源提 ...
- 24、ASP.NET MVC入门到精通——数据库仓储
本系列目录:ASP.NET MVC4入门到精通系列目录汇总 业务层调用数据层对象,我不想每次都new一个数据层对象,而是在数据层创建一个仓储,统一管理所有的对象调用. 1.在IDAL项目中,新建IDB ...
- ASP.NET MVC入门到精通——MVC请求管道
https://www.cnblogs.com/jiekzou/p/4896315.html 本系列目录:ASP.NET MVC4入门到精通系列目录汇总 ASP.NET MVC的请求管道和ASP.NE ...
随机推荐
- 《Entity Framework 6 Recipes》中文翻译系列 (14) -----第三章 查询之查询中设置默认值和存储过程返回多结果集
翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 3-6在查询中设置默认值 问题 你有这样一个用例,当查询返回null值时,给相应属性 ...
- [译]libev和libevent的设计差异
本文译自what's the difference between libev and libevent? 作者是libev作者 [问]两个库都是为异步io调度而设计,在Linux上都是使用epoll ...
- SQLServer比较两条数据是否相同
SQLServer比较两条数据是否相同 直接比较可能会一个一个字段的比较,也可以将多个字段拼成一个串然后比较,这里有个hash值比较的方法,很好用 用法 将需要的比较的column放进去,逗号隔开,只 ...
- [erl] erlang 进程注册和注销
想要注册一个进程,必须先要创建一个进程. 如何创建一个进程,可以使用spawn.spawn_link,它们虽然都能创建进程,但是也有微妙的区别: 1)当前进程中创建一个并行进程,当被生成的进程崩溃时, ...
- Design7:数据删除设计
在设计一个新系统的Table Schema的时候,不仅需要满足业务逻辑的复杂需求,而且需要考虑如何设计schema才能更快的更新和查询数据,减少维护成本. 模拟一个场景,有如下Table Schema ...
- 移动web app开发必备 - 异步队列 Deferred
背景 移动web app开发,异步代码是时常的事,比如有常见的异步操作: Ajax(XMLHttpRequest) Image Tag,Script Tag,iframe(原理类似) setTimeo ...
- document.getElementById()与 $()区别
document.getElementById()返回的是DOM对象,而$()返回的是jQuery对象 什么是jQuery对象? ---就是通过jQuery包装DOM对象后产生的对象.jQuery对象 ...
- Android音频开发之MediaRecorder/MediaPlayer
前言: 上次我们介绍了实时采集音频数据以及播放,今天我们来认识一下直接录制文件的方式. 直接上代码:录制管理类 public class MediaRecorderManager { public s ...
- 应用程序框架实战十八:DDD分层架构之聚合
前面已经介绍了DDD分层架构的实体和值对象,本文将介绍聚合以及与其高度相关的并发主题. 我在之前已经说过,初学者第一步需要将业务逻辑尽量放到实体或值对象中,给实体“充血”,这样可以让业务逻辑高度内聚, ...
- 网络通信简单实例BIO,NIO,AIO
这里,我将做一个简单的通信程序,分别使用三种原始的通信工具:BIO,NIO,AIO. 功能就是一个服务器,一个客户端.服务器就是处理请求,返回响应.而客户端就是连接服务器,发送请求,接收响应. 第一步 ...