In this article I will explain with an example, how to submit (post) a Form and send data to Web API in ASP.Net MVC Razor.
This article will explain how to create Form Fields using Model class and then send data from View to Web API Controller using Model class object in ASP.Net MVC Razor.
Note: For beginners in ASP.Net MVC and Web API, please refer my article: What is Web API, why to use it and how to use it in ASP.Net MVC for details about using and configuring Web API.
 
 
Model
Following is a Model class named PersonModel with four properties i.e. PersonId, Name, Gender and City.
public class PersonModel
{
    ///<summary>
    /// Gets or sets PersonId.
    ///</summary>
    public int PersonId { get; set; }
 
    ///<summary>
    /// Gets or sets Name.
    ///</summary>
    public string Name { get; set; }
 
    ///<summary>
    /// Gets or sets Gender.
    ///</summary>
    public string Gender { get; set; }
 
    ///<summary>
    /// Gets or sets City.
    ///</summary>
    public string City { get; set; }
}
 
 
Controller
The Controller consists of the following Action method.
Action method for handling GET operation
Inside this Action method, simply the View is returned.
public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        return View();
    }
}
 
 
Web API Controller
The Web API Controller consists of the following Action method. Inside this Action method, the object of the PersonModel class is received as parameter.
The values posted from the Form inside the View are received through this parameter.
public class PostAPIController : ApiController
{
    [HttpPost]
    [Route("api/PostAPI/SavePerson")]
    public HttpResponseMessage SavePerson(PersonModel person)
    {
        int personId = person.PersonId;
        string name = person.Name;
        string gender = person.Gender;
        string city = person.City;
 
        return Request.CreateResponse(HttpStatusCode.OK);
    }
}
 
 
View
Inside the View, in the very first line the PersonModel class is declared as Model for the 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. Since Web API is being called, it is left Blank.
ControllerName – Name of the Controller. In this case, URL of the Web API Controller’s Action method.
FormMethod – It specifies the Form Method i.e. GET or POST. In this case, it will be set to POST.
There are three TextBox fields created for capturing values for PersonId, Name and City using the Html.TextBoxFor method. While for capturing the Gender value, a DropDownList with three options is created using the Html.DropDownListFor function.
There’s also a Submit Button at the end of the Form and when the Button is clicked, the Form is submitted and the data is posted to the Web API.
@model Form_Post_WebAPI_MVC.Models.PersonModel
 
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width"/>
    <title>Index</title>
</head>
<body>
    @using (Html.BeginForm("", "api/PostAPI/SavePerson", FormMethod.Post))
    {
        <table cellpadding="0" cellspacing="0">
            <tr>
                <th colspan="2" align="center">Person Details</th>
            </tr>
            <tr>
                <td>PersonId: </td>
                <td>
                    @Html.TextBoxFor(m => m.PersonId)
                </td>
            </tr>
            <tr>
                <td>Name: </td>
                <td>
                    @Html.TextBoxFor(m => m.Name)
                </td>
            </tr>
            <tr>
                <td>Gender: </td>
                <td>
                    @Html.DropDownListFor(m => m.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.TextBoxFor(m => m.City)
                </td>
            </tr>
            <tr>
                <td></td>
                <td><input type="submit" value="Submit"/></td>
            </tr>
        </table>
    }
</body>
</html>
 
 
Screenshots
The Form
Submit (Post) Form to Web API in ASP.Net MVC
 
Values captured in Web API Controller when Form is submitted
Submit (Post) Form to Web API in ASP.Net MVC
 
 
Downloads
Download Code