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

Question

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

Answer 1

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

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

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

Answer 2

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

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

Answer 3

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

Для отображения иконки со ссылкой

Answer 4

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

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

Answer 5

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

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
                    )

Answer 6

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

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

Answer 7

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

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

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

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

Answer 8

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

Answer 9

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

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

Answer 10

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