Html.ActionLink как кнопка или изображение, а не ссылка
-
09-09-2019 - |
Вопрос
Как в последней (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 за указание на то, что здесь должен использоваться новый синтаксис представления 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>
Поздний ответ, но именно так я превращаю 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>
}
Надеюсь, это кому-нибудь поможет
если вы не хотите использовать ссылку, используйте кнопку.вы также можете добавить изображение к кнопке:
<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>
Еще более поздний ответ, но я только что столкнулся с аналогичной проблемой и в итоге написал свой собственный Ссылка на изображение Расширение HtmlHelper.
Вы можете найти его реализацию в моем блоге по ссылке выше.
Просто добавлено на случай, если кто-то ищет реализацию.
Простой способ превратить Html.ActionLink в кнопку (если у вас подключен BootStrap, который, вероятно, у вас есть) выглядит следующим образом:
@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>
Чтобы отобразить значок со ссылкой
Делайте то, что говорит Мехрдад, или используйте помощник 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
)
@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();
}
Это может быть затруднительно делать это каждый раз, когда вы добавляете ссылку, которая должна выглядеть как кнопка, но это действительно дает желаемый результат.
использовать ОБРАЗОВАНИЕ
<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()
предоставит вам пустой 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>
}
Для Material Design Lite и MVC:
<a class="mdl-navigation__link" href='@Url.Action("MyAction", "MyController")'>Link Name</a>