Html.ActionLink 作为按钮或图像，而不是链接

Posted 2023-03-27

【中文标题】Html.ActionLink 作为按钮或图像，而不是链接

【英文标题】：Html.ActionLink as a button or an image, not a link

【发布时间】：2010-10-10 10:24:32

【问题描述】：

在 ASP.NET MVC 的最新 (RC1) 版本中，如何让 html.ActionLink 呈现为按钮或图像而不是链接？

【问题讨论】：

使用 MVC 3.0 你可以尝试这种方式 更多信息，试试这个mycodingerrors.blogspot.com/2012/08/…

刚刚花了几个小时“正确”地做这件事（例如，用ActionButton 扩展AjaxHelper）我想我会在下面分享它。

7 年过去了，这个问题仍然得到了支持，这对我来说很有趣。显然在 2016 年仍然没有简单、直观的方法来做到这一点。

【参考方案1】：

Html.ActionLink 无法做到这一点。您应该使用Url.RouteUrl 并使用 URL 来构造您想要的元素。

【讨论】：

嗨，对不起，我对 MVC 很陌生。我将如何使用 Url.RouteURL 来实现图像？

我的意思是你不能通过对 ActionLink 的简单调用来生成嵌套的 img 标签（或按钮标签）。当然，a 标签本身的 CSS 样式是一种绕过它的方法，但是你不能得到一个 img 标签。

【参考方案2】：

按照 Mehrdad 所说的做 - 或使用来自 HtmlHelper 扩展方法的 url 帮助器，如 Stephen Walther 描述的 here，并制作您自己的扩展方法，可用于呈现您的所有链接。

然后，将所有链接呈现为按钮/锚或任何您喜欢的方式将很容易 - 最重要的是，当您发现您实际上更喜欢其他方式制作链接时，您可以改变主意。

【参考方案3】：

延迟响应，但您可以保持简单并将 CSS 类应用于 htmlAttributes 对象。

<%= Html.ActionLink("Button Name", "Index", null, new  @class="classname" ) %>

然后在你的样式表中创建一个类

a.classname

    background: url(../Images/image.gif) no-repeat top left;
     display: block;
     width: 150px;
     height: 150px;
     text-indent: -9999px; /* hides the link text */

【讨论】：

这对我来说非常有效，尽管您可能需要将 null 替换为 routeValues 对象，具体取决于您链接到的位置。

您如何处理您在操作链接参数中分配的按钮名称字符串。这对我不起作用。

同样的问题，对我来说也是如此，linkText 参数不能为空或空字符串，但我正在寻找图像按钮替换。

这在各种方面都很糟糕，它不适用于所有浏览器，并且您正在使用副作用作为功能。女巫使它成为一种非常糟糕的做法，不要使用它。仅仅因为它有效，它并不能成为一个好的解决方案。

@Mark - jslatts 解决方案是正确的，不，它不会在 IE11 中工作，仅仅因为它在当前浏览器中工作，这是一个非常糟糕的做法，因为你使用副作用作为功能，如果实施改变了副作用将停止工作。

【参考方案4】：

甚至后来回复，但我刚刚遇到了类似的问题，最后写了自己的Image link HtmlHelper extension。

您可以在上面链接中的我的博客上找到它的实现。

只是添加以防有人正在寻找实现。

【讨论】：

链接现在似乎无效

【参考方案5】：

我喜欢这样使用 Url.Action() 和 Url.Content()：

<a href='@Url.Action("MyAction", "MyController")'>
    <img src='@Url.Content("~/Content/Images/MyLinkImage.png")' />
</a>

严格来说，Url.Content 仅用于路径并不是您问题答案的一部分。

感谢@BrianLegg 指出这应该使用新的 Razor 视图语法。示例已相应更新。

【讨论】：

如果你想要一个 html 助手：fsmpi.uni-bayreuth.de/~dun3/archives/…

这非常有效。请注意，在 MVC5 中，语法发生了变化，应该是 和 。谢谢

它是用 NAN 文本生成的吗？怎么办

【参考方案6】：

Url.Action() 将为您提供Html.ActionLink 的大多数重载的裸 URL，但我认为 URL-from-lambda 功能目前只能通过 Html.ActionLink 使用。希望他们会在某个时候为Url.Action 添加类似的重载。

【参考方案7】：

说我很简单，但我只是这样做：

<a href="<%: Url.Action("ActionName", "ControllerName") %>">
    <button>Button Text</button>
</a>

您只需处理超链接突出显示。我们的用户喜欢它:)

【讨论】：

@Ben 这没有很多投票的一个原因是它的回答比其他答案晚得多。我正要投票，但测试了@Slider345 所说的内容，可以确认这在 IE 7 或 8 中无法正常工作。无论如何，如果您选择使用它，请不要忘记设置 css指向text-decoration:none 的链接（悬停并处于活动状态）以摆脱那个愚蠢的下划线。这对于某些浏览器是必需的（肯定是 Firefox 11.0）。

但是你不应该在元素内嵌套按钮，反之亦然。至少在 HTML 5 中这不是一种有效的方法

是的，这在 IE10 中也不起作用，原因帕特里克解释。

动作元素内没有按钮嵌套。 ***.com/questions/6393827/…

【参考方案8】：

刚刚找到this extension 来做这件事——简单而有效。

【讨论】：

链接已损坏。

【参考方案9】：

@using (Html.BeginForm("DeleteMember", "Member", new  id = Model.MemberID ))
    
        <input type="submit" value="Delete Member" onclick = "return confirm('Are you sure you want to delete the member?');" />
    

【参考方案10】：

简单地说：

<button onclick="@Url.Action("index", "Family", new familyid = Model.FamilyID )">Cancel</button>

【讨论】：

这仍然为我调用视图的 post 方法，知道为什么吗？

这不是有效的语法。 IE10 使用此行引发 javascript 严重错误，“SCRIPT5017：正则表达式中的语法错误”。

很好的答案，但没有用location.href 包围onclick 内容（所以onclick="location.href='@Url.Action(....)'"）我无法让它工作。

【参考方案11】：

<button onclick="location.href='@Url.Action("NewCustomer", "Customers")'">Checkout >></button>

【讨论】：

这在 IE10 上对我有用。如果您只想使用按钮而不是图像，这是一个很好的解决方案，尽管必须使用内联 JavaScript 进行简单链接可能并不理想。

（并且可以肯定的是，我在 Opera、Safari、Chrome 和 Firefox 上对其进行了测试，并且成功了）

【参考方案12】：

我这样做的方法是将 actionLink 和图像分开。 将 actionlink 图像设置为隐藏 然后添加了一个 jQuery 触发器调用。这更像是一种解决方法。

'<%= Html.ActionLink("Button Name", "Index", null, new  @class="yourclassname" ) %>'
<img id="yourImage" src="myImage.jpg" />

触发示例：

$("#yourImage").click(function () 
  $('.yourclassname').trigger('click');
);

【参考方案13】：

借用帕特里克的回答，我发现我必须这样做：

<button onclick="location.href='@Url.Action("Index", "Users")';return false;">Cancel</button>

避免调用表单的 post 方法。

【参考方案14】：

似乎有很多关于如何创建显示为图像的链接的解决方案，但没有一个解决方案使它看起来像一个按钮。

我发现只有一个好方法可以做到这一点。它有点 hacky，但它确实有效。

您要做的是创建一个按钮和一个单独的操作链接。使用 css 使操作链接不可见。当你点击按钮时，它会触发动作链接的点击事件。

<input type="button" value="Search" onclick="Search()" />
 @Ajax.ActionLink("Search", "ActionName", null, new AjaxOptions , new  id = "SearchLink", style="display:none;" )

function Search()
    $("#SearchLink").click();
 

每次添加一个看起来像按钮的链接时，这样做可能会让人头疼，但它确实达到了预期的效果。

【参考方案15】：

一个迟到的答案，但这就是我如何将我的 ActionLink 变成一个按钮。我们在项目中使用 Bootstrap，因为它很方便。不要介意@T，因为它只是我们使用的翻译器。

@Html.Actionlink("Some_button_text", "ActionMethod", "Controller", "Optional parameter", "html_code_you_want_to_apply_to_the_actionlink");

上面给出了一个这样的链接，如下图所示：

localhost:XXXXX/Firms/AddAffiliation/F0500

在我看来：

@using (Html.BeginForm())

<div class="section-header">
    <div class="title">
        @T("Admin.Users.Users")
    </div>
    <div class="addAffiliation">
        <p />
        @Html.ActionLink("" + @T("Admin.Users.AddAffiliation"), "AddAffiliation", "Firms", new  id = (string)@WorkContext.CurrentFirm.ExternalId , new  @class="btn btn-primary" )
    </div>
</div>

希望这对某人有所帮助

【讨论】：

很酷！很好很简单，htmlAttribute new @class="btn btn-primary" ) +one

【参考方案16】：

如果您不想使用链接，请使用按钮。您也可以将图像添加到按钮：

<button type="button" onclick="location.href='@Url.Action("Create", "Company")'" >
   Create New
   <img  title="New" src="~/Images/Button/plus.png">
</button>

type="button" 执行您的操作，而不是提交表单。

【参考方案17】：

<li><a href="@Url.Action(  "View", "Controller" )"><i class='fa fa-user'></i><span>Users View</span></a></li>

显示带有链接的图标

【参考方案18】：

使用格式

<input type="submit" value="Delete" formaction="@Url.Action("Delete", new  id = Model.Id )" />

【参考方案19】：

这就是我在没有脚本的情况下做到的：

@using (Html.BeginForm("Action", "Controller", FormMethod.Get))

    <button type="submit" 
            class="btn btn-default" 
            title="Action description">Button Label</button>

相同，但带有参数和确认对话框：

@using (Html.BeginForm("Action", "Controller", 
        new  paramName = paramValue , 
        FormMethod.Get, 
        new  onsubmit = "return confirm('Are you sure?');" ))

    <button type="submit" 
            class="btn btn-default" 
            title="Action description">Button Label</button>

【参考方案20】：

您可以创建自己的扩展方法 看看我的实现

public static class HtmlHelperExtensions

    public static MvcHtmlString ActionImage(this HtmlHelper html, string action, object routeValues, string imagePath, string alt, object htmlAttributesForAnchor, object htmlAttributesForImage)
    
        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);
        imgBuilder.MergeAttributes(new RouteValueDictionary(htmlAttributesForImage));
        string imgHtml = imgBuilder.ToString(TagRenderMode.SelfClosing);

        // build the <a> tag
        var anchorBuilder = new TagBuilder("a");
        anchorBuilder.MergeAttribute("href", action != null ? url.Action(action, routeValues) : "#");
        anchorBuilder.InnerHtml = imgHtml; // include the <img> tag inside
        anchorBuilder.MergeAttributes(new RouteValueDictionary(htmlAttributesForAnchor));

        string anchorHtml = anchorBuilder.ToString(TagRenderMode.Normal);
        return MvcHtmlString.Create(anchorHtml);
    

然后在你的视图中使用它看看我的电话

 @Html.ActionImage(null, null, "../../Content/img/Button-Delete-icon.png", Resource_en.Delete,
               new//htmlAttributesForAnchor
                   href = "#",
                   data_toggle = "modal",
                   data_target = "#confirm-delete",
                   data_id = user.ID,
                   data_name = user.Name,
                   data_usertype = user.UserTypeID
               , new style = "margin-top: 24px"//htmlAttributesForImage
                    )

【参考方案21】：

使用引导程序，这是创建指向显示为动态按钮的控制器操作的链接的最短且最简洁的方法：

<a href='@Url.Action("Action", "Controller")' class="btn btn-primary">Click Me</a>

或者使用 Html 助手：

@Html.ActionLink("Click Me", "Action", "Controller", new  @class = "btn btn-primary" )

【讨论】：

我必须同意清洁。 100.

【参考方案22】：

一种将 Html.ActionLink 变成按钮的简单方法（只要您插入了 BootStrap - 您可能已经插入）如下所示：

@Html.ActionLink("Button text", "ActionName", "ControllerName", new  @class = "btn btn-primary" )

【参考方案23】：

对于 Material Design Lite 和 MVC：

<a class="mdl-navigation__link" href='@Url.Action("MyAction", "MyController")'>Link Name</a>