MVC学习系列4--@helper辅助方法和用户自定义HTML方法

Posted on 2017-01-06 11:32 WebEnh 阅读(250) 评论(0) 编辑收藏举报

在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>

结果是一样的。。

每天学一点，每天积累一天，进步就不止一点点！PS：好记性不如烂笔头，学会总结，学会思考～～～ ----要飞翔，必须靠自己！

ASP.NET MVC基础学习系列

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

摘要: 这个系列是，基础学习系列的最后一部分，这里，我打算翻译一篇国外的技术文章结束这个基础部分的学习；后面打算继续写深入学习ＭＶＣ系列的文章，之所以要写博客，我个人觉得，做技术的，首先得要懂得分享，说不定你自己以为正确的东西，存在瑕疵，分享出来，大家也可以互相进步。这样整个生态圈也会越来越好。不是么？好阅读全文

posted @ 2016-07-30 11:43 灰太狼的梦想阅读(490) | 评论 (7) 编辑

MVC学习系列13--验证系列之Remote Validation

摘要: 大多数的开发者，可能会遇到这样的情况：当我们在创建用户之前，有必要去检查是否数据库中已经存在相同名字的用户。换句话说就是，我们要确保程序中，只有一个唯一的用户名，不能有重复的。相信大多数人都有不同的解决方法，但是ASP.NET MVC中，为我们提供了一个特性，就是Remote Validation，阅读全文

posted @ 2016-07-28 12:14 灰太狼的梦想阅读(937) | 评论 (4) 编辑

MVC学习系列12---验证系列之Fluent Validation

摘要: 前面两篇文章学习到了，服务端验证，和客户端的验证，但大家有没有发现，这两种验证各自都有弊端，服务器端的验证，验证的逻辑和代码的逻辑混合在一起了，如果代码量很大的话，以后维护扩展起来，就不是很方便。而客户端的验证，必须要启用客户端验证，也就是在配置文件中配置相应的节点，并且还要引入Jquery插件。如阅读全文

posted @ 2016-07-21 09:33 灰太狼的梦想阅读(1211) | 评论 (20) 编辑

MVC学习系列11---验证系列之客户端验证

摘要: 前面学习了，服务端验证，这篇文章中，我们接着学习客户端验证，客户端的验证，使用Jquery和Jquery插件来实现【jquery.validate.min.js and jquery.validate.unobtrusive.min.js)】在服务端验证中，页面必须要提交到服务器，进行验证，如果数阅读全文

posted @ 2016-07-20 17:48 灰太狼的梦想阅读(473) | 评论 (8) 编辑

MVC学习系列10---验证系列之服务器端验证

摘要: 这篇文章，我将会说到，使用数据注解API来进行服务端验证。ASP.NET MVC 框架在执行的时候，验证所有传递到控制器的数据，如果验证失败就把错误消息，填充到ModelState对象中，并且把这个对象传递给控制器，然后控制器中的方法，根据Modelstate的状态来判断，是否验证失败还是验证通过。阅读全文

posted @ 2016-07-20 17:16 灰太狼的梦想阅读(382) | 评论 (2) 编辑

MVC学习系列9--控制器接收从视图传递过来的参数

摘要: 前面学习了，从控制器向视图传递数据，现在学习怎么从视图向控制器传递数据。通常，我们有两种方式，来处理浏览器的请求，一个是GET方式，一个是POST方式。一般来说，直接通过在浏览器中输入URL话，请求的方式是GET，那么GET方式的Action方法将会被调用，另一方面，如果是点击一个Button提交阅读全文

posted @ 2016-07-19 12:10 灰太狼的梦想阅读(725) | 评论 (6) 编辑

MVC学习系列8--分页和排序

摘要: 分页和排序，应该是软件开发中，需要必知必会的技能了，对于分页，网上很多教程，当然，别人终究是别人的，只有自己理解，会了，并且吸收之后，再用自己的语言，传授出来，这才是硬道理。好了，废话说多了。现在我们进入正题：这里，我打算使用EF Code-First方式分页控件就是用PagedList.MVC,阅读全文

posted @ 2016-07-18 15:11 灰太狼的梦想阅读(843) | 评论 (8) 编辑

MVC学习系列7--下拉框的联动

摘要: 【使用场景：两个DropDownList的联动，选择其中一个DropDownList，然后加载数据到另外的一个DropDownList上】这里，我打算实现的需求是：有两个DropDownList，一个默认加载所有的省份数据，然后，当我选择省份的时候，把对应的市的数据，绑定到另外一个DropDown阅读全文

posted @ 2016-07-16 16:14 灰太狼的梦想阅读(708) | 评论 (6) 编辑

MVC学习系列6--使用Ajax加载分部视图和Json格式的数据

摘要: Ajax的应用在平时的工作中，很是常见，这篇文章，完全是为了，巩固复习。我们先看看不使用json格式返回分部视图：先说需求吧：我有两个实体，一个是出版商【Publisher】，一个是书【Book】（很显然这是一对多的关系，一个出版商可以出版很多书籍，一本书只有一个出版商。），这里，我要实现的是阅读全文

posted @ 2016-07-16 11:07 灰太狼的梦想阅读(583) | 评论 (13) 编辑

MVC学习系列5--Layout布局页和RenderSection的使用

摘要: 我们开发网站项目的时候，都会遇到这样的问题：就是页面怎么统一风格，有一致的外观，在之前ASP.NET的时代，我们有两种选择，一个是使用MasterPage页，一个是手动，自己在每个页面写CSS样式，但这样代码量太大了。。不可取，那么到了ASP.NET MVC时代，有什么技术可以统一页面风格呢？？？有阅读全文

posted @ 2016-07-16 10:31 灰太狼的梦想阅读(601) | 评论 (0) 编辑

MVC学习系列4--@helper辅助方法和用户自定义HTML方法

摘要: 在HTML Helper，帮助类的帮助下，我们可以动态的创建HTML控件。HTML帮助类是在视图中，用来呈现HTML内容的。HTML帮助类是一个方法，它返回的是string类型的值。 HTML帮助类，分成三个类型：在这里，我们学习第二种，和第三种，第一种太简单了，这里就不介绍了。关于第一种，我之前阅读全文

posted @ 2016-07-14 13:05 灰太狼的梦想阅读(421) | 评论 (3) 编辑

MVC学习系列3--怎么从控制器向视图传递数据

摘要: 在MVC中，从控制器到视图，传递数据，可以使用 ViewData 和 ViewBag；同样从视图到控制器，传递数据，可以使用Post，QueryString，或者隐藏域；最后从控制器到控制器，传递数据可以使用TempData。注意：当然，从控制器到视图，传递数据，还可以使用TempData的。我阅读全文

posted @ 2016-07-14 11:00 灰太狼的梦想阅读(721) | 评论 (0) 编辑

MVC学习系列2--向Action方法传递参数

摘要: 首先，新建一个web项目，新建一个Home控制器，默认的代码如下：现在我要向Index方法，传递一个参数，id,为了方便测试，适当的修改一下代码然后运行程序，结果是。。。在浏览器中输入：Home/Index/200，就得到想要的结果了。也就是向action方法，传递了一个参数id,值为200.阅读全文

posted @ 2016-07-13 23:10 灰太狼的梦想阅读(570) | 评论 (4) 编辑

MVC学习系列1--什么是MVC

摘要: 上面的虚线表示：被动角色。实线表示：主动角色。 1.控制器和视图：控制器和视图是双向的关系，但控制器的关系更主动。当控制器是主动的角色的时候，控制器决定要显示哪一个View；当视图为主动角色时，视图可以决定，要将数据返回给控制器中的哪一个Action方法，并且，当数图需要数据的时候，可以决定数据应阅读全文

posted @ 2016-07-13 22:21 灰太狼的梦想阅读(483) | 评论 (2) 编辑