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

Question

在ASP.NET MVC的最新版本（RC1）中，如何将Html.ActionLink呈现为按钮或图像而不是链接？

Answer 1

我喜欢像这样使用Url.Action（）和Url.Content（）：

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

严格来说，只有路径所需的Url.Content才不是你问题答案的一部分。

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

Answer 2

延迟响应，但您可以保持简单并将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 */
}

Answer 3

借用Patrick的回答，我发现我必须这样做：

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

以避免调用表单的post方法。

Answer 4

简单地称呼我，但我只是这样做：

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

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

Answer 5

只是简单地说：

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

Answer 6

迟到的答案，但这就是我将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>

}

希望这有助于某人

Answer 7

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

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

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

Answer 8

您无法使用Html.ActionLink执行此操作。您应该使用Url.RouteUrl并使用URL来构建所需的元素。

Answer 9

使用bootstrap这是创建指向显示为动态按钮的控制器操作的链接的最短且最干净的方法：

<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" })

Answer 10

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

Answer 11

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

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

添加以防万一有人正在寻找一个实现。

Answer 12

一个简单的方法可以将你的Html.ActionLink变成一个按钮（只要你插入了BootStrap - 你可能拥有它）就像这样：

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

Answer 13

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

显示带有链接的图标

Answer 14

执行Mehrdad所说的内容 - 或者使用HtmlHelper扩展方法中的网址助手，例如Stephen Walther描述here并制作您自己的扩展方法，该方法可用于呈现您的所有链接。

然后很容易将所有链接呈现为按钮/锚点或您喜欢的任何一个 - 最重要的是，当您发现自己真的更喜欢其他方式来建立链接时，您可以改变主意。

Answer 15

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

list.parallelStream()
.filter(n -> n.mod(new BigInteger("2")).equals(BigInteger.ZERO))
.reduce(BigDecimal.ZERO, BigDecimal::add)

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

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);
    }
}

Answer 16

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

我找到了这样做的好方法。它有点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();
 }

每次添加需要看起来像按钮的链接时，执行此操作可能会很痛苦，但它确实可以实现所需的结果。

Answer 17

@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?');" />
    }

Answer 18

使用FORMACTION

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

Answer 19

对于Material Design Lite和MVC：

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

Answer 20

这就是我没有编写脚本的方式：

@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>
}

Answer 21

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

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

触发示例：

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

Answer 22

刚刚找到this extension来做到这一点 - 简单而有效。

Answer 23

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