In this article I will explain with an example, how to submit (post) a Form and send data from View to Controller using jQuery AJAX in ASP.Net MVC Razor.
This article will explain how to create Form Fields and then send data from View to Controller using Form Collection and jQuery AJAX in ASP.Net MVC Razor.
Note: For beginners in ASP.Net MVC, please refer my article ASP.Net MVC Hello World Tutorial with Sample Program example.
 
 
Controller
The Controller consists of two Action methods.
Action method for handling GET operation
Inside this Action method, simply the View is returned.
 
Action method for handling AJAX POST operation
This Action method handles the AJAX Form submission and it accepts the value of the Form elements as parameter.
First, a check is performed whether valid Form values have been submitted and if the Form values are valid a BOOLEAN value TRUE is returned else a BOOLEAN value FALSE is returned.
public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }
 
    [HttpPost]
    public ActionResult Index(string firstName, string lastName)
    {
        if (!string.IsNullOrEmpty(firstName) && !string.IsNullOrEmpty(lastName))
        {
            string name = string.Format("Name: {0} {1}", firstName, lastName);
            return Json(true);
        }
 
        return Json(false);
    }
}
 
 
View
The View consists of an HTML Form which has been created using the Html.BeginForm method with the following parameters.
ActionName – Name of the Action. In this case the name is Index.
ControllerName – Name of the Controller. In this case the name is Home.
FormMethod – It specifies the Form Method i.e. GET or POST. In this case it will be set to POST.
There are two TextBox fields created for capturing values for First Name and Last Name.
There’s also an HTML Button at the end of the Form which has been assigned with a JavaScript OnClick event handler.
When the Submit Button is clicked, the AjaxFormSubmit JavaScript function is called.
First, the URL of the jQuery AJAX function is set using the value of the Action attribute of the Form.
Then the values of the TextBoxes are fetched and are added to the FormData object.
Note: The name specified in the FormData object and the parameter names in the Controller’s Action method must be same in order to fetch values.
 
Finally, based on the received BOOLEAN response a JavaScript Alert Message Box with appropriate message is displayed.
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width"/>
    <title>Index</title>
</head>
<body>
    @using (Html.BeginForm("Index", "Home", FormMethod.Post, new { @id = "myForm" }))
    {
        <table>
            <tr>
                <td>First Name: </td>
                <td><input type="text" id="txtFirstName"/></td>
            </tr>
            <tr>
                <td>Last Name: </td>
                <td><input type="text" id="txtLastName"/></td>
            </tr>
            <tr>
                <td></td>
                <td><input type="button" value="Submit" onclick="AjaxFormSubmit()"/></td>
            </tr>
        </table>
    }
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        function AjaxFormSubmit() {
            //Set the URL.
            var url = $("#myForm").attr("action");
 
            //Add the Field values to FormData object.
            var formData = new FormData();
            formData.append("firstName", $("#txtFirstName").val());
            formData.append("lastName", $("#txtLastName").val());
 
            $.ajax({
                type: 'POST',
                url: url,
                data: formData,
                processData: false,
                contentType: false
            }).done(function (response) {
                if (response) {
                    alert("Form submitted!");
                }
                else {
                    alert("Invalid Form data!");
                }
            });
        }
    </script>
</body>
</html>
 
 
Screenshot
ASP.Net MVC: Submit Form using jQuery
 
 
Browser Compatibility

The above code has been tested in the following browsers only in versions that support HTML5.

Internet Explorer  FireFox  Chrome  Safari  Opera 

* All browser logos displayed above are property of their respective owners.

 
 
Downloads
Download Code