HTML button calling an MVC Controller and Action method

Htmlasp.net Mvc

Html Problem Overview


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.

Html Solutions


Solution 1 - Html

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") %>'" />

Solution 2 - Html

Razor syntax is here:

<input type="button" value="Create" onclick="location.href='@Url.Action("Create", "User")'" />

Solution 3 - Html

<button type="button" onclick="location.href='@Url.Action("MyAction", "MyController")'" />

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

Solution 4 - Html

Try this:

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

This should work for you.

Solution 5 - Html

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>

Solution 6 - Html

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")'" />

Solution 7 - Html

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

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

Solution 8 - Html

it's better use this example

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

Solution 9 - Html

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>

Solution 10 - Html

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.

Solution 11 - Html

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>

Solution 12 - Html

Despite onclick Method you can also use formaction as follows:

<button type="submit" id="button1" name="button1" formaction='@Url.Action("Action", "Controller")'>Save</button>

Solution 13 - Html

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")+ "'")" />

Solution 14 - Html

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/

Solution 15 - Html

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>

Solution 16 - Html

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>

Solution 17 - Html

it's better use this example.

Call action and controller using a ActionLink:

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

Solution 18 - Html

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>

Solution 19 - Html

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")

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionAaron SalazarView Question on Stackoverflow
Solution 1 - HtmlCheddarView Answer on Stackoverflow
Solution 2 - HtmlBabul MirdhaView Answer on Stackoverflow
Solution 3 - HtmlAmir ChatrbahrView Answer on Stackoverflow
Solution 4 - HtmlSunny Okoro AwaView Answer on Stackoverflow
Solution 5 - HtmlJon GallowayView Answer on Stackoverflow
Solution 6 - HtmlDebendra DashView Answer on Stackoverflow
Solution 7 - HtmlusefulBeeView Answer on Stackoverflow
Solution 8 - HtmlAlex SielaView Answer on Stackoverflow
Solution 9 - Htmlnivs1978View Answer on Stackoverflow
Solution 10 - HtmlSLaksView Answer on Stackoverflow
Solution 11 - Htmljade290View Answer on Stackoverflow
Solution 12 - HtmlRahul BhatView Answer on Stackoverflow
Solution 13 - HtmlGaurav JoshiView Answer on Stackoverflow
Solution 14 - HtmlHappyCoderView Answer on Stackoverflow
Solution 15 - HtmlMohamed WardanView Answer on Stackoverflow
Solution 16 - HtmlPabitra DashView Answer on Stackoverflow
Solution 17 - HtmlRahul RautView Answer on Stackoverflow
Solution 18 - HtmlAlirezaView Answer on Stackoverflow
Solution 19 - HtmlKabindasView Answer on Stackoverflow