Html.ActionLink 作为按钮或图像，而不是链接
https://stackoverflow.com/questions/596444
-
09-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian题
在最新 (RC1) 版本的 ASP.NET MVC 中，如何让 Html.ActionLink 呈现为按钮或图像而不是链接？
解决方案
晚回应，但你可能只是保持简单和应用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用于指出这应该使用新的剃刀视图语法。实施例已被相应地更新。
从帕特里克的答案借款，我发现，我不得不这样做：
<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>
一个迟到的答案，但我这是怎么让我的ActionLink成一个按钮。我们在我们的项目中使用自举，因为它会给您带来方便。没关系的，因为只有一个翻译的@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>
}
希望这有助于某人
如果你不想使用一个链接，请使用按钮。可以添加图像按钮，以及：
<button type="button" onclick="location.href='@Url.Action("Create", "Company")'" >
Create New
<img alt="New" title="New" src="~/Images/Button/plus.png">
</button>
<强>类型= “按钮”执行的动作，而不是提交的形式。
您不能Html.ActionLink做到这一点。您应该使用Url.RouteUrl和使用URL来构建你想要的元素。
使用自举这是建立一个链接到显示为动态按钮的控制器操作的最短和最干净的方法：
<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" })
<button onclick="location.href='@Url.Action("NewCustomer", "Customers")'">Checkout >></button>
有一个简单的方法让你的Html.ActionLink成一个按钮（只要你有自举插入 - 你可能有）是这样的：
@Html.ActionLink("Button text", "ActionName", "ControllerName", new { @class = "btn btn-primary" })
<li><a href="@Url.Action( "View", "Controller" )"><i class='fa fa-user'></i><span>Users View</span></a></li>
要连结的显示图标
做迈赫达德说什么 - 或者从HtmlHelper扩展方法使用的网址助手史蒂芬瓦尔特介绍的此处和使可被用来呈现所有链接的自己的扩展方法。
然后，它会很容易使各个环节的按钮/锚或任何你喜欢 - 而且最重要的是，你可以改变你的想法，当你发现你真正喜欢做你的链接的其他方式
您可以创建自己的扩展方法结果 采取看看我实施
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
)
@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?');" />
}
似乎有很多关于如何创建一个显示为图像的链接的解决方案，但没有使它看起来是一个按钮。
有只有我发现这样做很好的方式。它有点哈克，但它的作品。
你所要做的就是创建一个按钮和一个独立的动作链接。使操作链接看不见的使用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();
}
这可能是一个痛苦的对接做到这一点，你添加一个需要看起来像一个按钮，一个链接每一次，但它确实达到了预期的效果。
使用FORMACTION
<input type="submit" value="Delete" formaction="@Url.Action("Delete", new { id = Model.Id })" />
刚刚发现 这个扩展 做到这一点——简单而有效。
我已经做它的方式是让ActionLink的和seperately图像。 设置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，但我认为URL-from-lambda功能只能通过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>
}
有关材料设计精简版和MVC：
<a class="mdl-navigation__link" href='@Url.Action("MyAction", "MyController")'>Link Name</a>
