Different Ways to Pass Form Data into a Controller in .NET MVC

In this blog post we will learn about four different methods for passing form data to a controller in .NET MVC. It includes a sample code for each method and a brief explanation of how it works. This post is useful for developers who are new to .NET MVC and want to learn how to handle form data.

• Pass form data from view to controller using FormCollection:

With this option, the form data is passed to the controller action method as a `FormCollection` object. The `FormCollection` object provides access to the form field values using their names as keys. Controller code:

[HttpPost]
public ActionResult SubmitForm(FormCollection form)
{
    string firstName = form["FirstName"];
    string lastName = form["LastName"];
    // ...
    return View();
}

View code:

@using (Html.BeginForm("SubmitForm", "MyController", FormMethod.Post))
{
    First Name:
    @Html.TextBox("FirstName")

    Last Name:
    @Html.TextBox("LastName")

    
}

• Pass form data from view to controller Using parameters:

With this option, the form data is passed to the controller action method as individual parameters. The parameter names must match the names of the form fields. Controller code:

[HttpPost]
public ActionResult SubmitForm(string FirstName, string LastName)
{
    // ...
    return View();
}

View code:

@using (Html.BeginForm("SubmitForm", "MyController", FormMethod.Post))
{
    First Name:
    @Html.TextBox("FirstName")

    Last Name:
    @Html.TextBox("LastName")

    
}

• Pass form data from view to controller Using a model:

With this option, the form data is passed to the controller action method as an instance of a model class. The model class defines properties that match the names of the form fields. Controller code:

[HttpPost]
public ActionResult SubmitForm(MyModel model)
{
    string firstName = model.FirstName;
    string lastName = model.LastName;
    // ...
    return View();
}

Model code:

public class MyModel
{
    public string FirstName { get; set; }
    public string LastName { get; set; }
    // ...
}

View code:

@model MyNamespace.MyModel

@using (Html.BeginForm("SubmitForm", "MyController", FormMethod.Post))
{
    First Name:
    @Html.TextBoxFor(m => m.FirstName)

    Last Name:
    @Html.TextBoxFor(m => m.LastName)

    
}

• Pass form data from view to controller Using jQuery AJAX:

With this option, the form data is submitted to the controller action method asynchronously using jQuery AJAX. The form data is serialized into a JSON object and sent to the server. Controller code:

[HttpPost]
public ActionResult SubmitForm(MyModel model)
{
    string firstName = model.FirstName;
    string lastName = model.LastName;
    // ...
    return Json(new { success = true });
}

Model code:

public class MyModel
{
    public string FirstName { get; set; }
    public string LastName { get; set; }
    // ...
}

View code:

@model MyNamespace.MyModel

@using (Html.BeginForm("SubmitForm", "MyController", FormMethod.Post, new { id = "myForm" }))
{
    First Name:
    @Html.TextBoxFor(m => m.FirstName)

    Last Name:
    @Html.TextBoxFor(m => m.LastName)

    
}

JavaScript code:

$('#myForm').submit(function (e) {
    e.preventDefault();
    $.ajax({
        url: $(this).attr('action'),
        type: $(this).attr('method'),
        data: $(this).serialize(),
        success: function (result) {
            // handle success response
        },
        error: function () {
            // handle error response
        }
    });
});