在 ASP.NET MVC 的最新 (RC1) 版本中，如何让 Html.ActionLink 呈现为按钮或图像而不是链接？
【问题讨论】：
ActionButton 扩展AjaxHelper）我想我会在下面分享它。
Html.ActionLink 无法做到这一点。您应该使用Url.RouteUrl 并使用 URL 来构造您想要的元素。
【讨论】：
按照 Mehrdad 所说的做 - 或使用来自 HtmlHelper 扩展方法的 url 帮助器，如 Stephen Walther 描述的 here，并制作您自己的扩展方法，可用于呈现您的所有链接。
然后，将所有链接呈现为按钮/锚或任何您喜欢的方式将很容易 - 最重要的是，当您发现您实际上更喜欢其他方式制作链接时，您可以改变主意。
【讨论】：
延迟响应，但您可以保持简单并将 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 */
}
【讨论】：
【讨论】：
我喜欢这样使用 Url.Action() 和 Url.Content()：
<a href='@Url.Action("MyAction", "MyController")'>
<img src='@Url.Content("~/Content/Images/MyLinkImage.png")' />
</a>
严格来说，Url.Content 仅用于路径并不是您问题答案的一部分。
感谢@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>
您只需处理超链接突出显示。我们的用户喜欢它:)
【讨论】：
text-decoration:none 的链接（悬停并处于活动状态）以摆脱那个愚蠢的下划线。这对于某些浏览器是必需的（肯定是 Firefox 11.0）。
刚刚找到this extension 来做这件事——简单而有效。
【讨论】：
@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>
【讨论】：
location.href 包围onclick 内容（所以onclick="location.href='@Url.Action(....)'"）我无法让它工作。
<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 方法。
【讨论】：
似乎有很多关于如何创建显示为图像的链接的解决方案，但没有一个解决方案使它看起来像一个按钮。
我发现只有一个好方法可以做到这一点。它有点 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();
}
每次添加一个看起来像按钮的链接时，这样做可能会让人头疼，但它确实达到了预期的效果。
【讨论】：
一个迟到的答案，但这就是我如何将我的 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>
}
希望这对某人有所帮助
【讨论】：
new { @class="btn btn-primary" }) +one
如果您不想使用链接，请使用按钮。您也可以将图像添加到按钮：
<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" 执行您的操作，而不是提交表单。
【讨论】：
<li><a href="@Url.Action( "View", "Controller" )"><i class='fa fa-user'></i><span>Users View</span></a></li>
显示带有链接的图标
【讨论】：
使用格式
<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
)
【讨论】：
使用引导程序，这是创建指向显示为动态按钮的控制器操作的链接的最短且最简洁的方法：
<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" })
【讨论】：
一种将 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>
【讨论】：