动作图像MVC3剃刀

在MVC3中用Razorreplace图像链接的最好方法是什么？ 我现在只是这样做：

<a href="@Url.Action("Edit", new { id=MyId })"><img src="../../Content/Images/Image.bmp", alt="Edit" /></a> 

有没有更好的办法？

Answer 1

您可以为HtmlHelper创build一个扩展方法来简化CSHTML文件中的代码。 你可以用这样的方法replace你的标签：

 // Sample usage in CSHTML @Html.ActionImage("Edit", new { id = MyId }, "~/Content/Images/Image.bmp", "Edit") 

以下是上述代码的示例扩展方法：

 // Extension method public static MvcHtmlString ActionImage(this HtmlHelper html, string action, object routeValues, string imagePath, string alt) { var url = new UrlHelper(html.ViewContext.RequestContext); // build the <img> tag var imgBuilder = new TagBuilder("img"); imgBuilder.MergeAttribute("src", url.Content(imagePath)); imgBuilder.MergeAttribute("alt", alt); string imgHtml = imgBuilder.ToString(TagRenderMode.SelfClosing); // build the <a> tag var anchorBuilder = new TagBuilder("a"); anchorBuilder.MergeAttribute("href", url.Action(action, routeValues)); anchorBuilder.InnerHtml = imgHtml; // include the <img> tag inside string anchorHtml = anchorBuilder.ToString(TagRenderMode.Normal); return MvcHtmlString.Create(anchorHtml); } 

Answer 2

您可以使用适用于所有链接的Url.Content ，因为它将代Url.Content转换为根URI。

 <a href="@Url.Action("Edit", new { id=MyId })"> <img src="@Url.Content("~/Content/Images/Image.bmp")", alt="Edit" /> </a> 

Answer 3

基于Lucas上面的回答，这是一个重载控制器名称作为参数，类似于ActionLink。 当图像链接到另一个控制器中的Action时，请使用此过载。

 // Extension method public static MvcHtmlString ActionImage(this HtmlHelper html, string action, string controllerName, object routeValues, string imagePath, string alt) { var url = new UrlHelper(html.ViewContext.RequestContext); // build the <img> tag var imgBuilder = new TagBuilder("img"); imgBuilder.MergeAttribute("src", url.Content(imagePath)); imgBuilder.MergeAttribute("alt", alt); string imgHtml = imgBuilder.ToString(TagRenderMode.SelfClosing); // build the <a> tag var anchorBuilder = new TagBuilder("a"); anchorBuilder.MergeAttribute("href", url.Action(action, controllerName, routeValues)); anchorBuilder.InnerHtml = imgHtml; // include the <img> tag inside string anchorHtml = anchorBuilder.ToString(TagRenderMode.Normal); return MvcHtmlString.Create(anchorHtml); } 

Answer 4

那么，你可以使用@Lucas解决scheme，但也有另一种方法。

  @Html.ActionLink("Update", "Update", *Your object value*, new { @class = "imgLink"}) 

现在，将这个类添加到CSS文件或您的页面中：

 .imgLink { background: url(YourImage.png) no-repeat; } 

有了这门课，任何一个环节都会有你想要的形象。

Answer 5

这原来是一个非常有用的线程。

对于那些对大括号过敏的人来说，这里是Lucas的VB.NET版本和Crake的答案：

 Public Module ActionImage <System.Runtime.CompilerServices.Extension()> Function ActionImage(html As HtmlHelper, Action As String, RouteValues As Object, ImagePath As String, AltText As String) As MvcHtmlString Dim url = New UrlHelper(html.ViewContext.RequestContext) Dim imgHtml As String 'Build the <img> tag Dim imgBuilder = New TagBuilder("img") With imgBuilder .MergeAttribute("src", url.Content(ImagePath)) .MergeAttribute("alt", AltText) imgHtml = .ToString(TagRenderMode.Normal) End With Dim aHtml As String 'Build the <a> tag Dim aBuilder = New TagBuilder("a") With aBuilder .MergeAttribute("href", url.Action(Action, RouteValues)) .InnerHtml = imgHtml 'Include the <img> tag inside aHtml = aBuilder.ToString(TagRenderMode.Normal) End With Return MvcHtmlString.Create(aHtml) End Function <Extension()> Function ActionImage(html As HtmlHelper, Action As String, Controller As String, RouteValues As Object, ImagePath As String, AltText As String) As MvcHtmlString Dim url = New UrlHelper(html.ViewContext.RequestContext) Dim imgHtml As String 'Build the <img> tag Dim imgBuilder = New TagBuilder("img") With imgBuilder .MergeAttribute("src", url.Content(ImagePath)) .MergeAttribute("alt", AltText) imgHtml = .ToString(TagRenderMode.Normal) End With Dim aHtml As String 'Build the <a> tag Dim aBuilder = New TagBuilder("a") With aBuilder .MergeAttribute("href", url.Action(Action, Controller, RouteValues)) .InnerHtml = imgHtml 'Include the <img> tag inside aHtml = aBuilder.ToString(TagRenderMode.Normal) End With Return MvcHtmlString.Create(aHtml) End Function End Module 

Answer 6

这个扩展方法也可以工作（放置在公共静态类中）：

  public static MvcHtmlString ImageActionLink(this AjaxHelper helper, string imageUrl, string altText, string actionName, object routeValues, AjaxOptions ajaxOptions) { var builder = new TagBuilder("img"); builder.MergeAttribute("src", imageUrl); builder.MergeAttribute("alt", altText); var link = helper.ActionLink("[replaceme]", actionName, routeValues, ajaxOptions); return new MvcHtmlString( link.ToHtmlString().Replace("[replaceme]", builder.ToString(TagRenderMode.SelfClosing)) ); } 

Answer 7

要添加到所有由Luke开始的Awesome工作，我发布了一个需要css类值的类，并将类和alt作为可选参数（在ASP.NET 3.5+下有效）。 这将允许更多的function，但减less了所需的重载方法的数量。

 // Extension method public static MvcHtmlString ActionImage(this HtmlHelper html, string action, string controllerName, object routeValues, string imagePath, string alt = null, string cssClass = null) { var url = new UrlHelper(html.ViewContext.RequestContext); // build the <img> tag var imgBuilder = new TagBuilder("img"); imgBuilder.MergeAttribute("src", url.Content(imagePath)); if(alt != null) imgBuilder.MergeAttribute("alt", alt); if (cssClass != null) imgBuilder.MergeAttribute("class", cssClass); string imgHtml = imgBuilder.ToString(TagRenderMode.SelfClosing); // build the <a> tag var anchorBuilder = new TagBuilder("a"); anchorBuilder.MergeAttribute("href", url.Action(action, controllerName, routeValues)); anchorBuilder.InnerHtml = imgHtml; // include the <img> tag inside string anchorHtml = anchorBuilder.ToString(TagRenderMode.Normal); return MvcHtmlString.Create(anchorHtml); } 

Answer 8

幻灯片修改更改助手

  public static IHtmlString ActionImageLink(this HtmlHelper html, string action, object routeValues, string styleClass, string alt) { var url = new UrlHelper(html.ViewContext.RequestContext); var anchorBuilder = new TagBuilder("a"); anchorBuilder.MergeAttribute("href", url.Action(action, routeValues)); anchorBuilder.AddCssClass(styleClass); string anchorHtml = anchorBuilder.ToString(TagRenderMode.Normal); return new HtmlString(anchorHtml); } 

CSS类

 .Edit { background: url('..http://img.dovov.comedit.png') no-repeat right; display: inline-block; height: 16px; width: 16px; } 

创build链接只是传递类名称

  @Html.ActionImageLink("Edit", new { id = item.ID }, "Edit" , "Edit") 

Answer 9

我已经join了卢卡斯和“ ASP.NET MVC帮手，合并两个对象htmlAttributes ”和加上controllerName以下代码的答案：

//在CSHTML中使用示例

  @Html.ActionImage("Edit", "EditController" new { id = MyId }, "~/Content/Images/Image.bmp", new { width=108, height=129, alt="Edit" }) 

以上代码的扩展类：

 using System.Collections.Generic; using System.Reflection; using System.Web.Mvc; namespace MVC.Extensions { public static class MvcHtmlStringExt { // Extension method public static MvcHtmlString ActionImage( this HtmlHelper html, string action, string controllerName, object routeValues, string imagePath, object htmlAttributes) { //https://stackoverflow.com/questions/4896439/action-image-mvc3-razor var url = new UrlHelper(html.ViewContext.RequestContext); // build the <img> tag var imgBuilder = new TagBuilder("img"); imgBuilder.MergeAttribute("src", url.Content(imagePath)); var dictAttributes = htmlAttributes.ToDictionary(); if (dictAttributes != null) { foreach (var attribute in dictAttributes) { imgBuilder.MergeAttribute(attribute.Key, attribute.Value.ToString(), true); } } string imgHtml = imgBuilder.ToString(TagRenderMode.SelfClosing); // build the <a> tag var anchorBuilder = new TagBuilder("a"); anchorBuilder.MergeAttribute("href", url.Action(action, controllerName, routeValues)); anchorBuilder.InnerHtml = imgHtml; // include the <img> tag inside string anchorHtml = anchorBuilder.ToString(TagRenderMode.Normal); return MvcHtmlString.Create(anchorHtml); } public static IDictionary<string, object> ToDictionary(this object data) { //https://stackoverflow.com/questions/6038255/asp-net-mvc-helpers-merging-two-object-htmlattributes-together if (data == null) return null; // Or throw an ArgumentNullException if you want BindingFlags publicAttributes = BindingFlags.Public | BindingFlags.Instance; Dictionary<string, object> dictionary = new Dictionary<string, object>(); foreach (PropertyInfo property in data.GetType().GetProperties(publicAttributes)) { if (property.CanRead) { dictionary.Add(property.Name, property.GetValue(data, null)); } } return dictionary; } } } 

Answer 10

这将是非常好的工作

 <a href="<%:Url.Action("Edit","Account",new { id=item.UserId }) %>"><img src="../../Content/ThemeNewhttp://img.dovov.comedit_notes_delete11.png" alt="Edit" width="25px" height="25px" /></a>