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

Question

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

Answer 1

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

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

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

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

Answer 2

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

Answer 3

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

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

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

Answer 4

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

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

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

Answer 5

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

}

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

Answer 6

Просто, просто:

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

Answer 7

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

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

Answer 8

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

Answer 9

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

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

Answer 10

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