Bouton HTML appelant un contrôleur MVC et une méthode d'action

205

Je sais que ce n'est pas juste, mais pour l'illustration, j'aimerais faire quelque chose comme ça:

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

Mon objectif est de créer un bouton HTML qui appellera la méthode d'action de mon contrôleur MVC.

Aaron Salazar
la source
4
Définissez «appeler». Cela pourrait signifier un appel AJAX, un lien vers une autre page ou la publication d'un formulaire, pour nommer quelques possibilités.
3Dave
La plupart des réponses ci-dessus ont peut-être déjà fonctionné, malheureusement aucune n'a fonctionné pour moi. J'ai trouvé ici une réponse utile d'un autre article de Stackoverflow! Cela a fonctionné pour moi sur ASP avec dot net framework 4.7 mvc5 et bootstrap version 3. * et bien sûr dans Razor View. Le but principal de la question, je suppose, est de montrer un lien qui ressemble à un bouton.
Imran Faruqi

Réponses:

265

Pas besoin d'utiliser un formulaire du tout, sauf si vous souhaitez publier dans l'action. Un bouton de saisie (non soumis) fera l'affaire.

  <input type="button"
         value="Go Somewhere Else"
         onclick="location.href='<%: Url.Action("Action", "Controller") %>'" />
Cheddar
la source
1
J'ai utilisé cette suggestion car elle ne nécessite pas de formulaire. Je vous remercie!
Aaron Salazar
2
peut l'envelopper dans un quelque chose comme HtmlHelperpublic 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
cela donne une erreur constante de chaîne non
terminée
5
Si vous voulez passer un paramètre avec cela, vous pouvez utiliser<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

La syntaxe du rasoir est ici:

<input type="button" value="Create" onclick="location.href='@Url.Action("Create", "User")'" />
Babul Mirdha
la source
4
J'ai toujours eu une erreur "constante de chaîne non terminée" dans l'EDI qui ne s'est toujours pas rendue correctement. J'ai dû utiliser la solution d'ici: stackoverflow.com/a/16420877/410937
atconway
1
@atconway - étrange, cela a fonctionné pour moi exactement comment cette réponse la présente. VS2013.
ametren
6
@atconway - a eu la même erreur mais a changé la balise de 'input'à 'button'et cela a résolu l'erreur.
Tony Stark
6
Avec les paramètres <input type = "button" title = "Delete" value = "D" onclick = "location.href = '@ Url.Action (" Delete "," movies ", new {id = item.ID})' ' "/>
Sandeep
dans mon cas, le simple <button type="button" class="btn btn-primary" onclick="location.href='@Url.Action("action", "controller")'" >Go Somewhere Else</button>fait de faire l'affaire
Atiq Baqi
69
<button type="button" onclick="location.href='@Url.Action("MyAction", "MyController")'" />

type = "button" empêche la soumission de la page. au lieu de cela, il exécute votre action.

Amir Chatrbahr
la source
16

Essaye ça:

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

Cela devrait fonctionner pour vous.

Sunny Okoro Awa
la source
vous pouvez également utiliser le bootstrap ou d'autres classes css comme ceci: @ Html.ActionLink ("DisplayText", "Action", ["Controller"], routeValues: null, htmlAttributes: new {@ class = "btn btn-info btn-md ", style =" white-space: normal "})
Asaf
15

Vous pouvez utiliser Url.Action pour spécifier générer l'URL d'une action de contrôleur, vous pouvez donc utiliser l'une des options suivantes:

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

ou:

<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
la source
11

C'est ainsi que vous pouvez soumettre votre formulaire à un contrôleur et une méthode d'action spécifiques dans Razor.

 <input type="submit" value="Upload" onclick="location.href='@Url.Action("ActionName", "ControllerName")'" />
Debendra Dash
la source
10

En vous appuyant sur quelques-unes des réponses ci-dessus, vous pouvez le faire:

<button onclick="location.href='@Url.Action("ActionName", "ControllerName")'" />
utileBee
la source
6

Le HTML <button> élément ne peut être publié que dans le formulaire qui le contient.

Par conséquent, vous devez créer un formulaire qui POSTE à l'action, puis placez un <button>ou <input type="submit" />dans le formulaire.

SLaks
la source
5

Si vous obtenez une erreur en tant que "constante de chaîne non terminée", utilisez la syntaxe de rasoir suivante:

<input type="button" onclick="@("location.href='"+ Url.Action("Index","Test")+ "'")" />
Gaurav Joshi
la source
5

Malgré la méthode onclick, vous pouvez également utiliser la formaction comme suit:

<button type="submit" id="button1" name="button1" formaction='@Url.Action("Action", "Controller")'>Save</button>
Rahul Bhat
la source
Cela fonctionne mieux si vous avez une action avec un attribut de verbe HttpPost, cela empêchera les robots d'indexation de visiter ces liens destructeurs (merci à Hector Correa pour cette info)
Tahir Khalid
5

il vaut mieux utiliser cet exemple

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

Alex Siela
la source
4

Donc, j'utilise Razor mais cela fonctionnera avec l'un ou l'autre. J'emballe un bouton dans un lien.

<a href="Controller/ActionMethod">
    <input type="button" value="Click Me" />
</a>
jade290
la source
3

Utilisez cet exemple:

<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
la source
1

Si vous êtes sur la page d'accueil ("/ Home / Index") et que vous souhaitez appeler l'action Index du contrôleur Admin, la procédure suivante fonctionnera pour vous.

<li><a href="/Admin/Index">Admin</a></li>
Pabitra Dash
la source
1

il vaut mieux utiliser cet exemple .

Action d'appel et contrôleur à l'aide d'un ActionLink:

@Html.ActionLink("Submit", "Action", "Controller", route, new { @class = "btn btn-block"})
Rahul Raut
la source
0

OK, vous devez essentiellement passer l'action au bouton et l'appeler lorsque le clic se produit, il n'a pas besoin d'être à l'intérieur d'un, vous pouvez utiliser HTML onclicksur le bouton pour le déclencher lorsque le bouton est cliqué ...

<button id="my-button" onclick="location.href='@Url.Action("YourActionName", "YourControllerName")'">Submit</button>
Alireza
la source
0

Vous pouvez toujours jouer avec htmlHelpers et créer des trucs

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

Et puis sur la vue, appelez-le comme ça

@Html.BtnWithAction("btnCaretakerBack", "Back", "btn btn-primary float-right", "Index", "Caretakers")
Kabindas
la source