Как получить Html.ActionLink в последней версии (RC1) ASP.NET MVC для отображения в виде кнопки или изображения вместо ссылки?
AjaxHelper
с ActionButton
) Я думал , что я разделю ее ниже.
Как получить Html.ActionLink в последней версии (RC1) ASP.NET MVC для отображения в виде кнопки или изображения вместо ссылки?
AjaxHelper
с ActionButton
) Я думал , что я разделю ее ниже.
Ответы:
Поздний ответ, но вы можете просто сохранить его и применить класс 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 наверняка).
Использование начальной загрузки - это самый короткий и чистый подход для создания ссылки на действие контроллера, которое отображается в виде динамической кнопки:
<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="@Url.Action("index", "Family", new {familyid = Model.FamilyID })">Cancel</button>
onclick
содержания location.href
(так 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>
Еще более поздний ответ, но я просто столкнулся с подобной проблемой и закончил тем, что написал свое собственное расширение Image link HtmlHelper .
Вы можете найти реализацию этого в моем блоге по ссылке выше.
Просто добавьте, если кто-то ищет реализацию.
<li><a href="@Url.Action( "View", "Controller" )"><i class='fa fa-user'></i><span>Users View</span></a></li>
Чтобы отобразить значок со ссылкой
Делайте то, что говорит Mehrdad - или используйте помощника url из 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
)
Для Material Design Lite и MVC:
<a class="mdl-navigation__link" href='@Url.Action("MyAction", "MyController")'>Link Name</a>
@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();
}
Это может быть неприятно делать это каждый раз, когда вы добавляете ссылку, которая должна выглядеть как кнопка, но при этом она достигает желаемого результата.
Просто нашел это расширение, чтобы сделать это - просто и эффективно.
То, как я это сделал, - это разделили 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()
даст вам голый 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>
}