ASP.NET MVC ImageLink HTML Helper

• 下载解决方案 - 277.09 KB

引言

在本文中，我将向您展示如何创建 ImageLink HTML helper。我假设您已经理解了如何创建自定义 HTML helper。如果您还没有理解，请观看 Stephen Walther 提供的这个 视频。

背景

在 ASP.NET MVC 1.0 中，如果您想创建一个链接到 URL 地址的图片，可以这样做。

<a href="<%=Url.Action("About", "Home")%>">
	<img alt="" src="../../Content/Images/btn_account.jpg" /></a> 

不幸的是，这让我不满意。所以我决定创建我自己的 ImageLink HTML helper。

Using the Code

扩展函数如下所示（用 VB.NET 编写）

Imports System.Runtime.CompilerServices
Public Module ImageExtensions
    <Extension()> _
    Public Function ImageLink(ByVal html As HtmlHelper, _
                              ByVal action As String, _
                              ByVal controller As String, _
                              ByVal routeValues As Object, _
                              ByVal imageURL As String, _
                              ByVal alternateText As String, _
                              ByVal linkHtmlAttributes As Object, _
                              ByVal imageHtmlAttributes As Object) As String
        ' Create an instance of UrlHelper
        Dim url As New UrlHelper(html.ViewContext.RequestContext)
        ' Create image tag builder
        Dim imageBuilder As New TagBuilder("img")
        ' Add image attributes
        imageBuilder.MergeAttribute("src", imageURL)
        imageBuilder.MergeAttribute("alt", alternateText)
        imageBuilder.MergeAttributes( _
            New RouteValueDictionary(imageHtmlAttributes))
        ' Create link tag builder
        Dim linkBuilder As New TagBuilder("a")
        ' Add attributes
        linkBuilder.MergeAttribute("href", url.Action_
		(action, controller, New RouteValueDictionary(routeValues)))
        linkBuilder.InnerHtml = imageBuilder.ToString(TagRenderMode.SelfClosing)
        linkBuilder.MergeAttributes(New RouteValueDictionary(linkHtmlAttributes))
        ' Render tag
        Return linkBuilder.ToString(TagRenderMode.Normal)
    End Function
End Module

上面的代码只是创建一个锚点，并在其中放置一个图片。

然后您可以在视图中这样调用它

<%@ Page Language="VB" MasterPageFile="~/Views/Shared/Site.Master"
	Inherits="System.Web.Mvc.ViewPage" %>
<%@ Import Namespace="MvcApplication1" %>

<asp:Content ID="indexTitle" ContentPlaceHolderID="TitleContent" runat="server">
Home Page
</asp:Content>

<asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">
<h2><%= Html.Encode(ViewData("Message")) %></h2>
<p>
To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc"
	title="ASP.NET MVC Website">http://asp.net/mvc</a>.
</p>

<%=Html.ImageLink("About", "Home", Nothing,
	"../../Content/Images/btn_account.jpg", "About", Nothing,
	New With {.style = "border:0px;"})%>
</asp:Content>

重要提示： 不要忘记在视图页面中导入应用程序的命名空间。

您还可以为 ImageLink 方法添加重载，例如

<Extension()> _
Public Function ImageLink(ByVal html As HtmlHelper, _
                      ByVal action As String, _
                      ByVal controller As String, _
                      ByVal imageURL As String, _
                      ByVal alternateText As String) As String
    Return ImageLink(html, action, controller, Nothing, _
    imageURL, alternateText, Nothing, Nothing)
End Function
<Extension()> _
Public Function ImageLink(ByVal html As HtmlHelper, _
                          ByVal action As String, _
                          ByVal controller As String, _
                          ByVal routeValues As Object, _
                          ByVal imageURL As String, _
                          ByVal alternateText As String) As String
    Return ImageLink(html, action, controller, routeValues, _
	imageURL, alternateText, Nothing, Nothing)
End Function

因此，您可以在视图页面中这样调用 ImageLink，而无需指定不必要的参数

<%=Html.ImageLink("About", "Home", Nothing,
	"../../Content/Images/btn_account.jpg", "About")%>

关注点

通过阅读本文，您会意识到通过添加自定义 HTML helper 来扩展 ASP.NET MVC 1.0 功能非常容易。无需等待下一个版本或从第三方购买以获取您想要的“控件”，只需自己创建它即可。

历史

• 2009 年 5 月 8 日：初始发布