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

Question

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

Answer 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 */ 
} 

Answer 2

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

Answer 3

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

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

Answer 4

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

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

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

Answer 5

Мне нравится использовать Url.Action() и Url.Content(), как это:

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

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

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

Answer 6

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

Answer 7

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

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

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

Answer 8

Всего найдено this extension для этого - просто и эффективно.

Answer 9

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

Просто:

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

Answer 11

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

Answer 12

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

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

Trigger пример:

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

Answer 13

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

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

, чтобы избежать вызова метода после формы.

Answer 14

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

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

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

} 

Надеется, что это помогает кому-нибудь

Answer 16

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

<button type="button" onclick="location.href='@Url.Action("Create", "Company")'" > 
    Create New 
    <img alt="New" title="New" src="~/Images/Button/plus.png"> 
</button> 

тип = «кнопка» выполняет свое действие вместо отправки формы.

Answer 17

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

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

Answer 18

использования FORMACTION

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

Answer 19

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

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

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

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 21

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

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

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

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