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
在我看来:
@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-lambda
function目前只能通过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" })