In this article I will explain with an example, how to submit (post) Form using
ActionLink in
ASP.Net MVC 5 Razor.
@Html.ActionLink is rendered as an
HTML Anchor Tag (HyperLink) and hence it produces a GET request to the Controller’s Action method which cannot be used to submit (post) Form in
ASP.Net MVC 5 Razor.
Hence in order to submit (post) Form using
@Html.ActionLink, a
jQuery Click event handler is assigned and when the
@Html.ActionLink is clicked, Form is submitted (posted) using
JavaScript Submit function.
Model
The Model class consists of following properties.
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.
Action method for handling POST operation
This Action method accept an object of the PersonModel class as parameter. The values posted from the Form inside the View are received through this parameter.
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
[HttpPost]
public ActionResult Index(PersonModel person)
{
int personId = person.PersonId;
string name = person.Name;
string gender = person.Gender;
string city = person.City;
return View();
}
}
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. In this case the name is Index.
ControllerName – Name of the Controller. In this case the name is Home.
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 ActionLink at the end of the Form generated using
@Html.ActionLink method and when the
ActionLink is clicked, the Form is submitted using
jQuery.
@model ActionLink_Send_Model_MVC.Models.PersonModel
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
@using (Html.BeginForm("Index", "Home", 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>@Html.ActionLink("Submit", "", null, new { @id = "submit" })</td>
</tr>
</table>
}
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#submit").click(function () {
document.forms[0].submit();
return false;
});
});
</script>
</body>
</html>
Screenshots
The Form
Values captured in Controller when Form is submitted
Downloads