In this article I will explain with an example, how to send Form values using JavaScript FormData object 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 following Action methods.

Action method for handling GET operation

Inside this Action method, simply the View is returned.
 

Action method for handling POST operation

This Action method 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

HTML Markup

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.

jQuery Implementation

Inside the jQuery Click event handler, first a JavaScript FormData object by passing the Form object as parameter which adds the values of the TextBoxes and DropDownList inside the Form to the JavaScript FormData..
Then using jQuery AJAX, the JavaScript FormData object is sent to the Controller’s Action method.
Note: In the jQuery AJAX call, the contentType property is set to false so that the Browser sets the default Content-Type i.e. multipart/form-data.
And the processData property is set to false, so that jQuery does not convert the Form data to QueryString.
 
@{
     Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <form id="myForm">
        <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>
    </form>
    <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($("#myForm")[0]);
                $.ajax({
                     url: "/Home/Index",
                     type: 'POST',
                     cache: false,
                     contentType: false,
                     processData: false,
                     data: formData,
                     success: function (response) {
                        alert(response);
                    }
                });
            });
        });
    </script>
</body>
</html>
 
 

Screenshot

ASP.Net MVC: Send Form values using FormData and jQuery AJAX
 
 

Downloads

Download Code