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.
 
 
Controller
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();
    }
 
    [HttpPost]
    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);
    }
}
 
 
View
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>
 
<html>
<head>
    <meta name="viewport" content="width=device-width"/>
    <title>Index</title>
</head>
<body>
    <table cellpadding="0" cellspacing="0">
        <tr>
            <th colspan="2" align="center">Person Details</th>
        </tr>
        <tr>
            <td>PersonId: </td>
            <td>
                @Html.TextBox("PersonId")
            </td>
        </tr>
        <tr>
            <td>Name: </td>
            <td>
                @Html.TextBox("Name")
            </td>
        </tr>
        <tr>
            <td>Gender: </td>
            <td>
                @Html.DropDownList("Gender", new List<SelectListItem>
                   { new SelectListItem{Text="Male", Value="M"},
                     new SelectListItem{Text="Female", Value="F"}}, "Please select")
            </td>
        </tr>
        <tr>
            <td>City: </td>
            <td>
                @Html.TextBox("City")
            </td>
        </tr>
        <tr>
            <td></td>
            <td><input id="btnSubmit" type="button" value="Submit"/></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 () {
            $("#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());
                $.ajax({
                    url: "/Home/Index",
                    type: 'POST',
                    cache: false,
                    contentType: false,
                    processData: false,
                    data: formData,
                    success: function (response) {
                        alert(response);
                    }
                });
            });
        });
    </script>
</body>
</html>
 
 
Screenshot
Submit (POST) FormData to Controller using jQuery AJAX in ASP.Net MVC
 
 
Downloads
Download Code