HTML Button Calling an MVC Controller and Action Method

HTML button calling an MVC Controller and Action method

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

MVC - Call a controller method on button click

you must send back a form the source code like this:
Model/Yourmodel.cs:

 public class FooModel
    {
        public int Metric { get; set; }
    }

Your controller:

public ViewResult InputTest() {

    return View();
}

[HttpPost]
public ActionResult SubmitInputTest(FooModel model) { 
    //your code 
    //do stuff

    return RedirectToAction("index");
}

Your page:

    @model MVCWebApp.Models.FooModel

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>InputTest</title>
</head>
<body>
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/jquery.validate.min.js"></script>
    <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>


    @using (Html.BeginForm("SubmitInputTest","Home", FormMethod.Post))
    {
        @Html.AntiForgeryToken()

        <div class="form-horizontal">
            <h4>FooModel</h4>
            <hr />
            @Html.ValidationSummary(true, "", new { @class = "text-danger" })
            <div class="form-group">
                @Html.LabelFor(model => model.Metric, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Metric, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Metric, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <input type="submit" value="Save" class="btn btn-default" />
                </div>
            </div>
        </div>
    }

    <div>
        @Html.ActionLink("Back to List", "Index")
    </div>
</body>
</html>

Can an HTML button call an MVC Controller Action method

While using the onclick handler may work, it relies unnecessarily on JavaScript. You may find using a form submission to be cleaner:

<form action="<%: Url.Action("Create", "StudentInfo") %>" method="get">
    <input type="submit" value="Next" />
</form>

MVC5 Getting a button to call an action method in Controller

You have two options:

Option A

Remove the [HttpPost] attribute from your controller method and you will be able to create normal links to it, i.e. with @Html.ActionLink()

Option B

Keep the [HttpPost] attribute and use a form or ajax to send the request as a HTTP Post request, i.e.

<form id="Button4Pressed" action="@Url.Action("Button4Pressed", "Home")" method="post"></form>
<a href="#" onclick="javascript:document.getElementById('Button4Pressed').submit()">Button4</a>

how to call controller/action from button click in mvc 4

Your submit button should not have an onclick action.

It should submit a Form whose action is your endpoint ("LoginUser", "Home"), which you've correctly setup to accept HttpPost

You need a form something like this:

@using (Html.BeginForm("LoginUser", "Home", FormMethod.Post)){

<!-- form here -->
<button type="submit" class="btn btn-default">Submit</button>

}

Call MVC Controller and action method on button click

i know the answer is set but its just to clear out the question

in javascript we ussually use thing like

document.getElementsByName("fooName")[0].value;

what[0]--> suggests is that you are selecting the first element with that specific name,means the page may or may not contain more with the same name

that meaans

textbox name=foo
textbox name==foo

would be like

document.getElementsByName("foo")[0].value; 
document.getElementsByName("foo")[1].value;

where as in jquery you dont need that right now you tried to merge jquery functionality with javascript which sometimes work and sometimes may not

when using jquery try to use standerd jquery chainnig instead of venilla javascript

Call Controllers Action method from Button in MVC 5

You say you don't want to reload the page, but presumably you want the page to update in some way after the call to the server.

Instead of a button I generally use a link that is styled like a button:

@Ajax.ActionLink("Add New Details", "AddClient", "Client",
    new { /*action params*/ },
    new AjaxOptions()
        {
            Confirm = "Are you sure you want to add new details?",
            HttpMethod = "POST",
            OnComplete = "afterAddition()"
        },
    new { @class = "btn btn-default" }
)

HTML Button Calling an MVC Controller and Action Method