Question

我使用 Html.ActionLink 在一个列中有一个WebGrid定义和三个链接。但是，当我不使用“LinkText”属性时， applicantId 属性将作为 null 值传递给Controller。

另一方面，当只使用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>

Answer 1

您可以使用自定义HTML Helper方法轻松使用它。要做到这一点：

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 View：

@using <YourProjectName>.WebUI.HtmlHelpers

3）然后在你的View中使用这个Html Helper方法：

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

Smilarly，如果你想在同一列中使用多图像链接，你可以合并这样的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() ) ) ...

希望这会有所帮助。此致...

Answer 2

您的操作链接未正确调用。您正在将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?

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

2 个答案: