在WebGrid中显示多个图像链接而不是文本？

我使用Html.ActionLink在一个列中有一个WebGrid定义和三个链接。但是，当我不使用“LinkText”属性时，申请人Id属性作为null值传递给Controller。在WebGrid中显示多个图像链接而不是文本？

另一方面，当使用LinkTexts而不是“”时，可以成功传递id参数（类型为下面的“我的链接文本”）。但是，我不想在链接上显示文本，我只是想显示图像。

我认为可能会出现打字错误，或者会有其他适合MVC4 Razor的方式，如@ Url.Action等。这里是我在Razor View的代码。

请问您能帮我吗？

在此先感谢。

查看：

//for using multiple Html.ActionLink in a column using Webgrid 
grid.Column("Operations", format: (item) => 
new HtmlString(
     Html.ActionLink("My Link Text", "Edit", "Admin", new 
     { 
      applicantId = item.ApplicantID,    
      title = "Detail", 
      @class = "icon-link", 
      style = "background-image: url('../../Content/icons/detail.png')" 
     }, null).ToString() + 
     Html.ActionLink(" ", "Edit", "Admin", new 
     { 
      applicantId = item.ApplicantID, 
      title = "Edit", 
      @class = "icon-link", 
      style = "background-image: url('../../Content/icons/edit.png')" 
     }, null).ToString() + 
     Html.ActionLink(" ", "Edit", "Admin", new 
     { 
      applicantId = item.ApplicantID, 
      title = "Delete", 
      @class = "icon-link", 
      style = "background-image: url('../../Content/icons/delete.png')" 
     }, null).ToString() 
) 
) 



<style type="text/css"> 
    a.icon-link { 
     background-color: transparent; 
     background-repeat: no-repeat; 
     background-position: 0px 0px; 
     border: none; 
     cursor: pointer; 
     width: 16px; 
     height: 16px; 
     margin-right: 8px; 
     vertical-align: middle; 
    } 
</style>

来源

2013-11-03 Clint Eastwood

您是否使用了显示相同的编辑操作，编辑和删除功能，或者你忘记在你的'Html.ActionLink'中更改操作名称？ – ataravati

另外，它似乎没有正确解释问题。当您不使用链接文本或使用链接文本时，id为空？ – ataravati

当我不使用linktext时，applicantId属性返回空值。我只是想在上面的一个coulumn中使用三个图像链接（不带文本）而不是HtmlString（）内的文本链接。谢谢。 –

你可以以轻松地使用它使用自定义的HTML辅助方法。要做到这一点：

1）创建一个名为HtmlHelpers的文件夹，并在该文件夹中创建一个名为MyHelpers的类。然后像下面那样定义你的类（你可以通过添加一些额外的属性来改进它）。

MyHelpers.cs：

using System; 
using System.Web.Mvc; 

namespace <YourProjectName>.WebUI.HtmlHelpers 
{ 
    public static class MyHelpers 
    {    
     public static MvcHtmlString ImageLink(this HtmlHelper html, string imagePath, string alt, string cssClass, 
      string action, string controllerName) 
     { 
      return ActionImage(html, imagePath, alt, cssClass, action, controllerName, null); 
     } 

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

2）重建项目，然后这行添加到您的Razor视图：

@using <YourProjectName>.WebUI.HtmlHelpers

3）然后在您查看使用HTML辅助方法像这样：

@Html.ImageLink("../../Content/icons/delete.png", "Delete", "your-class", "Delete", "Admin", new { item.ApplicantID })

同样，如果你想使用mult在同一列中我的图片链接，您可以合并HTML串那样：

查看：

.... 
grid.Column("Operations", style: "your-class", format: (item) => 
new HtmlString(
     @Html.ActionImage("../../Content/icons/detail.png", "Detail", "your-class", "Detail", "Admin", new { item.ApplicantID }).ToString() + 
     @Html.ActionImage("../../Content/icons/edit.png", "Edit", "your-class", "Edit", "Admin", new { item.ApplicantID }).ToString() + 
     @Html.ActionImage("../../Content/icons/delete.png", "Delete", "your-class", "Delete", "Admin", new { item.ApplicantID }).ToString() 

) 
) 
...

希望这有助于。问候...

来源

2013-11-03 20:32:03

非常感谢你为这个美好的解释。我可以很容易地将我的图像链接放入我的WebGrid的一列中。问候。 –

您的操作链接没有被正确调用。您正在将Html属性添加到您的路由值。你的动作链接应该是这样的：

Html.ActionLink("My Link Text", "Detail", "Admin", new 
    { 
     applicantId = item.ApplicantID    
    }, new 
    {    
     title = "Detail", 
     @class = "icon-link" 
    })

检查此链接了解如何隐藏链接文本，以及显示图像，而不是使用CSS：CSS Hide Text But Show Image?

来源

2013-11-05 19:12:07 ataravati

在WebGrid中显示多个图像链接而不是文本？

回答

相关问题