Jak w najnowszej (RC1) wersji programu ASP.NET MVC uzyskać Html.ActionLink do renderowania jako przycisku lub obrazu zamiast łącza?
asp.net-mvc
actionlink
Ryan Lundy
źródło
źródło
AjaxHelper
zActionButton
), pomyślałem, że podzielę się tym poniżej.Odpowiedzi:
Późna odpowiedź, ale możesz po prostu to uprościć i zastosować klasę CSS do obiektu htmlAttributes.
a następnie utwórz klasę w arkuszu stylów
źródło
Lubię używać Url.Action () i Url.Content () w następujący sposób:
Ś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.
źródło
Pożyczając z odpowiedzi Patricka, stwierdziłem, że muszę to zrobić:
aby uniknąć wywołania metody post formularza.
źródło
Nazwij mnie uproszczonym, ale po prostu:
I po prostu zajmij się podświetleniem hiperłącza. Nasi użytkownicy to uwielbiają :)
źródło
text-decoration:none
aby pozbyć się tego głupiego podkreślenia. Jest to konieczne w przypadku niektórych przeglądarek (na pewno Firefox 11.0).Za pomocą bootstrap jest to najkrótsze i najczystsze podejście do utworzenia łącza do akcji kontrolera, która pojawia się jako przycisk dynamiczny:
Lub użyć pomocników HTML:
źródło
Po prostu:
źródło
onclick
treścilocation.href
(więconclick="location.href='@Url.Action(....)'"
) nie mogłem zmusić go do działania.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.
Powyższe daje taki link i wygląda jak na poniższym obrazku:
Według mnie:
Mam nadzieję, że to komuś pomoże
źródło
new { @class="btn btn-primary" })
+ onejeśli nie chcesz używać linku, użyj przycisku. możesz również dodać obrazek do przycisku:
type = "button" wykonuje akcję zamiast przesyłać formularz.
źródło
Nie możesz tego zrobić
Html.ActionLink
. Należy użyćUrl.RouteUrl
adresu URL i użyć go do zbudowania żądanego elementu.źródło
<button onclick="location.href='@Url.Action("NewCustomer", "Customers")'">Checkout >></button>
źródło
Prosty sposób, aby zrobić Html.ActionLink w przycisk (o ile masz podłączony BootStrap - co prawdopodobnie masz) jest następujący:
źródło
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.
źródło
Aby wyświetlić ikonę z linkiem
źródło
Zrób to, co mówi Mehrdad - lub skorzystaj z pomocnika URL z
HtmlHelper
metody 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.
źródło
możesz stworzyć własną metodę rozszerzenia,
spójrz na moją implementację
użyj go w swoim widoku, spójrz na moje wezwanie
źródło
W przypadku Material Design Lite i MVC:
źródło
źródło
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.
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.
źródło
użyj FORMAKCJI
źródło
Właśnie znalazłem to rozszerzenie, aby to zrobić - proste i skuteczne.
źródło
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.
Przykład wyzwalacza:
źródło
Url.Action()
dostarczy ci pusty adres URL dla większości przeciążeńHtml.ActionLink
, ale myślę, że taURL-from-lambda
funkcjonalność jest dostępna tylko doHtml.ActionLink
tej pory. Mam nadzieję, żeUrl.Action
w pewnym momencie dodadzą podobne przeciążenie .źródło
Oto jak to zrobiłem bez skryptów:
To samo, ale z oknem dialogowym parametrów i potwierdzenia:
źródło