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

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

ОТВЕТЫ

Ответ 1

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

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

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

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

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

Ответ 3

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

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

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

Ответ 4

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

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

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

Ответ 5

Просто:

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

Ответ 6

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

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

Ответ 7

Вы не можете сделать это с помощью Html.ActionLink. Вы должны использовать Url.RouteUrl и использовать URL для создания нужного элемента.

Ответ 8

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

picture demonstrating button with bootstrap

На мой взгляд:

@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>

}

Надеюсь, что это поможет кому-то.

Ответ 9

Еще более поздний ответ, но я просто столкнулся с подобной проблемой и в итоге написал свою собственную ссылку на изображение HtmlHelper.

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

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

Ответ 10

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

Ответ 11

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

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

Ответ 12

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

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

Ответ 13

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

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
                    )

Ответ 14

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

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

Ответ 15

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

Ответ 16

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

Есть только хороший способ, который я нашел для этого. Он немного взломан, но он работает.

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

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

Ответ 17

используйте FORMACTION

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

Ответ 18

Простой способ сделать ваш Html.ActionLink одним нажатием кнопки (до тех пор, пока вы загрузите BootStrap - что у вас есть):

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

Ответ 19

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

Ответ 20

Просто нашел это расширение, чтобы сделать это - простой и эффективный.

Ответ 21

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

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

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

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

Ответ 22

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

@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>
}