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

326

Jak w najnowszej (RC1) wersji programu ASP.NET MVC uzyskać Html.ActionLink do renderowania jako przycisku lub obrazu zamiast łącza?

Ryan Lundy
źródło
13
W MVC 3.0 możesz wypróbować ten sposób <a href="@Url.Action("Index","Home")"> <img src = "@ Url.Content (" ~ / Themes / Gold / images / try-onit .png ")" alt = "Home" /> </a> Więcej informacji, spróbuj tego mycodingerrors.blogspot.com/2012/08/…
lasantha
Właśnie spędziłem kilka godzin, robiąc to „właściwie” (np. Przedłużając AjaxHelperz ActionButton), pomyślałem, że podzielę się tym poniżej.
Gone Coding
5
Zabawne jest dla mnie, że siedem lat później to pytanie wciąż zyskuje aprobatę. Najwyraźniej w 2016 roku nadal nie ma prostego, intuicyjnego sposobu na zrobienie tego.
Ryan Lundy,

Odpowiedzi:

330

Późna odpowiedź, ale możesz po prostu to uprościć i zastosować klasę CSS do obiektu htmlAttributes.

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

a następnie utwórz 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 */
}
znak
źródło
2
Działa to dla mnie idealnie, chociaż może być konieczne zastąpienie wartości null obiektem routeValues ​​w zależności od miejsca, do którego się łączysz.
David Conlisk
1
Jak sobie radzisz z ciągiem nazwy przycisku, który przypisujesz w parametrze łącza akcji. To nie działało dla mnie.
ZVenue
1
Ten sam problem, również dla mnie, parametr linkText nie może mieć wartości NULL ani pusty ciąg, jednak szukam zamiany przycisku obrazu.
Ant Swift,
5
to jest złe pod każdym względem, nie działa we wszystkich przeglądarkach, a jako działanie używasz efektu ubocznego. wiedźma sprawia, że ​​jest to bardzo zła praktyka, nie używaj jej. Tylko dlatego, że działa, nie czyni go dobrym rozwiązaniem.
Pedro.The.Kid
4
@Mark - rozwiązanie jslatts jest poprawne i nie, nie będzie działać w IE11, a ponieważ działa w obecnych przeglądarkach, jest to bardzo zła praktyka, ponieważ używasz efektu ubocznego jako funkcjonalności i jeśli implementacja zmieni efekt uboczny, ZATRZYMA SIĘ pracujący.
Pedro.The.Kid
350

Lubię używać Url.Action () i Url.Content () w następujący sposób:

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

Ściśle rzecz biorąc, adres URL jest potrzebny tylko do ścieżki, ale tak naprawdę nie jest częścią odpowiedzi na twoje pytanie.

Dzięki @BrianLegg za zwrócenie uwagi, że powinno to korzystać z nowej składni widoku Razor. Przykład został odpowiednio zaktualizowany.

jslatts
źródło
Jeśli chcesz mieć pomocnika HTML: fsmpi.uni-bayreuth.de/~dun3/archives/…
Tobias Hertkorn
6
To działa idealnie. Zwróć uwagę, że w MVC5 składnia uległa zmianie i powinna być <a href='@Url.Action("MyAction", „MyController")'> i <img src = '@ Url.Content (" ~ / Content / Images / MyLinkImage.png ") '/>. Dzięki
BrianLegg,
wyprodukował to z tekstem NAN? co robić
Basheer AL-MOMANI
94

Pożyczając z odpowiedzi Patricka, stwierdziłem, że muszę to zrobić:

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

aby uniknąć wywołania metody post formularza.

DevDave
źródło
51

Nazwij mnie uproszczonym, ale po prostu:

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

I po prostu zajmij się podświetleniem hiperłącza. Nasi użytkownicy to uwielbiają :)

agAus
źródło
1
@Ben Jednym z powodów, dla których nie ma wielu głosów, jest to, że udzielono odpowiedzi znacznie później niż w przypadku innych odpowiedzi. Właśnie miałem głosować, ale przetestowałem to, co powiedział @ Slider345 i mogę potwierdzić, że to nie działa zgodnie z oczekiwaniami w IE 7 lub 8. W każdym razie, jeśli zdecydujesz się go użyć, nie zapomnij ustawić css link (najechanie i aktywny), text-decoration:noneaby pozbyć się tego głupiego podkreślenia. Jest to konieczne w przypadku niektórych przeglądarek (na pewno Firefox 11.0).
Yetti,
23
Ale nie należy zagnieżdżać przycisków wewnątrz elementów, odwrotnie. Przynajmniej nie jest to poprawny sposób na zrobienie tego w HTML 5
Patrick Magee,
1
Tak, to nie działa nawet w IE10, z powodów, które wyjaśnia Patrick.
Ciaran Gallagher
Brak zagnieżdżania przycisków wewnątrz elementu akcji. stackoverflow.com/questions/6393827/…
Papa Burgundia
18

Za pomocą bootstrap jest to najkrótsze i najczystsze podejście do utworzenia łącza do akcji kontrolera, która pojawia się jako przycisk dynamiczny:

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

Lub użyć pomocników HTML:

@Html.ActionLink("Click Me", "Action", "Controller", new { @class = "btn btn-primary" })
Cameron Forward
źródło
Muszę się zgodzić z czystością. 100.
Chris Catignani
15

Po prostu:

<button onclick="@Url.Action("index", "Family", new {familyid = Model.FamilyID })">Cancel</button>
Patrick Kan
źródło
to wciąż wywołuje dla mnie metodę widoku, jakiś pomysł, dlaczego?
DevDave
To nie jest poprawna składnia. IE10 zgłasza błąd krytyczny JavaScript w tym wierszu „SCRIPT5017: Błąd składniowy w wyrażeniu regularnym”.
Ciaran Gallagher
Dobra odpowiedź, ale bez otaczania onclicktreści location.href(więc onclick="location.href='@Url.Action(....)'") nie mogłem zmusić go do działania.
SharpC
15

Późna odpowiedź, ale w ten sposób zmieniam mój ActionLink w przycisk. W naszym projekcie używamy Bootstrap, ponieważ jest to wygodne. Nieważne @T, ponieważ używamy tylko tłumacza.

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

Powyższe daje taki link i wygląda jak na poniższym obrazku:

localhost:XXXXX/Firms/AddAffiliation/F0500

obraz pokazujący przycisk z bootstrap

Według mnie:

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

}

Mam nadzieję, że to komuś pomoże

Cesarz 2052
źródło
1
Działa świetnie! ładny i prosty, htmlAttribute new { @class="btn btn-primary" })+ one
Irf
15

jeśli nie chcesz używać linku, użyj przycisku. możesz również dodać obrazek do przycisku:

<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 akcję zamiast przesyłać formularz.

Amir Chatrbahr
źródło
12

Nie możesz tego zrobić Html.ActionLink. Należy użyć Url.RouteUrladresu URL i użyć go do zbudowania żądanego elementu.

Mehrdad Afshari
źródło
Cześć, przepraszam, jestem bardzo nowy w MVC. Jak powinienem użyć Url.RouteURL, aby uzyskać obraz?
uriDium
Chodzi mi o to, że nie można wygenerować zagnieżdżonego znacznika img (lub znacznika przycisku) za pomocą prostego wywołania ActionLink. Oczywiście styl CSS samego tagu jest sposobem na obejście go, ale mimo to nie można uzyskać tagu img.
Mehrdad Afshari
9

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

Jiri HWeb Horalek
źródło
To działało dla mnie na IE10. Jest to dobre rozwiązanie, jeśli chcesz po prostu użyć przycisku zamiast obrazu, chociaż korzystanie z wbudowanego kodu JavaScript do prostego łącza prawdopodobnie nie jest idealne.
Ciaran Gallagher
1
(i dla pewności przetestowałem go na Opera, Safari, Chrome i Firefox i zadziałało)
Ciaran Gallagher
9

Prosty sposób, aby zrobić Html.ActionLink w przycisk (o ile masz podłączony BootStrap - co prawdopodobnie masz) jest następujący:

@Html.ActionLink("Button text", "ActionName", "ControllerName", new { @class = "btn btn-primary" })
haugan
źródło
8

Nawet późniejsza odpowiedź, ale wpadłem na podobny problem i skończyło się na napisaniu własnego rozszerzenia Image link HtmlHelper .

Implementację można znaleźć na moim blogu w linku powyżej.

Właśnie dodano, na wypadek, gdyby ktoś szukał implementacji.

Mirko
źródło
3
Link wydaje się teraz nieaktywny
d219,
5
<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

Andrew Day
źródło
4

Zrób to, co mówi Mehrdad - lub skorzystaj z pomocnika URL z HtmlHelpermetody rozszerzenia, takiej jak Stephen Walther, który opisuje tutaj i stwórz własną metodę rozszerzenia, której można użyć do renderowania wszystkich twoich linków.

Wtedy łatwo będzie renderować wszystkie linki jako przyciski / kotwice lub cokolwiek wolisz - i, co najważniejsze, możesz zmienić zdanie później, gdy okaże się, że wolisz inny sposób tworzenia linków.

mookid8000
źródło
3

możesz stworzyć własną metodę rozszerzenia,
spójrz na moją implementację

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

użyj go w swoim widoku, spójrz 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
                    )
Basheer AL-MOMANI
źródło
2

W przypadku Material Design Lite i MVC:

<a class="mdl-navigation__link" href='@Url.Action("MyAction", "MyController")'>Link Name</a>
Rody Davis
źródło
1
@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?');" />
    }
użytkownik477864
źródło
1

Wydaje się, że istnieje wiele rozwiązań dotyczących sposobu tworzenia łącza wyświetlanego jako obraz, ale żadne z nich nie wydaje się być przyciskiem.

Jest tylko dobry sposób, aby to zrobić. Jest trochę zuchwały, ale działa.

Musisz tylko utworzyć przycisk i osobne łącze do akcji. Uczyń link akcji niewidocznym za pomocą css. Po kliknięciu przycisku można uruchomić zdarzenie kliknięcia łącza 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 to być problem w tyłku, gdy robi się to za każdym razem, gdy dodajesz link, który musi wyglądać jak przycisk, ale osiąga pożądany efekt.

bsayegh
źródło
1

użyj FORMAKCJI

<input type="submit" value="Delete" formaction="@Url.Action("Delete", new { id = Model.Id })" />
Serge
źródło
0

Właśnie znalazłem to rozszerzenie, aby to zrobić - proste i skuteczne.

Shaul Behr
źródło
Link jest zepsuty.
Chris Catignani
0

Sposób, w jaki to zrobiłem, to oddzielne połączenie actionLink i obrazu. Ustaw obraz Actionlink 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 wyzwalacza:

$("#yourImage").click(function () {
  $('.yourclassname').trigger('click');
});
hatsrumandcode
źródło
0

Url.Action()dostarczy ci pusty adres URL dla większości przeciążeń Html.ActionLink, ale myślę, że ta URL-from-lambdafunkcjonalność jest dostępna tylko do Html.ActionLinktej pory. Mam nadzieję, że Url.Actionw pewnym momencie dodadzą podobne przeciążenie .

Dhanasekar
źródło
0

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

To samo, ale z oknem dialogowym parametrów i potwierdzenia:

@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>
}
Jevgenij Martynenko
źródło