Przycisk HTML wywołujący kontroler MVC i metodę akcji

204

Wiem, że to nie w porządku, ale dla ilustracji chciałbym zrobić coś takiego:

<%= Html.Button("Action", "Controller") %>

Moim celem jest utworzenie przycisku HTML, który wywoła metodę działania mojego kontrolera MVC.

Aaron Salazar
źródło
4
Zdefiniuj „połączenie”. Może to oznaczać wywołanie AJAX, link do innej strony lub opublikowanie formularza, aby wymienić kilka możliwości.
3Dave
Większość powyższych odpowiedzi mogła już zadziałać, niestety żadna nie działała dla mnie. Znalazłem tutaj przydatną odpowiedź z innego postu Stackoverflow! Działa dla mnie na ASP z ramą dot net Framework 4.7 mvc5 i bootstrap w wersji 3. * i oczywiście w Razor View. Głównym założeniem tego pytania, jak zakładam, jest pokazanie linku, który wygląda jak przycisk.
Imran

Odpowiedzi:

264

W ogóle nie musisz używać formularza, chyba że chcesz opublikować post na akcji. Przycisk wprowadzania (nie prześlij) załatwi sprawę.

  <input type="button"
         value="Go Somewhere Else"
         onclick="location.href='<%: Url.Action("Action", "Controller") %>'" />
ser Cheddar
źródło
1
Użyłem tej sugestii, ponieważ nie wymaga formularza. Dziękuję Ci!
Aaron Salazar,
2
może zawinąć go w HtmlHelper coś w stylupublic static string ActionButton(this HtmlHelper helper, string action, string controller, string text) { return String.Format("<input type=\"button\" value=\"{0}\" onclick=\"location.href='{1}' />",text,Url.Action(action,controller)); }
Menahem
11
powoduje ciągły błąd nieokreślonego ciągu w moim kodzie
Burak Karakuş
5
Jeśli chcesz przekazać parametr z tym parametrem, możesz użyć<input type="button" value="Go Somewhere Else" onclick="location.href='<%: Url.Action("Action", "Controller", new { parameter1 = value1 }) %>'" />
HowlinWulf
1
<input type = "button" value = "DeleteAll" onclick = "location.href = '@ Url.Action (" DeleteAll "," Home ")'" />
Yuchao Zhou
242

Składnia Razor jest tutaj:

<input type="button" value="Create" onclick="location.href='@Url.Action("Create", "User")'" />
Babul Mirdha
źródło
4
Nadal dostaję błąd „niezakończonej stałej ciągu” w IDE, który nadal nie wyświetlał się poprawnie. Musiałem użyć rozwiązania stąd: stackoverflow.com/a/16420877/410937
atconway
1
@atconway - dziwne, działało dla mnie dokładnie tak, jak przedstawia to odpowiedź. VS2013.
ametren
6
@atconway - wystąpił ten sam błąd, ale zmieniono zmieniono tag z 'input'na 'button'i to rozwiązało błąd.
Tony Stark
6
Z parametrami <input type = "button" title = "Delete" value = "D" onclick = "location.href = '@ Url.Action („ Delete ”,„ movies ”, new {id = item.ID})” "/>
Sandeep
w moim przypadku po prostu <button type="button" class="btn btn-primary" onclick="location.href='@Url.Action("action", "controller")'" >Go Somewhere Else</button>zrobiłem lewę
Atiq Baqi
69
<button type="button" onclick="location.href='@Url.Action("MyAction", "MyController")'" />

type = "button" zapobiega przesyłaniu strony. zamiast tego wykonuje twoją akcję.

Amir Chatrbahr
źródło
16

Spróbuj tego:

@Html.ActionLink("DisplayText", "Action", "Controller", route, attribute)

To powinno ci pomóc.

Sunny Okoro Awa
źródło
możesz także użyć bootstrap lub innych klas css, takich jak: @ Html.ActionLink („DisplayText”, „Action”, [„Controller”], routeValues: null, htmlAttributes: new {@ class = "btn btn-info btn-md ", style =" white-space: normal "})
Asaf,
15

Możesz użyć Url.Action, aby określić generowanie adresu URL do akcji kontrolera, dzięki czemu możesz użyć jednej z następujących czynności:

<form method="post" action="<%: Url.Action("About", "Home") %>">
   <input type="submit" value="Click me to go to /Home/About" />
</form>

lub:

<form action="#">
  <input type="submit" onclick="parent.location='<%: Url.Action("About", "Home") %>';return false;" value="Click me to go to /Home/About" />
  <input type="submit" onclick="parent.location='<%: Url.Action("Register", "Account") %>';return false;" value="Click me to go to /Account/Register" />
</form>
Jon Galloway
źródło
11

W ten sposób możesz przesłać formularz do określonego kontrolera i metody działania w Razor.

 <input type="submit" value="Upload" onclick="location.href='@Url.Action("ActionName", "ControllerName")'" />
Debendra Dash
źródło
10

Opierając się na kilku powyższych odpowiedziach, możesz to zrobić:

<button onclick="location.href='@Url.Action("ActionName", "ControllerName")'" />
przydatne
źródło
6

Element HTML <button>może jedynie wysłać zwrotnie do zawierającego go formularza.

Dlatego musisz utworzyć formularz POST do akcji, a następnie wstawić a <button>lub <input type="submit" />w formularzu.

SLaks
źródło
5

W przypadku pojawienia się błędu jako „niezakończonej stałej ciągu”, użyj następującej składni maszynki:

<input type="button" onclick="@("location.href='"+ Url.Action("Index","Test")+ "'")" />
Gaurav Joshi
źródło
5

lepiej skorzystać z tego przykładu

<a href="@Url.Action("Register","Account", new {id=Item.id })"
class="btn btn-primary btn-lg">Register</a>

Alex Siela
źródło
4

Tak więc używam Razor, ale to będzie działać przy użyciu obu. Zasadniczo zawijam przycisk w linku.

<a href="Controller/ActionMethod">
    <input type="button" value="Click Me" />
</a>
jade290
źródło
4

Pomimo metody onclick możesz również użyć formaction w następujący sposób:

<button type="submit" id="button1" name="button1" formaction='@Url.Action("Action", "Controller")'>Save</button>
Rahul Bhat
źródło
Działa to lepiej, jeśli masz akcję z atrybutem czasownika HttpPost, uniemożliwi to robotom indeksującym odwiedzanie destrukcyjnych linków (podziękowania dla Hectora Correi za tę informację)
Tahir Khalid
3

Skorzystaj z tego przykładu:

<button name="nameButton" id="idButton" title="your title" class="btn btn-secondary" onclick="location.href='@Url.Action( "Index","Controller" new {  id = Item.id })';return false;">valueButton</button>
Mohamed Wardan
źródło
1

Jeśli jesteś na stronie głównej („/ Home / Index”) i chcesz wywołać akcję Indeks kontrolera administracyjnego, skorzystanie z tej opcji będzie dla Ciebie odpowiednie.

<li><a href="/Admin/Index">Admin</a></li>
Pabitra Dash
źródło
1

lepiej skorzystać z tego przykładu .

Wywołaj akcję i kontroler za pomocą ActionLink:

@Html.ActionLink("Submit", "Action", "Controller", route, new { @class = "btn btn-block"})
Rahul Raut
źródło
0

OK, to w zasadzie trzeba przekazać skargę do przycisku i nazwać gdy kliknięcie dzieje, to nie musi znajdować się wewnątrz od, można używać HTML onclickna przycisku do uruchomienia go, gdy przycisk dostać kliknięciu ...

<button id="my-button" onclick="location.href='@Url.Action("YourActionName", "YourControllerName")'">Submit</button>
Alireza
źródło
0

Zawsze możesz bawić się przy pomocy htmlHelpers i budować różne rzeczy

    public static IHtmlContent BtnWithAction(this IHtmlHelper htmlHelper, string id, string text, string css="", string action="", string controller="")
    {
        try
        {
            string str = $"<button id=\"{id}\" class=\"{css}\" type=\"button\" ###>{text}</button>";
            if (!string.IsNullOrEmpty(action) && !string.IsNullOrEmpty(controller))
            {                    
                string url = ((TagBuilder)htmlHelper.ActionLink("dummy", action, controller)).Attributes["href"];
                var click = !string.IsNullOrEmpty(url) ? $"onclick=\"location.href='{url}'\"" : string.Empty;
                return new HtmlString(str.Replace("###", click));
            }
            return new HtmlString(str.Replace("###", string.Empty));
        }
        catch (Exception ex)
        {
            Log.Error(ex, ex.Message);
            var fkup = "<script>alert(\"assumption is the mother of all failures\")</script>";
            return new HtmlString(fkup);
        }
    }

A potem w widoku nazywają to tak

@Html.BtnWithAction("btnCaretakerBack", "Back", "btn btn-primary float-right", "Index", "Caretakers")
Kabindas
źródło