在HTML Helper,帮助类的帮助下,我们可以动态的创建HTML控件。HTML帮助类是在视图中,用来呈现HTML内容的。HTML帮助类是一个方法,它返回的是string类型的值。

HTML帮助类,分成三个类型:

  1. Inline HTML helpers【内联的HTML帮助类,例如@Html.Label等】
  2. Built-in HTML helpers【也就是嵌套的HTML帮助类,即@helper辅助方法】
  3. Custom HTML helpers【自定义的HTML帮助类】

在这里,我们学习第二种,和第三种,第一种太简单了,这里就不介绍了。关于第一种,我之前的文章中有介绍,大家可以看看。

  1. 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>

结果是一样的。。

每天学一点,每天积累一天,进步就不止一点点!PS:好记性不如烂笔头,学会总结,学会思考~~~ ----要飞翔,必须靠自己!
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
ASP.NET MVC基础学习系列

摘要: 这个系列是,基础学习系列的最后一部分,这里,我打算翻译一篇国外的技术文章结束这个基础部分的学习;后面打算继续写深入学习MVC系列的文章,之所以要写博客,我个人觉得,做技术的,首先得要懂得分享,说不定你自己以为正确的东西,存在瑕疵,分享出来,大家也可以互相进步。这样整个生态圈也会越来越好。不是么? 好阅读全文
posted @ 2016-07-30 11:43 灰太狼的梦想 阅读(490) | 评论 (7) 编辑
摘要: 大多数的开发者,可能会遇到这样的情况:当我们在创建用户之前,有必要去检查是否数据库中已经存在相同名字的用户。换句话说就是,我们要确保程序中,只有一个唯一的用户名,不能有重复的。相信大多数人都有不同的解决方法,但是ASP.NET MVC中,为我们提供了一个特性,就是Remote Validation,阅读全文
posted @ 2016-07-28 12:14 灰太狼的梦想 阅读(937) | 评论 (4) 编辑
摘要: 前面两篇文章学习到了,服务端验证,和客户端的验证,但大家有没有发现,这两种验证各自都有弊端,服务器端的验证,验证的逻辑和代码的逻辑混合在一起了,如果代码量很大的话,以后维护扩展起来,就不是很方便。而客户端的验证,必须要启用客户端验证,也就是在配置文件中配置相应的节点,并且还要引入Jquery插件。如阅读全文
posted @ 2016-07-21 09:33 灰太狼的梦想 阅读(1211) | 评论 (20) 编辑
摘要: 前面学习了,服务端验证,这篇文章中,我们接着学习客户端验证,客户端的验证,使用Jquery和Jquery插件来实现【jquery.validate.min.js and jquery.validate.unobtrusive.min.js)】 在服务端验证中,页面必须要提交到服务器,进行验证,如果数阅读全文
posted @ 2016-07-20 17:48 灰太狼的梦想 阅读(473) | 评论 (8) 编辑
摘要: 这篇文章,我将会说到,使用数据注解API来进行服务端验证。ASP.NET MVC 框架在执行的时候,验证所有传递到控制器的数据,如果验证失败就把错误消息,填充到ModelState对象中,并且把这个对象传递给控制器,然后控制器中的方法,根据Modelstate的状态来判断,是否验证失败还是验证通过。阅读全文
posted @ 2016-07-20 17:16 灰太狼的梦想 阅读(382) | 评论 (2) 编辑
摘要: 前面学习了,从控制器向视图传递数据,现在学习怎么从视图向控制器传递数据。 通常,我们有两种方式,来处理浏览器的请求,一个是GET方式,一个是POST方式。一般来说,直接通过在浏览器中输入URL话,请求的方式是GET,那么GET方式的Action方法将会被调用,另一方面,如果是点击一个Button提交阅读全文
posted @ 2016-07-19 12:10 灰太狼的梦想 阅读(725) | 评论 (6) 编辑
摘要: 分页和排序,应该是软件开发中,需要必知必会的技能了,对于分页,网上很多教程,当然,别人终究是别人的,只有自己理解,会了,并且吸收之后,再用自己的语言,传授出来,这才是硬道理。好了,废话说多了。现在我们进入正题: 这里,我打算使用EF Code-First方式分页控件就是用PagedList.MVC,阅读全文
posted @ 2016-07-18 15:11 灰太狼的梦想 阅读(843) | 评论 (8) 编辑
摘要: 【使用场景:两个DropDownList的联动,选择其中一个DropDownList,然后加载数据到另外的一个DropDownList上】 这里,我打算实现的需求是:有两个DropDownList,一个默认加载所有的省份数据,然后,当我选择省份的时候,把对应的市的数据,绑定到另外一个DropDown阅读全文
posted @ 2016-07-16 16:14 灰太狼的梦想 阅读(708) | 评论 (6) 编辑
摘要: Ajax的应用在平时的工作中,很是常见,这篇文章,完全是为了,巩固复习。 我们先看看不使用json格式返回分部视图: 先说需求吧: 我有两个实体,一个是出版商【Publisher】,一个是书【Book】(很显然这是一对多的关系,一个出版商可以出版很多书籍,一本书只有一个出版商。),这里,我要实现的是阅读全文
posted @ 2016-07-16 11:07 灰太狼的梦想 阅读(583) | 评论 (13) 编辑
摘要: 我们开发网站项目的时候,都会遇到这样的问题:就是页面怎么统一风格,有一致的外观,在之前ASP.NET的时代,我们有两种选择,一个是使用MasterPage页,一个是手动,自己在每个页面写CSS样式,但这样代码量太大了。。不可取,那么到了ASP.NET MVC时代,有什么技术可以统一页面风格呢???有阅读全文
posted @ 2016-07-16 10:31 灰太狼的梦想 阅读(601) | 评论 (0) 编辑
摘要: 在HTML Helper,帮助类的帮助下,我们可以动态的创建HTML控件。HTML帮助类是在视图中,用来呈现HTML内容的。HTML帮助类是一个方法,它返回的是string类型的值。 HTML帮助类,分成三个类型: 在这里,我们学习第二种,和第三种,第一种太简单了,这里就不介绍了。关于第一种,我之前阅读全文
posted @ 2016-07-14 13:05 灰太狼的梦想 阅读(421) | 评论 (3) 编辑
摘要: 在MVC中,从控制器到视图,传递数据,可以使用 ViewData 和 ViewBag;同样从视图到控制器,传递数据,可以使用Post,QueryString,或者隐藏域;最后从控制器到控制器,传递数据可以使用TempData。 注意:当然,从控制器到视图,传递数据,还可以使用TempData的。 我阅读全文
posted @ 2016-07-14 11:00 灰太狼的梦想 阅读(721) | 评论 (0) 编辑
摘要: 首先,新建一个web项目,新建一个Home控制器,默认的代码如下: 现在我要向Index方法,传递一个参数,id,为了方便测试,适当的修改一下代码 然后运行程序,结果是。。。 在浏览器中输入:Home/Index/200,就得到想要的结果了。也就是向action方法,传递了一个参数id,值为200.阅读全文
posted @ 2016-07-13 23:10 灰太狼的梦想 阅读(570) | 评论 (4) 编辑
摘要: 上面的虚线表示:被动角色。实线表示:主动角色。 1.控制器和视图:控制器和视图是双向的关系,但控制器的关系更主动。 当控制器是主动的角色的时候,控制器决定要显示哪一个View;当视图为主动角色时,视图可以决定,要将数据返回给控制器中的哪一个Action方法,并且,当数图需要数据的时候,可以决定数据应阅读全文
posted @ 2016-07-13 22:21 灰太狼的梦想 阅读(483) | 评论 (2) 编辑

MVC学习系列4--@helper辅助方法和用户自定义HTML方法的更多相关文章

  1. ASP.NET MVC学习系列(二)-WebAPI请求

    继续接着上文 ASP.NET MVC学习系列(一)-WebAPI初探 来看看对于一般前台页面发起的get和post请求,我们在Web API中要如何来处理. 这里我使用Jquery 来发起异步请求实现 ...

  2. ASP.NET MVC学习系列(二)-WebAPI请求(转)

    转自:http://www.cnblogs.com/babycool/p/3922738.html 继续接着上文 ASP.NET MVC学习系列(一)-WebAPI初探 来看看对于一般前台页面发起的g ...

  3. [转]ASP.NET MVC学习系列(二)-WebAPI请求 传参

    [转]ASP.NET MVC学习系列(二)-WebAPI请求 传参 本文转自:http://www.cnblogs.com/babycool/p/3922738.html ASP.NET MVC学习系 ...

  4. ASP.NET MVC学习系列(二)-WebAPI请求 转载https://www.cnblogs.com/babycool/p/3922738.html

    继续接着上文 ASP.NET MVC学习系列(一)-WebAPI初探 来看看对于一般前台页面发起的get和post请求,我们在Web API中要如何来处理. 这里我使用Jquery 来发起异步请求实现 ...

  5. MVC学习系列——ModelBinder扩展

    在MVC系统中,我们接受数据,运用的是ModelBinder 的技术. MVC学习系列——ActionResult扩展在这个系列中,我们自定义了XmlResult的返回结果. 那么是不是意味着能POS ...

  6. MVC学习系列——记一次失败面试后,感想。

    在此写博客之际,热烈庆祝母校苏州科技学院,正式改名为苏州科技大学. 一晃眼,从自己投身IT行业已经两年有余,期间经历了结婚.买房等人生大事,非常感谢我的老婆,谢谢她这么爱我,嫁给我这个码农,呵呵... ...

  7. MVC学习系列14--Bundling And Minification【捆绑和压缩】--翻译国外大牛的文章

    这个系列是,基础学习系列的最后一部分,这里,我打算翻译一篇国外的技术文章结束这个基础部分的学习:后面打算继续写深入学习MVC系列的文章,之所以要写博客,我个人觉得,做技术的,首先得要懂得分享,说不定你 ...

  8. Asp.net MVC 学习系列(一)序

    题外话 公司本月开始提供早餐服务,2块天一餐,包括粥,两个包(听说是利口福供应的),一个鸡蛋.良心企业.公司原本有一个内部订餐系统,用Delphi开发的,开发的人早就走光了,也没有留下什么文档,现在项 ...

  9. MVC 学习系列

    总是很难说清MVC的概念,即使读了源代码后(读的时候有些东西,理解起来还是有点吃力),也依然能难对整体的每一个具体的原理说的一清二楚.为了达到自己学习的目的,我把自己的学习路线写成文章,一边自己能对M ...

随机推荐

  1. Building the Testing Pipeline

    This essay is a part of my knowledge sharing session slides which are shared for development and qua ...

  2. Sublime Text3使用总结

    写在前面的话:平时做项目中在用eclipse和vs,但是对于一些小项目,感觉没有必要搞那么大的一个工具使用,比如写个小微商城,搞个小脚本了什么,所以就一直在用Sublime Text,界面清新简洁,没 ...

  3. TODO:Golang语言TCP/UDP协议重用地址端口

    TODO:Golang语言TCP/UDP协议重用地址端口 这是一个简单的包来解决重用地址的问题. go net包(据我所知)不允许设置套接字选项. 这在尝试进行TCP NAT时尤其成问题,其需要在同一 ...

  4. 提高(Android)开发效率的工具与网站

    Dev_Tools 写这篇不是为了"水",是因为有些工具确实不错,但是换个电脑要找到或者在某个时候你想用但是你只知道存在了书签里.然后就只能下载chrome然后登录账户同步书签了. ...

  5. Enterprise Solution 开源项目资源汇总 Visual Studio Online 源代码托管 企业管理软件开发框架

    Enterprise Solution 是一套管理软件开发框架,在这个框架基础上开发出一套企业资源计划系统Enterprise Edition. 现将Enterprise Solution开发过程中遇 ...

  6. Java学习之LinkedHashMap学习总结

    前言: 在学习LRU算法的时候,看到LruCache源码实现是基于LinkedHashMap,今天学习一下LinkedHashMap的好处以及如何实现lru缓存机制的. 需求背景: LRU这个算法就是 ...

  7. JMS学习之路(一):整合activeMQ到SpringMVC

    JMS的全称是Java Message Service,即Java消息服务.它主要用于在生产者和消费者之间进行消息传递,生产者负责产生消息,而消费者负责接收消息.把它应用到实际的业务需求中的话我们可以 ...

  8. C语言之预处理

    这是2016年的最后一篇博客,年初定的计划是写12篇博客,每月一篇,1/3转载,2/3原创,看来是实现不了了! -- 题外话.今天要写的东西是C语言中的预处理器,我们常说的宏定义的用法.为什么要写这个 ...

  9. C# Excel数据有效性

    C# Excel数据有效性 在Excel中,我们可以使用数据有效性功能来定义哪些数据可以被输入到工作表的单元格中,例如,限制输入的数据为一定范围内的数字或使用下拉列表来限制用户可选择的数据等.这篇文章 ...

  10. .net汉字转字母

    目前手上有一个需要实现:将用户输入的姓名转换成汉语拼音. 使用枚举,既麻烦又易出错,发现有一个微软拼音转换工具类ChnCharInfo.dll,在此记录下: 首先需要引入此dll, 链接: http: ...