超文本标记语言ActionLink是一个按钮或图像，而不是一个链接

在ASP的最新(RC1)版本中。NET MVC，我怎么得到Html。ActionLink渲染为按钮或图像而不是链接?

613920 次浏览
小开

你不能用Html.ActionLink这样做。你应该使用Url.RouteUrl并使用URL来构造你想要的元素。

小开

按照Mehrdad说的去做——或者像Stephen Walther描述的在这里那样使用HtmlHelper扩展方法中的url助手，并制作自己的扩展方法，可以用来呈现所有的链接。

然后它将很容易渲染所有链接作为按钮/锚或任何你喜欢的-而且，最重要的是，你可以改变你的想法，当你发现你实际上更喜欢一些其他的方式制作你的链接。

小开
最佳答案

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

甚至后来的回应，但我只是遇到了一个类似的问题，并最终编写了自己的图像链接HtmlHelper扩展。

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

只是为了防止有人在寻找一个实现。

小开

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

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

严格来说，Url。内容只在路径不是您问题答案的一部分时才需要。

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

小开

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

小开

你可以说我过于简单，但我就是这么做的:

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

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

小开

刚刚发现这个扩展来做它-简单而有效。

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

很简单:

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

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

小开
我这样做的方式是有actionLink和图像分开。 将actionlink图像设置为隐藏 然后添加了jQuery触发器调用。

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

触发的例子:

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

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

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

避免调用表单的post方法。

小开

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

我只找到了一个好办法。这有点俗气，但很管用。

你要做的就是创建一个按钮和一个单独的动作链接。使用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();
}

每次添加一个看起来像按钮的链接时，这样做可能是一件痛苦的事情，但它确实实现了预期的结果。

小开

这是一个很晚的回答，但这是我如何将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

图片演示按钮与bootstrap

在我看来:

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


}

希望这对大家有所帮助

小开

如果你不想使用链接，使用按钮。你也可以添加图片到按钮:

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

type = "按钮"执行你的操作而不是提交表单。

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

显示带有链接的图标

小开

使用FORMACTION

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

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

@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>
}
小开
你可以创建自己的扩展方法
看看我的实现

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
)
小开

使用bootstrap，这是创建控制器动作链接的最短和最干净的方法，该控制器动作以动态按钮的形式出现:

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

或者使用Html helper:

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

一个简单的方法做你的Html。ActionLink变成一个按钮(只要你插入了BootStrap -你可能有)是这样的:

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

对于Material Design Lite和MVC:

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

提交答案