在ASP.NET MVC的最新(RC1)版本中,如何使Html.ActionLink呈现为按钮或图像而不是链接?
AjaxHelper
用ActionButton
),我想我会在下面分享。
在ASP.NET MVC的最新(RC1)版本中,如何使Html.ActionLink呈现为按钮或图像而不是链接?
AjaxHelper
用ActionButton
),我想我会在下面分享。
Answers:
响应较晚,但是您可以保持简单,然后将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视图语法。示例已相应更新。
称我为简单者,但我只是这样做:
<a href="<%: Url.Action("ActionName", "ControllerName") %>">
<button>Button Text</button>
</a>
您只需注意超链接突出显示。我们的用户喜欢它:)
text-decoration:none
摆脱该愚蠢的下划线。对于某些浏览器(肯定是Firefox 11.0),这是必需的。
简而言之:
<button onclick="@Url.Action("index", "Family", new {familyid = Model.FamilyID })">Cancel</button>
onclick
用location.href
(so onclick="location.href='@Url.Action(....)'"
)包围内容,我无法使其正常工作。
答案很晚,但这是我将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”执行您的操作,而不是提交表单。
您无法使用来做到这一点Html.ActionLink
。您应该使用Url.RouteUrl
并使用URL来构造所需的元素。
<button onclick="location.href='@Url.Action("NewCustomer", "Customers")'">Checkout >></button>
按照Mehrdad的说做-或使用HtmlHelper
Stephen Walther 在此处描述的扩展方法中的url帮助器,并制作自己的扩展方法,该方法可用于呈现所有链接。
然后,将所有链接呈现为按钮/锚或您喜欢的任何一个都将很容易-并且最重要的是,当您发现自己实际上更喜欢通过其他方式创建链接时,可以改变主意。
您可以创建自己的扩展方法,
看看我的实现
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
)
关于如何创建显示为图像的链接,似乎有很多解决方案,但没有一个使它看起来像一个按钮。
我发现只有这样做的好方法。它有点hacky,但是可以用。
您要做的就是创建一个按钮和一个单独的操作链接。使用CSS使操作链接不可见。当您单击按钮时,它可以触发操作链接的click事件。
<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和图像。将动作链接图像设置为隐藏,然后添加jQuery触发调用。这更多是一种解决方法。
'<%= Html.ActionLink("Button Name", "Index", null, new { @class="yourclassname" }) %>'
<img id="yourImage" src="myImage.jpg" />
触发示例:
$("#yourImage").click(function () {
$('.yourclassname').trigger('click');
});
Url.Action()
将为您提供大多数的重载的裸URL Html.ActionLink
,但我认为该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>
}