MVC学习系列4--@helper辅助方法和用户自定义HTML方法
在HTML Helper，帮助类的帮助下，我们可以动态的创建HTML控件。HTML帮助类是在视图中，用来呈现HTML内容的。HTML帮助类是一个方法，它返回的是string类型的值。
HTML帮助类，分成三个类型：
- Inline HTML helpers【内联的HTML帮助类，例如@Html.Label等】
- Built-in HTML helpers【也就是嵌套的HTML帮助类，即@helper辅助方法】
- Custom HTML helpers【自定义的HTML帮助类】
在这里，我们学习第二种，和第三种，第一种太简单了，这里就不介绍了。关于第一种，我之前的文章中有介绍，大家可以看看。
- Built-in HTML helpers【也就是嵌套的HTML帮助类，即@helper辅助方法】
首先新建一个空白的MVC项目，创建一个Home控制器，默认的代码如下：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc; namespace HTMLHelperMVC.Controllers
{
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
}
}
添加对应的Index视图：在视图中写上@Helper辅助方法：
@{
Layout = null;
}
<!DOCTYPE html>
@*声明辅助方法开始*@
@helper SayHello(string[] strArray)
{
<ol>
@foreach (var item in strArray)
{
<li>Hello:@item</li>
}
</ol>
}
@*声明辅助方法结束*@
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div>
@*调用辅助方法*@
@SayHello(new string[] { "C#","Javascript","ASP.NET MVC","EntityFramework","WCF","WPF","......"})
</div>
</body>
</html>
接着运行Index方法，结果是：
可以看出来，@helper辅助方法，很有作用，当一个块需要多次使用的时候，就可以使用@helper辅助方法
然而，你可能看出来了，这样的写法，我只能在当前页面，重复使用这个@helper辅助方法，那如果我想在其他页面也使用呢？？？？
我们在控制器中另外添加一个方法，并创建视图页面：
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
} public ActionResult AnotherIndex()
{
return View();
}
}
AnotherIndex视图：
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>AnotherIndex</title>
</head>
<body>
<div>
</div>
</body>
</html>
那么，我们现在要怎么做呢，才能在所有页面都能使用同一个@helper辅助方法呢？？？
这样；我们先添加一个App_Code文件夹，然后在里面新建一个视图，把刚才声明辅助方法的部分，完整不动的拷贝过去。
接着编译一下整个项目【PS：如果没有出来智能提示，就改一下，App_Code下，视图的属性，改为
，在页面中，Index视图中，这样调用：
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div>
@*调用辅助方法*@
@HTMLClass.SayHello(new string[] { "C#","Javascript","ASP.NET MVC","EntityFramework","WCF","WPF","......"})
</div>
</body>
</html>
AnotherIndex视图中：
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>AnotherIndex</title>
</head>
<body>
<div>
@HTMLClass.SayHello(new string[] { "1","2"})
</div>
</body>
</html>
结果还是一样的，现在不同的是，可以在多个页面使用同一个辅助方法了。
2.Custom HTML helpers【自定义的HTML帮助类】
现在看看第二种，也就是自定义的HTML帮助类：
我们可以创建2种方式的，自定义帮助类：
1.Using static methods【使用静态的方法】
2.Using extension methods【使用扩展方法】
首先看看，使用静态方法怎么做的。
新建一个文件夹【CustomerHelper】，在CustomerHelper下面新建一个帮助类【CustomerHelperClass】
帮助类中，我们新建一个静态的方法CreateImage：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
//MvcHtmlString需要引入命名空间
using System.Web.Mvc; namespace HTMLHelperMVC.CustomerHelper
{
public class CustomerHelperClass
{
/// <summary>
/// 静态方法，创建Image
/// </summary>
/// <param name="imageSource">图片源</param>
/// <param name="alttext">图片的alt属性值</param>
/// <param name="width">宽度</param>
/// <param name="hight">高度</param>
/// <returns></returns>
public static MvcHtmlString CreateImage(string imageSource, string altText, string width, string hight)
{
//通过TagBuilder创建img标签
TagBuilder imageTag = new TagBuilder("img");
//MergeAttribute添加新特性
imageTag.MergeAttribute("src", imageSource);
imageTag.MergeAttribute("alt", altText);
imageTag.MergeAttribute("width", width);
imageTag.MergeAttribute("hight",hight);
// MvcHtmlString.Create,使用指定的文本值，创建HTML编码的字符串
return MvcHtmlString.Create(imageTag.ToString(TagRenderMode.SelfClosing)); }
}
}
然后我们在视图中调用:
@{
Layout = null;
}
<!DOCTYPE html>
@using HTMLHelperMVC.CustomerHelper
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div>
@*调用辅助方法*@
@*@HTMLClass.SayHello(new string[] { "C#","Javascript","ASP.NET MVC","EntityFramework","WCF","WPF","......"})*@
@CustomerHelperClass.CreateImage("/Image/1.png","Daniel","150","150")
</div>
</body>
</html>
结果是：
可以看到静态方法，为我们创建了Image控件，上面的调用需要Using一下辅助类：
@using HTMLHelperMVC.CustomerHelper
每次都要using是不是很麻烦？？？
我们可以在视图的配置文件中，加上这句话：
顺便改一下配置文件的属性：
在编译一下：
之后，我们去掉视图页面中的
@using HTMLHelperMVC.CustomerHelper
得到的结果也是一样的。
再来说说，扩展方法的方式，自定义辅助HTML吧：
其实这就更简单了，无非就是扩展方法，扩展HTMLHelper类：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
//MvcHtmlString需要引入命名空间
using System.Web.Mvc; namespace HTMLHelperMVC.CustomerHelper
{
public static class CustomerHelperClass
{
/// <summary>
/// 静态方法，创建Image
/// </summary>
/// <param name="imageSource">图片源</param>
/// <param name="alttext">图片的alt属性值</param>
/// <param name="width">宽度</param>
/// <param name="hight">高度</param>
/// <returns></returns>
public static MvcHtmlString CreateImage(string imageSource, string altText, string width, string hight)
{
//通过TagBuilder创建img标签
TagBuilder imageTag = new TagBuilder("img");
//MergeAttribute添加新特性
imageTag.MergeAttribute("src", imageSource);
imageTag.MergeAttribute("alt", altText);
imageTag.MergeAttribute("width", width);
imageTag.MergeAttribute("hight",hight);
// MvcHtmlString.Create,使用指定的文本值，创建HTML编码的字符串
return MvcHtmlString.Create(imageTag.ToString(TagRenderMode.SelfClosing)); } public static MvcHtmlString CreateImage(this HtmlHelper htmlHelper, string imageSource, string altText, string width, string hight)
{
//通过TagBuilder创建img标签
TagBuilder imageTag = new TagBuilder("img");
//MergeAttribute添加新特性
imageTag.MergeAttribute("src", imageSource);
imageTag.MergeAttribute("alt", altText);
imageTag.MergeAttribute("width", width);
imageTag.MergeAttribute("hight", hight);
// MvcHtmlString.Create,使用指定的文本值，创建HTML编码的字符串
return MvcHtmlString.Create(imageTag.ToString(TagRenderMode.SelfClosing)); }
}
}
视图中调用：
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div>
@*调用辅助方法*@
@*@HTMLClass.SayHello(new string[] { "C#","Javascript","ASP.NET MVC","EntityFramework","WCF","WPF","......"})*@
@CustomerHelperClass.CreateImage("/Image/1.png","Daniel","150","150")
@Html.CreateImage("/Image/1.png", "Daniel", "150", "150")
</div>
</body>
</html>
结果是一样的。。
MVC学习系列4--@helper辅助方法和用户自定义HTML方法的更多相关文章
- ASP.NET MVC学习系列(二)-WebAPI请求
继续接着上文 ASP.NET MVC学习系列(一)-WebAPI初探 来看看对于一般前台页面发起的get和post请求,我们在Web API中要如何来处理. 这里我使用Jquery 来发起异步请求实现 ...
- ASP.NET MVC学习系列(二)-WebAPI请求(转)
转自:http://www.cnblogs.com/babycool/p/3922738.html 继续接着上文 ASP.NET MVC学习系列(一)-WebAPI初探 来看看对于一般前台页面发起的g ...
- [转]ASP.NET MVC学习系列(二)-WebAPI请求 传参
[转]ASP.NET MVC学习系列(二)-WebAPI请求 传参 本文转自:http://www.cnblogs.com/babycool/p/3922738.html ASP.NET MVC学习系 ...
- ASP.NET MVC学习系列(二)-WebAPI请求 转载https://www.cnblogs.com/babycool/p/3922738.html
继续接着上文 ASP.NET MVC学习系列(一)-WebAPI初探 来看看对于一般前台页面发起的get和post请求,我们在Web API中要如何来处理. 这里我使用Jquery 来发起异步请求实现 ...
- MVC学习系列——ModelBinder扩展
在MVC系统中,我们接受数据,运用的是ModelBinder 的技术. MVC学习系列——ActionResult扩展在这个系列中,我们自定义了XmlResult的返回结果. 那么是不是意味着能POS ...
- MVC学习系列——记一次失败面试后，感想。
在此写博客之际,热烈庆祝母校苏州科技学院,正式改名为苏州科技大学. 一晃眼,从自己投身IT行业已经两年有余,期间经历了结婚.买房等人生大事,非常感谢我的老婆,谢谢她这么爱我,嫁给我这个码农,呵呵... ...
- MVC学习系列14--Bundling And Minification【捆绑和压缩】--翻译国外大牛的文章
这个系列是,基础学习系列的最后一部分,这里,我打算翻译一篇国外的技术文章结束这个基础部分的学习:后面打算继续写深入学习MVC系列的文章,之所以要写博客,我个人觉得,做技术的,首先得要懂得分享,说不定你 ...
- Asp.net MVC 学习系列（一）序
题外话 公司本月开始提供早餐服务,2块天一餐,包括粥,两个包(听说是利口福供应的),一个鸡蛋.良心企业.公司原本有一个内部订餐系统,用Delphi开发的,开发的人早就走光了,也没有留下什么文档,现在项 ...
- MVC 学习系列
总是很难说清MVC的概念,即使读了源代码后(读的时候有些东西,理解起来还是有点吃力),也依然能难对整体的每一个具体的原理说的一清二楚.为了达到自己学习的目的,我把自己的学习路线写成文章,一边自己能对M ...
随机推荐
- Repository 仓储，你的归宿究竟在哪？（三）－SELECT 某某某。。。
写在前面 首先,本篇博文主要包含两个主题: 领域服务中使用仓储 SELECT 某某某(有点晕?请看下面.) 上一篇:Repository 仓储,你的归宿究竟在哪?(二)-这样的应用层代码,你能接受吗? ...
- Spring Boot -- Start Up
做Java Web的同学,都知道项目启动需要放到servlet容器里面运行,无论是使用哪一款IDE,都是非常麻烦的一件事情.在很早之前,一个servlet容器下可以放下很多的项目,并一起运行,而到现在 ...
- Java基础之IO流
很长时间都没有更新了,最近在补充JavaSE的一些细节部分 关于IO流的一些总结 首先要介绍的是File类,File类用于对文件和目录的一些操作 1.创建文件CreateNewFile() 2.对文件 ...
- Atitit 图像处理类库大总结attilax qc20
Atitit 图像处理类库大总结attilax qc20 1.1. 选择与组合不同的图像处理类库1 1.2. Halcon 貌似商业工具,功能强大.1 1.3. Openvc Openvc功能也是比 ...
- php使用CI发送qq和163邮件
1.需求 发送邮件 2.介绍 使用CI框架的email类库发送邮件,这里演示QQ和163 3.163使用教程 a.先去163邮件开启smtp邮件. b.在CI的控制器里写下面的代码 $this-> ...
- Java设计模式之代理模式（Proxy）
前言: 最近在研究Retrofit开源框架的时候,其主要核心代码是通过注解标示参数,动态代理模式实现具体接口,反射机制进行参数解析,最终实现发送请求.其实之前在学习Xutils源码的时候,Xutils ...
- mssql 字增自段怎样重置（重新自增）|清空表已有数据
方法1 -- 清空已有数据,并且将自增自段恢复从1开始计数 truncate table 表名 方法2 -- 不清空已有数据,但将自增自段恢复从1开始计数 dbcc checkident(表名,RES ...
- (原)用pixi.js 实现 方块阵点击后原地自转效果
源码 各位,请教一个问题,我这个还有BUG,我是想实现,点击一下可以 停止转动,然后再点一下重新转动.而不是一直加速,有没有什么好办法? PS:问题已经解决,谢谢评论的大神@Antineutrino ...
- 跨域之Ajax
提到Ajax,一般都会想到XMLHttpRequest对象,通过这个对象向服务器发送请求,可以实现页面无刷新而更新数据. 由于同源策略的限制,一般情况下,只能通过XMLHttpRequest对象向同源 ...
- GO语言下载、安装、配置
一.Go语言下载 go语言官方下载地址:https://golang.org/dl/ 找到适合你系统的版本下载,本人下载的是windows版本.也可以下载Source自己更深层次研究go语言. 二.G ...