Html.ActionLink作为一个button或图像,而不是一个链接

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

迟到的反应,但你可以保持简单,并将一个CSS类应用到htmlAttributes对象。

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

然后在样式表中创build一个类

 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只是用于path,并不是真正的问题答案的一部分。

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

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

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

避免调用表单的post方法。

叫我简单,但我只是做:

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

而你只是照顾超链接的亮点。 我们的用户喜欢它:)

简而言之:

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

如果您不想使用链接,请使用button。 你可以添加图像button以及:

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

键入=“button”执行您的操作,而不是提交表单。

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

迟到的答案,但这是我如何使我的ActionLink成为一个button。 我们在我们的项目中使用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> } 

希望这有助于某人

甚至后来的回应,但我碰到类似的问题,并最终编写我自己的图像链接HtmlHelper扩展 。

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

只是在有人正在寻找实施的情况下添加。

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

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

用链接显示图标

做Mehrdad所说的 – 或者像Stephen Walther那样使用HtmlHelper扩展方法中的url helper来描述这个方法,并且可以使用自己的扩展方法来渲染所有的链接。

然后,将所有链接都呈现为button/定位符或您喜欢的任何一个都会很容易 – 而且,最重要的是,如果您发现实际上更喜欢使用其他方式创build链接,则可以稍后改变主意。

你可以创build你自己的扩展方法
看看我的实现

 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 ) 

使用引导程序,这是创build链接到控制器动作的最短,最干净的方法,该动作button显示为dynamicbutton:

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

似乎有很多关于如何创build一个显示为图像的链接的解决scheme,但没有一个使得它看起来像一个button。

我发现这样做只有很好的方法。 它有点哈克,但它的作品。

你必须做的是创build一个button和一个单独的操作链接。 使用CSS来隐藏动作链接。 当你点击button时,它可以触发操作链接的点击事件。

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

每次添加一个需要看起来像button的链接时,这样做可能会很痛苦,但它确实达到了预期的效果。

使用FORMACTION

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

只是发现这个扩展做到了 – 简单而有效。

我做的方式是分别有actionLink和图像。 将actionlink图像设置为隐藏,然后添加一个jQuery触发器调用。 这是更多的解决方法。

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

触发器例子:

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

Url.Action()将为您提供Html.ActionLink大部分重载的Url.Action() URL,但我认为URL-from-lambdafunction目前只能通过Html.ActionLink 。 希望他们会在某个时候为Url.Action添加一个类似的重载。

这是我没有脚本的做法:

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

一个简单的方法可以使你的Html.ActionLink成为一个button(只要你有BootStrap插入 – 你可能有)是这样的:

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