Html.ActionLink как кнопка или изображение, а не ссылка


326

Как получить Html.ActionLink в последней версии (RC1) ASP.NET MVC для отображения в виде кнопки или изображения вместо ссылки?


13
С MVC 3.0 вы можете попробовать этот способ <a href="@Url.Action("Index","Home")"> <img src = "@ Url.Content (" ~ / Themes / Gold / images / try-onit .png ")" alt = "Главная" /> </a> Подробнее, попробуйте этот mycodingerrors.blogspot.com/2012/08/…
lasantha

Только что провел несколько часов , делая это «правильно» (например , путем расширения AjaxHelperс ActionButton) Я думал , что я разделю ее ниже.
Унес кодирование

5
Мне смешно, что семь лет спустя этот вопрос все еще вызывает отклик. По-видимому, в 2016 году до сих пор нет простого, интуитивно понятного способа сделать это.
Райан Ланди

Ответы:


330

Поздний ответ, но вы можете просто сохранить его и применить класс 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 */
}

2
Это прекрасно работает для меня, хотя вам может понадобиться заменить null на объект routeValues ​​в зависимости от того, куда вы ссылаетесь.
Дэвид Конлиск

1
Как вы обрабатываете строку имени кнопки, которую вы назначаете в параметре action link? Это не сработало для меня.
ZVenue

1
Та же проблема, для меня тоже, параметр linkText не может быть нулевым или пустой строкой, однако я ищу замену кнопки изображения.
Муравей Свифт

5
это плохо во всех отношениях, оно работает не во всех браузерах, и вы используете побочный эффект в качестве функциональности. Ведьма делает это очень плохой практикой, не используйте ее. То, что это работает, не делает его хорошим решением.
Pedro.The.Kid

4
@Mark - решение jslatts является правильным и нет, оно не будет работать в IE11, и только потому, что оно работает в текущих браузерах, это очень плохая практика, так как вы используете побочный эффект в качестве функциональности, и если реализация изменяет побочный эффект, ОСТАНОВИТСЯ работает.
Pedro.The.Kid

350

Мне нравится использовать Url.Action () и Url.Content () следующим образом:

<a href='@Url.Action("MyAction", "MyController")'>
    <img src='@Url.Content("~/Content/Images/MyLinkImage.png")' />
</a>

Строго говоря, Url.Content необходим только для маршрутизации и не является частью ответа на ваш вопрос.

Спасибо @BrianLegg за указание на то, что для этого следует использовать новый синтаксис Razor. Пример был обновлен соответственно.


Если вам нужен html-помощник для этого: fsmpi.uni-bayreuth.de/~dun3/archives/…
Тобиас Херткорн

6
Это работает отлично. Просто обратите внимание, что в MVC5 синтаксис изменился и должен быть <a href='@Url.Action("MyAction", "MyController")'> и <img src = '@ Url.Content ("~ / Content / Images / MyLinkImage.png ") '/>. Спасибо
BrianLegg

это произвело это с текстом NAN? что делать
Башир Аль-Момани

94

Заимствуя ответ Патрика, я обнаружил, что должен был сделать это:

<button onclick="location.href='@Url.Action("Index", "Users")';return false;">Cancel</button>

чтобы избежать вызова метода post формы.


51

Назовите меня упрощенно, но я просто делаю:

<a href="<%: Url.Action("ActionName", "ControllerName") %>">
    <button>Button Text</button>
</a>

И вы просто позаботитесь о выделении гиперссылки. Наши пользователи любят это :)


1
@ Одна из причин, по которой голосов не так много, - это ответ намного позже, чем другие ответы. Я собирался проголосовать, но проверил, что сказал @ Slider345, и могу подтвердить, что это не работает должным образом в IE 7 или 8. В любом случае, если вы решите использовать его, не забудьте установить CSS ссылка (наведите и активная), чтобы text-decoration:noneизбавиться от этой глупой подчеркивания. Это необходимо для некоторых браузеров (Firefox 11.0 наверняка).
Йети

23
Но вы не должны вкладывать кнопки в элементы, наоборот. По крайней мере, это недопустимый способ сделать это в HTML 5
Патрик Маги

1
Да, это не работает даже в IE10, по причинам, объясняемым Патриком.
Кьяран Галлахер

Нет вложенности кнопок внутри элемента действия. stackoverflow.com/questions/6393827/…
Папа Бургундия

18

Использование начальной загрузки - это самый короткий и чистый подход для создания ссылки на действие контроллера, которое отображается в виде динамической кнопки:

<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" })

Я должен согласиться с чистотой. 100.
Крис Катиньяни

15

Просто:

<button onclick="@Url.Action("index", "Family", new {familyid = Model.FamilyID })">Cancel</button>

это все еще вызывает метод сообщения представления для меня, любая идея почему?
DevDave

Это неверный синтаксис. В этой строке IE10 выдает критическую ошибку JavaScript: «SCRIPT5017: синтаксическая ошибка в регулярном выражении».
Кьяран Галлахер

Хороший ответ, но без окружения onclickсодержания location.href(так onclick="location.href='@Url.Action(....)'") я не мог заставить его работать.
SharpC

15

Поздний ответ, но именно так я превращаю свой 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>

}

Надеюсь, это кому-нибудь поможет


1
Работает круто! красиво и просто, htmlAttribute new { @class="btn btn-primary" })+ one
Irf

15

если вы не хотите использовать ссылку, используйте кнопку. Вы также можете добавить изображение к кнопке:

<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" выполняет ваше действие вместо отправки формы.


12

Вы не можете сделать это с Html.ActionLink. Вы должны использовать Url.RouteUrlи использовать URL для создания элемента, который вы хотите.


Привет, извините, я новичок в MVC. Как бы я использовал Url.RouteURL для получения изображения?
UriDium

Я имел в виду, что вы не можете сгенерировать вложенный тег img (или тег кнопки) с помощью простого вызова ActionLink. Конечно, CSS-стилизация самого тега - это способ обойти это, но тем не менее вы не можете получить тег img.
Мехрдад Афшари

9

<button onclick="location.href='@Url.Action("NewCustomer", "Customers")'">Checkout >></button>


Это сработало для меня на IE10. Это хорошее решение, если вы просто хотите использовать кнопку, а не изображение, хотя необходимость использовать встроенный JavaScript для простой ссылки, вероятно, не идеальна.
Кьяран Галлахер

1
(и, чтобы быть уверенным, я протестировал его на Opera, Safari, Chrome и Firefox, и это сработало)
Ciaran Gallagher

9

Простой способ превратить ваш Html.ActionLink в кнопку (если у вас подключен BootStrap - что у вас, вероятно, есть):

@Html.ActionLink("Button text", "ActionName", "ControllerName", new { @class = "btn btn-primary" })

8

Еще более поздний ответ, но я просто столкнулся с подобной проблемой и закончил тем, что написал свое собственное расширение Image link HtmlHelper .

Вы можете найти реализацию этого в моем блоге по ссылке выше.

Просто добавьте, если кто-то ищет реализацию.


3
Ссылка сейчас неактивна
d219

5
<li><a href="@Url.Action(  "View", "Controller" )"><i class='fa fa-user'></i><span>Users View</span></a></li>

Чтобы отобразить значок со ссылкой


4

Делайте то, что говорит Mehrdad - или используйте помощника url из HtmlHelperметода расширения, как описано здесь Стивеном Вальтером. и создайте свой собственный метод расширения, который можно использовать для отображения всех ваших ссылок.

Тогда все ссылки будут легко отображаться в виде кнопок / якорей или в зависимости от того, что вы предпочитаете, и, что наиболее важно, вы можете передумать позже, когда обнаружите, что на самом деле предпочитаете какой-то другой способ создания ссылок.


3

Вы можете создать свой собственный метод расширения
взглянуть на мою реализацию

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
                    )


1
@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?');" />
    }

1

Кажется, есть много решений о том, как создать ссылку, которая отображается как изображение, но ни одно из них не делает ее похожей на кнопку.

Есть только хороший способ сделать это. Это немного хакерски, но это работает.

Что вам нужно сделать, это создать кнопку и отдельную ссылку действия. Сделайте ссылку действия невидимой, используя 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();
 }

Это может быть неприятно делать это каждый раз, когда вы добавляете ссылку, которая должна выглядеть как кнопка, но при этом она достигает желаемого результата.


1

использовать FORMACTION

<input type="submit" value="Delete" formaction="@Url.Action("Delete", new { id = Model.Id })" />


0

То, как я это сделал, - это разделили actionLink и изображение. Установите изображение actionlink как скрытое, а затем добавьте вызов триггера jQuery. Это скорее обходной путь.

'<%= Html.ActionLink("Button Name", "Index", null, new { @class="yourclassname" }) %>'
<img id="yourImage" src="myImage.jpg" />

Пример триггера:

$("#yourImage").click(function () {
  $('.yourclassname').trigger('click');
});

0

Url.Action()даст вам голый URL для большинства перегрузок Html.ActionLink, но я думаю, что URL-from-lambdaфункциональность доступна только Html.ActionLinkдо сих пор. Надеюсь, Url.Actionв какой-то момент они добавят подобную перегрузку .


0

Вот как я это сделал без сценариев:

@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>
}
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.