Html.ActionLink jako przycisk lub obraz, a nie jako łącze

Question

W najnowszym wydaniu programu ASP.NET MVC (RC1), w jaki sposób można uzyskać, aby Html.ActionLink był renderowany jako przycisk lub obraz zamiast łącza?

Answer 1

Późna odpowiedź, ale możesz po prostu zachować prostotę i zastosować klasę CSS do obiektu htmlAttributes.

<%= Html.ActionLink("Button Name", "Index", null, new { @class="classname" }) %> 

a następnie utworzyć klasę w arkuszu stylów

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

Nie można tego zrobić z Html.ActionLink. Powinieneś użyć Url.RouteUrl i użyć adresu URL do skonstruowania żądanego elementu.

Answer 3

Zrób to, co mówi Mehrdad - lub użyj pomocnika url z metody rozszerzenia HtmlHelper, takiej jak Stephen Walther, opisując here i utwórz własną metodę rozszerzenia, która może być używana do renderowania wszystkich twoich linków.

Wtedy łatwo będzie renderować wszystkie linki jako przyciski/zakotwiczenia lub dowolną inną opcję - i, co najważniejsze, później możesz zmienić zdanie, gdy dowiesz się, że faktycznie wolisz inny sposób tworzenia linków.

Answer 4

Nawet później odpowiedzi, ale ja po prostu wpadł na podobny problem i skończyło się pisać własne Image link HtmlHelper extension.

Możesz znaleźć implementację tego na moim blogu w powyższym linku.

Po prostu w przypadku, gdy ktoś poluje na wdrożenie.

Answer 5

Lubię używać Url.Action() i() Url.Content tak:

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

Ściśle mówiąc, Url.Content jest potrzebna tylko dla pathing naprawdę nie jest częścią odpowiedzi na swoje pytanie.

Dzięki @BrianLegg za wskazanie, że powinno się użyć nowej składni widoku Brzytwa. Przykład został odpowiednio zaktualizowany.

Answer 6

Url.Action() będzie Ci goły URL dla większości przeciążeń Html.ActionLink, ale myślę, że funkcjonalność URL-from-lambda jest dostępna tylko poprzez Html.ActionLink tak daleko. Mam nadzieję, że dodadzą w pewnym momencie podobne przeciążenie do Url.Action.

Answer 7

Zadzwoń uproszczone, ale ja po prostu zrobić:

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

I po prostu dbać o podświetleniem hiperłącza. Nasi użytkownicy to uwielbiają :)

Answer 8

Właśnie znaleziono this extension do zrobienia - proste i skuteczne.

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

Wystarczy jedynie:

<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

Sposób, w jaki zrobili to mieć actionlink i wizerunku oddzielnie. Ustaw obraz akcji jako ukryty , a następnie dodano wywołanie wyzwalacza jQuery.To jest bardziej obejście.

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

przykład wyzwalania:

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

Answer 13

Pożyczanie od Patryka odpowiedzi, znalazłem, że muszę to zrobić:

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

aby uniknąć wywoływania metody POST formularza.

Answer 14

Wygląda na to, że istnieje wiele rozwiązań dotyczących tworzenia linku wyświetlanego jako obraz, ale żaden nie sprawia, że ​​wygląda na przycisk.

Jest tylko dobry sposób, który znalazłem, aby to zrobić. Jest trochę hacky, ale działa.

Co musisz zrobić, to utworzyć przycisk i osobne łącze akcji. Spraw, aby łącze akcji było niewidoczne za pomocą css. Po kliknięciu przycisku może wystrzelić zdarzenie kliknięcia linku akcji.

<input type="button" value="Search" onclick="Search()" /> 
@Ajax.ActionLink("Search", "ActionName", null, new AjaxOptions {}, new { id = "SearchLink", style="display:none;" }) 

function Search(){ 
    $("#SearchLink").click(); 
} 

Może być upierdliwe robić to za każdym razem, gdy dodać link, który musi wyglądać jak przycisk, ale nie osiągnąć pożądany rezultat.

Answer 15

Późna odpowiedź, ale w ten sposób zmieniam moje działanie w ActionLink w przycisk. Używamy Bootstrap w naszym projekcie, ponieważ jest to wygodne. Mniejsza o @T, ponieważ jest to tylko tłumacz, którego używamy.

@Html.Actionlink("Some_button_text", "ActionMethod", "Controller", "Optional parameter", "html_code_you_want_to_apply_to_the_actionlink"); 

Powyższe daje link jak to i wygląda jak na zdjęciu poniżej:

localhost:XXXXX/Firms/AddAffiliation/F0500 

Moim zdaniem:

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

} 

nadzieję, że pomoże komuś

Answer 16

jeśli nie chcesz używać linku, użyj przycisku. można dodać obraz przycisku, a także:

<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" wykonuje swoje działania, zamiast składania formularza.

Answer 17

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

Aby wyświetlić ikonę z linkiem

Answer 18

użytku FORMACTION

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

Answer 19

To jak to zrobiłem bez skryptów:

@using (Html.BeginForm("Action", "Controller", FormMethod.Get)) 
{ 
    <button type="submit" 
      class="btn btn-default" 
      title="Action description">Button Label</button> 
} 

samo, ale z parametrem i potwierdzenia dialog:

@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

można utworzyć własną metodę rozszerzenia
wynos okiem na moje realizacji

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

następnie używać go w widoku wziąć spojrzeć na moje wezwanie

@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

Korzystanie bootstrap to najkrótsza i najczystsze podejście do tworzenia łącza do działania kontrolera, który pojawia się jako przycisk dynamiczny:

<a href='@Url.Action("Action", "Controller")' class="btn btn-primary">Click Me</a> 

Albo używać HTML pomocnicy:

@Html.ActionLink("Click Me", "Action", "Controller", new { @class = "btn btn-primary" }) 

Answer 22

prosty sposób zrobić dokonać Html.ActionLink do przycisku (tak długo, jak masz podłączony Bootstrap - który zapewne masz) jest tak:

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