如何使用 HTML.ActionLink 插入图像？

Question

如何在 html.actionlink - asp.net mvc 中插入图像？

我这样做了，但它不起作用。

<a href="<%= Html.ActionLink("search", "Search", new { searchText = "txtSearch" }, null); %>">
        <img alt="searchPage" style="vertical-align: middle;" height="17px"
            src="../../Stylesheets/search.PNG" title="search" />

Answer 1

您完全滥用了 ActionLink 帮助器。帮助器实际上生成整个 标记。

在这种情况下，您真正​​想要使用的（除了您自己编写的助手之外）是：

<a href="<%= Url.Action("Search", new { searchText = "txtSearch" }) %>">
    <img alt="searchPage" style="vertical-align: middle;" height="17px"
        src="../../Stylesheets/search.PNG" title="search" />
</a>

Answer 2

@Trimack 对于 MVC2 是 100% 正确的。如果人们正在寻找 MVC3 的等效项，这里就是......

<a href="@Url.Action("Search", new { searchText = "txtSearch" })">
    <img alt="searchPage" style="vertical-align: middle;" height="17px" src="../../Stylesheets/search.PNG" title="search" /> 
</a> 

Answer 3

我已经为此解决方案创建了一个助手。所以你不能将图像包含到actionLink中。但是通过这个辅助类，您可以简单地添加带有图像的锚点以进行查看。

使用系统；
使用系统文本；
使用 System.Web.Mvc；
使用 System.Web.Mvc.Html；
使用 System.Web.Routing；
使用系统.Web；
使用系统.安全.策略；

namespace Helpers
{
    public static class ActionWithImageHelper
    {
        public static string AnchorIm(this HtmlHelper helper)
        {

            var builder = new TagBuilder("img");
            var link = helper.ActionLink("[replaceInnerHTML]", "replaceAction").ToHtmlString();


                builder.MergeAttribute("src", "<imagePath>");
                builder.MergeAttribute("alt", "<altText>");

                var renderedLink = link.Replace("replaceAction", "<>");
                link = renderedLink;


            return link.Replace("[replaceInnerHTML]",builder.ToString(TagRenderMode.SelfClosing));
        }

    }
}

祝你好运

Answer 4

如果要显示多图像，可以在 View 中使用 Html.ActionLink 属性，如下所示。在此示例中，我使用详细信息/编辑/删除图像作为操作列下的按钮。

注意：在Html.ActionLink中输入Title、Controller和Action名称，根据你的项目。如果您想使用空标题，只需输入“”即可。

....
//for using multiple Html.ActionLink in a column using Webgrid
grid.Column("Action", format: (item) =>
 new HtmlString(
       Html.ActionLink("Show Details", "Edit", "Admin", new
       {
           applicantId = item.ApplicantID,               
           title = "Detail",
           @class = "icon-link",
           style = "background-image: url('../../Content/icons/detail.png')"
       }, null).ToString() +
       Html.ActionLink("Edit Record", "Edit", "Admin", new
       {
           applicantId = item.ApplicantID, 
           title = "Edit",
           @class = "icon-link",
           style = "background-image: url('../../Content/icons/edit.png')"
       }, null).ToString() +
       Html.ActionLink("Delete Record", "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>

有关完整示例，您可以查看此处：如何使用cshtml 视图中的 WebGrid？

问候。

Answer 5

您可以使用以下内容，而不是使用 @Html.ActionLink("linkname","action","controller") ：

<a href='@Url.Action("action", "controller")'>

“images”是我存储图像的文件夹。 @Url.Content()是为了知道路径。您可以将您的操作和该操作的控制器传递给@Url.Action()。 @Url.Action() 的工作方式与 @Html.ActionLink() 类似。现在您的链接将被图像替换。