HTML.ActionLink作为按钮或图像,而不是链接


326

在ASP.NET MVC的最新(RC1)版本中,如何使Html.ActionLink呈现为按钮或图像而不是链接?


13
使用MVC 3.0,您可以尝试通过<a href="@Url.Action("Index","Home")"> <img src =“ @ Url.Content(”〜/ Themes / Gold / images / try-onit) png格式“),” ALT = “首页”/> </A>更多信息,试试这个mycodingerrors.blogspot.com/2012/08/...
lasantha

刚刚花了几个小时做这个“正常”(例如通过扩展AjaxHelperActionButton),我想我会在下面分享。
Gone Coding 2014年

5
对我而言,七年后的今天,这个问题仍在不断上升。显然,在2016年,仍然没有简单,直观的方法来执行此操作。
Ryan Lundy

Answers:


330

响应较晚,但是您可以保持简单,然后将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 */
}

2
尽管您可能需要根据链接到的位置将空值替换为routeValues对象,但这对我来说效果很好。
David Conlisk,2009年

1
然后,如何处理在操作链接参数中分配的按钮名称字符串。这对我不起作用。
ZVenue 2011年

1
同样的问题,对我来说,linkText参数也不能为null或空字符串,但是我正在寻找图像按钮替换。
蚂蚁斯威夫特

5
这在所有方面都是不好的,它不能在所有浏览器中都起作用,并且您正在将副作用用作功能。女巫使它成为非常不好的做法,请不要使用它。仅仅因为它起作用就不能成为一个好的解决方案。
Pedro.The.Kid 2014年

4
@Mark-jslatts解决方案是正确的解决方案,不,它不能在IE11中工作,并且仅仅因为它在当前的浏览器中可以工作,这是非常不好的做法,因为您将副作用用作功能,并且如果实现更改了副作用,则将停止工作。
Pedro.The.Kid 2014年

350

我喜欢这样使用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/...
托比亚斯Hertkorn

6
这很完美。请注意,在MVC5中,语法已更改,应为<a href='@Url.Action("MyAction", "MyController")'>和<img src ='@ Url.Content(“〜/ Content / Images / MyLinkImage.png“)'/>。谢谢
BrianLegg

它用NAN文字产生了​​吗?怎么做
Basheer AL-MOMANI 2016年

94

借着Patrick的回答,我发现我必须这样做:

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

避免调用表单的post方法。


51

称我为简单者,但我只是这样做:

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

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


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

23
但是您不应该将按钮嵌套在元素内,反之亦然。至少这不是在HTML 5中执行此操作的有效方法
Patrick Magee 2012年

1
是的,由于Patrick解释的原因,即使在IE10中也不起作用。
Ciaran Gallagher

操作元素内部没有按钮嵌套。 stackoverflow.com/questions/6393827/...
爸爸勃艮第的

18

使用引导程序,这是创建显示为动态按钮的控制器动作的链接的最短,最简洁的方法:

<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.
克里斯·卡蒂尼亚尼

15

简而言之:

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

这仍然为我调用视图的post方法,为什么?
DevDave 2012年

这是无效的语法。IE10在此行引发JavaScript严重错误,即“ SCRIPT5017:正则表达式中的语法错误”。
Ciaran Gallagher

好的答案,但是没有onclicklocation.href(so onclick="location.href='@Url.Action(....)'")包围内容,我无法使其正常工作。
SharpC 2015年

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>

}

希望这对某人有帮助


1
很棒!很好,很简单,htmlAttribute new { @class="btn btn-primary" })+ one
Irf

15

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

<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”执行您的操作,而不是提交表单。


12

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


嗨,抱歉,我是MVC的新手。我将如何使用Url.RouteURL来实现图像?
uriDium

我的意思是,您不能通过对ActionLink的简单调用来生成嵌套的img标签(或按钮标签)。当然,CSS样式化标签本身是解决标签的一种方法,但是您仍然无法获得img标签。
Mehrdad Afshari

9

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


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

1
(并且可以肯定的是,我在Opera,Safari,Chrome和Firefox上对其进行了测试,并且可以正常工作)
Ciaran Gallagher

9

将Html.ActionLink变成按钮的一种简单方法(只要您插入了BootStrap-您可能已经拥有)是这样的:

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

8

甚至在以后的响应中,我也遇到了类似的问题,最终编写了自己的Image链接HtmlHelper扩展程序

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

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


3
链接现在似乎处于非活动状态
d219

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

显示带有链接的图标


4

按照Mehrdad的说做-或使用HtmlHelperStephen Walther 在此处描述的扩展方法中的url帮助器,并制作自己的扩展方法,该方法可用于呈现所有链接。

然后,将所有链接呈现为按钮/锚或您喜欢的任何一个都将很容易-并且最重要的是,当您发现自己实际上更喜欢通过其他方式创建链接时,可以改变主意。


3

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

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
                    )

2

对于Material Design Lite和MVC:

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

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

1

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

我发现只有这样做的好方法。它有点hacky,但是可以用。

您要做的就是创建一个按钮和一个单独的操作链接。使用CSS使操作链接不可见。当您单击按钮时,它可以触发操作链接的click事件。

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

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

每次添加需要看起来像按钮的链接时,执行此操作可能会很麻烦,但是确实可以达到预期的效果。


1

使用FORMACTION

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


0

我这样做的方法是分别拥有actionLink和图像。将动作链接图像设置为隐藏,然后添加jQuery触发调用。这更多是一种解决方法。

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

触发示例:

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

0

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


0

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

@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>
}
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.