239

I know this isn't right, but for the sake of illustration I'd like to do something like this:

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

My goal is to make an HTML button that will call my MVC controller's action method.

TylerH
  • 20,799
  • 66
  • 75
  • 101
Aaron Salazar
  • 4,467
  • 10
  • 39
  • 54
  • 4
    Define "call." This could mean an AJAX call, a link to another page, or posting a form, to name a few possibilities. – 3Dave Mar 23 '10 at 22:03
  • Most answers above might already have worked, unfortunately none worked for me. I found [here](https://stackoverflow.com/a/29377762/11325901) a useful answer from another Stackoverflow post! It worked for me on ASP with dot net framework 4.7 mvc5 and bootstrap version 3.* and of course in Razor View. The main purpose of the question as I assume is to show a link that looks like a button. – Imran Faruqi May 16 '19 at 15:47

19 Answers19

297

No need to use a form at all unless you want to post to the action. An input button (not submit) will do the trick.

  <input type="button"
         value="Go Somewhere Else"
         onclick="location.href='<%: Url.Action("Action", "Controller") %>'" />
S. Esteves
  • 415
  • 4
  • 14
Cheddar
  • 4,680
  • 1
  • 19
  • 10
282

Razor syntax is here:

<input type="button" value="Create" onclick="location.href='@Url.Action("Create", "User")'" />
Babul Mirdha
  • 3,816
  • 1
  • 22
  • 25
95
<button type="button" onclick="location.href='@Url.Action("MyAction", "MyController")'" />

type="button" prevents page from submitting, instead it performs your action.

Amir Chatrbahr
  • 2,260
  • 21
  • 31
22

Try this:

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

This should work for you.

Window
  • 1,377
  • 2
  • 13
  • 23
Sunny Okoro Awa
  • 523
  • 4
  • 9
  • 1
    you can also use bootstrap or other css classes like this: @Html.ActionLink("DisplayText", "Action", ["Controller"], routeValues: null, htmlAttributes: new {@class="btn btn-info btn-md", style="white-space: normal" }) – Asaf Jul 25 '17 at 14:25
15

You can use Url.Action to specify generate the url to a controller action, so you could use either of the following:

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

or:

<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
  • 52,327
  • 25
  • 125
  • 193
14

This is how you can submit your form to a specific controller and action method in Razor.

 <input type="submit" value="Upload" onclick="location.href='@Url.Action("ActionName", "ControllerName")'" />
marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Debendra Dash
  • 5,334
  • 46
  • 38
11

Building on couple of the above answers, you could do this:

<button onclick="location.href='@Url.Action("ActionName", "ControllerName")'" />
usefulBee
  • 9,250
  • 10
  • 51
  • 89
10

Of all the suggestions, nobdy used the razor syntax (this is with bootstrap styles as well). This will make a button that redirects to the Login view in the Account controller:

    <form>
        <button class="btn btn-primary" asp-action="Login" asp- 
   controller="Account">@Localizer["Login"]</button>
    </form>
nivs1978
  • 1,126
  • 14
  • 20
7

it's better use this example

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

The HTML <button> element can only postback to the form containing it.

Therefore, you need to make a form that POSTs to the action, then put a <button> or <input type="submit" /> in the form.

SLaks
  • 868,454
  • 176
  • 1,908
  • 1,964
5

So, I'm using Razor but this will work using either. I'm basically wrapping a button in a link.

<a href="Controller/ActionMethod">
    <input type="button" value="Click Me" />
</a>
jade290
  • 413
  • 6
  • 5
5

Despite onclick Method you can also use formaction as follows:

<button type="submit" id="button1" name="button1" formaction='@Url.Action("Action", "Controller")'>Save</button>
Rahul Bhat
  • 308
  • 2
  • 14
  • This works better if you have an action with an HttpPost verb attribute it will stop web crawlers from visiting those destructive links (thanks to Hector Correa for this info) – Trevor Feb 04 '18 at 20:44
5

Use this example :

<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
  • 116
  • 2
  • 8
4

In case if you are getting an error as "unterminated string constant", use the following razor syntax :

<input type="button" onclick="@("location.href='"+ Url.Action("Index","Test")+ "'")" />
Gaurav Joshi
  • 49
  • 1
  • 1
4

When you implement the action in the controller, use

return View("Index");

or

return RedirectToAction("Index");

where Index.cshtml (or the page that generates the action) page is already defined. Otherwise you are likely encountering "the view or its master was not found..." error.

Source: https://blogs.msdn.microsoft.com/aspnetue/2010/09/17/best-practices-for-asp-net-mvc/

HappyCoder
  • 41
  • 2
1

If you are in home page ("/Home/Index") and you would like to call Index action of Admin controller, following would work for you.

<li><a href="/Admin/Index">Admin</a></li>
Pabitra Dash
  • 1,461
  • 2
  • 21
  • 28
1

it's better use this example.

Call action and controller using a ActionLink:

@Html.ActionLink("Submit", "Action", "Controller", route, new { @class = "btn btn-block"})
Caique Romero
  • 613
  • 8
  • 16
Rahul Raut
  • 11
  • 2
0

OK, you basically need to pass the action to the button and call it when click happens, it doesn't need to be inside a from, you can use HTML onclick on button to trigger it when the button get clicked...

<button id="my-button" onclick="location.href='@Url.Action("YourActionName", "YourControllerName")'">Submit</button>
Alireza
  • 100,211
  • 27
  • 269
  • 172
0

You can always play around with htmlHelpers and build some stuff

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

And then on the view call it like this

@Html.BtnWithAction("btnCaretakerBack", "Back", "btn btn-primary float-right", "Index", "Caretakers")
Kabindas
  • 802
  • 9
  • 6