如何在asp.net mvc中添加自定义的HTML辅助种方法

很久没在博客园发表文章了,今天来总结一下如何在asp.net mvc中添加自定义的HTML辅助方法。我们现在设计这么一个目前,利用自定义的HTML方法来渲染一个普通的img标记。直接进入主题吧:

首先我们先来看一下一个普通的img标签在HTML中的代码:

<img src="Content/images/封面.jpg" alt="图片" id="img01" width="500px" height="250px" class="img" style="" />

  这个是我们渲染之后从服务器端输出到浏览器中的结果,那么现在我们来实现它。

第一步,我们需要定义一个扩展方法,这个扩展方法就是用来渲染img元素的,代码如下:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

//注意:第一点,名称空间必须为System.Web.Mvc.Html
namespace System.Web.Mvc.Html
{
    //第二点,类名称可以为任意名称,但是必须为静态类
    public static class CreateImageExtensions
    {
        /*
        public static MvcHtmlString Image(this HtmlHelper html, string id,string url,string width,string height,Dictionary<string,object> attributes)
        {
            TagBuilder tagHelper = new TagBuilder("image");
            tagHelper.GenerateId(id);
            tagHelper.MergeAttribute("src", url);
            tagHelper.MergeAttribute("width", width);
            tagHelper.MergeAttribute("height", height);
            if (attributes!=null&&attributes.Count>0)
            tagHelper.MergeAttributes(attributes);
            return MvcHtmlString.Create( tagHelper.ToString());
        }*/

        //第三,扩展方法的名称可以使用任意名称,但是此方法必须满足以下两点:
        //01. 必须扩展自HtmlHelper类;
        //02. 方法的返回值类型必须为:MvcHtmlString
        public static MvcHtmlString CreateImage(this HtmlHelper html, string id, string src, string width, string height,string cssClass, Dictionary<string, object> attributes)
        {
            TagBuilder tagHelper = new TagBuilder("img");
            tagHelper.GenerateId(id);
            tagHelper.MergeAttribute("src", src);
            tagHelper.MergeAttribute("width", width);
            tagHelper.MergeAttribute("height", height);
            if (attributes != null && attributes.Count > 0)
                tagHelper.MergeAttributes(attributes);
            return MvcHtmlString.Create(tagHelper.ToString(TagRenderMode.SelfClosing));
        }
    }
}

  这里有三点值得注意的:

1.  名称空间必须为System.Web.Mvc.Html,这一点至关重要;

2. 类名称可以为任意名称,但是必须为静态类。事实上扩展方法也必须定义在一个静态类中;

3. 扩展方法的名称可以使用任意名称,但是必须扩展自HtmlHelper类,并且方法的返回值类型必须为:MvcHtmlString。

当然方法的参数列表和实现代码我们可以根据实际情况来进行定义和书写,我这里只是简单的整理一下步骤,我的实现代码很简单,仅仅是为了解释步骤。事实上类名和方法名也应该以具有“实际意义”的名称来名称,我们可以按照MVC框架的“约定”来进行命名,比如类名为ImageExtensions,方法名为Image等。值得注意的另一点是,其实我们可以定义重载方法用来满足我们的其他需求,比如强类型的版本,这个可以参考MVC框架的HTML辅助方法。

有了我们刚刚说的三点,接下来就是在View中调用我们刚刚定义的HTML辅助方法了,比如我们在Index.cshtml文件中添加如下代码:

<div>@Html.CreateImage("img01", Url.Content("~/Content/images/IMG_9084_2寸蓝底.jpg"),"551px","787px","imgCls", null)</div>

  这个就和我们一般的调用mvc框架的HTML辅助方法完全一致。

原文地址:https://www.cnblogs.com/bob-bao/p/8975344.html

时间: 2024-10-26 13:02:12

如何在asp.net mvc中添加自定义的HTML辅助种方法的相关文章

如何在 ASP.NET MVC 中集成 AngularJS(2)

在如何在 ASP.NET MVC 中集成 AngularJS(1)中,我们介绍了 ASP.NET MVC 捆绑和压缩.应用程序版本自动刷新和工程构建等内容. 下面介绍如何在 ASP.NET MVC 中集成 AngularJS 的第二部分. ASP.NET 捆绑和压缩 CSS 和 JavaScript 的捆绑与压缩功能是 ASP.NET MVC 最流行和有效的特性之一.捆绑和压缩降低了 HTTP 请求和有效载荷的大小,结果是可以更快和更好的执行 ASP.NET MVC 的网站.有许多可以减少 CS

如何在ASP.NET MVC 中获取当前URL、controller、action

一.URL的获取很简单,ASP.NET通用: [1]获取 完整url (协议名+域名+虚拟目录名+文件名+参数) string url=Request.Url.ToString(); [2]获取 虚拟目录名+页面名+参数: string url=Request.RawUrl;(或 string url=Request.Url.PathAndQuery;) [3]获取 虚拟目录名+页面名:string url=HttpContext.Current.Request.Url.AbsolutePath

如何在 ASP.NET MVC 中集成 AngularJS(3)

今天来为大家介绍如何在 ASP.NET MVC 中集成 AngularJS 的最后一部分内容. 调试路由表 - HTML 缓存清除 就在我以为示例应用程序完成之后,我意识到,我必须提供两个版本的路由表:一个运行在调试模式的应用程序下和一个运行在发布模式的应用程序下.在调试模式下,JavaScript 文件在未使用压缩功能的情况下会被下载.如果想要调试并在 JavaScript 控制器中设置断点,这是必须的.事实上,路由表的产生版本也出现了一些挑战,由于产生路由代码使用的是 JavaScript

Asp.Net MVC向视图View传值的三种方法

本文将总结Asp.Net MVC向视图View传值的三种常见的方法: -------------------------------------------------------------------------- 1.通过View( parameter )的参数传递 action: public ActionResult Index() { Person person=new Person("wumiao",18,175); return View("Index&quo

在ASP.NET MVC中加载部分视图的方法及差别

在视图里有多种方法可以加载部分视图,包括Partial() .Action().RenderPartial().RenderAction().RenderPage()方法.下面说明一下这些方法的差别. 1. Partial与RenderPartial方法 Partial可以直接输出内容,在内部将html内容转化为String字符(MVCHtmlString),然后缓存起来,最后一次性输出到页面.效率比较低 通常使用RenderPartial代替 2. RenderPartial与RenderAc

ASP.NET MVC提交到服务器的几种方法

多年不搞WEB开发了,最近有个小活干干,记录一下学习的心得. 以下为几种脚本向服务器提交的方法: 1. $.ajax({ type: "GET", url: "/TestRec/TaskConfig", data: { id: typevalue }, dataType:"html", success: function (evt) { $('#divEdit').html(evt); } }); 2. document.forms[0].act

angular.js的路由和模板在asp.net mvc 中的使用

我们知道angular.js是基于mvc 的一款优秀js框架,它也有一套自己的路由机制,和asp.net mvc 路由不太一样.asp.net mvc 的路由是通过不同的URL到不同的controller然后交给controller去呈现视图.但是在angular.js则是需要提前指定一个module(ng-app),然后去定义路由规则,通过不同的URL,来告诉ng-app 去加载哪个页面.再渲染到ng-view.通过angular.js路由的使用,可以很容易实现页面的局部刷新.更加高效的去创建

在 ASP.NET MVC 中使用 HTTPS (SSL/TLS)

某些安全性较高的网页,如网上支付或用户登陆页面,可能会使用到https(SSL/TLS)来提高安全性.本文介绍了如何在ASP.NET MVC中强制某action使用https和如何进行向https页面的跳转.我们先实现强制一个action使用https.这里写了一个RequireHttpsAttribute,它的作用是将非https连接转换成https连接,这样所有使用了RequireHttps这个filter的controller都会强制使用https连接. 1 using System.We

为ASP.NET MVC应用添加自定义路由

这里,我们将学习如何给asp.net mvc应用添加自定义路由.用自定义路由来修改默认路由表. 对一些简单的asp.net mvc应用,默认的路由表就已经足够了.但是,当你需要创建特殊的路由时,就需要创建自定义路由了. 假设正在进行一个blog项目的开发,希望处理用户的请求地址如下: /Archive/12-25-2009 当用户输入这个URL时,你想返回日期12-25-2009的blog入口,为了实现这个路由,需要添加自定义路由. 在这个asp.net mvc应用中,这个方法中含有一个自定义路