In this article I will explain with an example, how to submit (POST) JavaScript FormData object to Controller using 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.
There are two Action methods with the name Index, one for handling the GET operation while other for handling the POST operation.
The Action method for POST operation accepts an object of the FormCollection class as parameter.
Note: FormCollection class object is a Key-Value pair collection which provides access to data from the Request.Form collection.
The data posted using FormData object using jQuery AJAX is received through this parameter.
The fetched values are sent back to the View in String format using ContentResult.
public class HomeController : Controller
    // GET: Home
    public ActionResult Index()
        return View();
    public ContentResult Index(FormCollection formCollection)
        int personId = int.Parse(formCollection["PersonId"]);
        string name = formCollection["Name"];
        string gender = formCollection["Gender"];
        string city = formCollection["City"];
        string message = "PersonId: " + personId;
        message += "\nName: " + name;
        message += "\nGender: " + gender;
        message += "\nCity: " + city;
        return Content(message);
The View consists of an HTML Table consisting of three TextBox fields created for capturing values for PersonId, Name and City using the Html.TextBox method. While for capturing the Gender value, a DropDownList with three options is created using the Html.DropDownList function.
There’s also an HTML Button which has been assigned a jQuery Click event handler.
Inside the jQuery Click event handler, first a JavaScript FormData object is created and the values of the TextBoxes and DropDownList are added to it.
Then using jQuery AJAX, the JavaScript FormData object is sent to the Controller’s Action method.
    Layout = null;
<!DOCTYPE html>
    <meta name="viewport" content="width=device-width"/>
    <table cellpadding="0" cellspacing="0">
            <th colspan="2" align="center">Person Details</th>
            <td>PersonId: </td>
            <td>Name: </td>
            <td>Gender: </td>
                @Html.DropDownList("Gender", new List<SelectListItem>
                   { new SelectListItem{Text="Male", Value="M"},
                     new SelectListItem{Text="Female", Value="F"}}, "Please select")
            <td>City: </td>
            <td><input id="btnSubmit" type="button" value="Submit"/></td>
    <script type="text/javascript" src=""></script>
    <script type="text/javascript">
        $(function () {
            $("#btnSubmit").click(function () {
                var formData = new FormData();
                formData.append("PersonId", $("#PersonId").val());
                formData.append("Name", $("#Name").val());
                formData.append("Gender", $("#Gender").val());
                formData.append("City", $("#City").val());
                    url: "/Home/Index",
                    type: 'POST',
                    cache: false,
                    contentType: false,
                    processData: false,
                    data: formData,
                    success: function (response) {
Submit (POST) FormData to Controller using jQuery AJAX in ASP.Net MVC