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

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

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

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

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

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

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

type = "button" выполняет ваше действие вместо отправки формы.

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

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

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

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

Еще более поздний ответ, но я просто столкнулся с подобной проблемой и закончил тем, что написал свое собственное расширение 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();
 }

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

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

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