In this article I will explain with an example, how to submit (post) a Form and send data from View to Controller using jQuery AJAX in ASP.Net Core MVC.
This article will explain how to create Form Fields and then send data from View to Controller using Form Collection and jQuery AJAX in ASP.Net Core MVC.
Controller
The Controller consists of two Action methods.
Action method for handling GET operation
Inside this Action method, simply the View is returned.
Action method for handling AJAX POST operation
This Action method handles the AJAX Form submission and it accepts the value of the Form elements as parameter.
Note: The following Action method handles AJAX calls and hence the return type is set to JsonResult.
The FirstName and LastName values are merged and then returned back to the calling jQuery AJAX function after wrapping it into a JSON object.
public class HomeController : Controller
{
public IActionResult Index()
{
return View();
}
[HttpPost]
public JsonResult Index(string firstName, string lastName)
{
string name = string.Format("Name: {0} {1}", firstName, lastName); ;
return Json(new { Status = "success", Name = name });
}
}
View
The View consists of an HTML Form which has been created using the Razor Tag attributes with the following attributes.
asp-action – Name of the Action. In this case the name is Index.
asp-controller – Name of the Controller. In this case the name is Home.
method – It specifies the Form Method i.e. GET or POST. In this case it will be set to POST.
There are two TextBox fields created for capturing values for First Name and Last Name.
There’s also an HTML Button at the end of the Form which has been assigned with a JavaScript OnClick event handler.
When the Submit Button is clicked, the AjaxFormSubmit JavaScript function is called.
First, the URL of the jQuery AJAX function is set using the value of the Action attribute of the Form.
Then the values of the TextBoxes are fetched and are added to the FormData object.
Note: The name specified in the FormData object and the parameter names in the Controller’s Action method must be same in order to fetch values.
Finally, the received response is displayed using HTML SPAN.
@{
Layout = null;
}
@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width"/>
<title>Index</title>
</head>
<body>
<form id="myForm" method="post" enctype="multipart/form-data" asp-controller="Home" asp-action="Index">
<table>
<tr>
<td>First Name: </td>
<td><input type="text" id="txtFirstName"/></td>
</tr>
<tr>
<td>Last Name: </td>
<td><input type="text" id="txtLastName"/></td>
</tr>
<tr>
<td></td>
<td><input type="button" value="Submit" onclick="AjaxFormSubmit()"/></td>
</tr>
</table>
<hr/>
<span id="lblName"></span>
</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 AjaxFormSubmit() {
//Set the URL.
var url = $("#myForm").attr("action");
//Add the Field values to FormData object.
var formData = new FormData();
formData.append("firstName", $("#txtFirstName").val());
formData.append("lastName", $("#txtLastName").val());
$.ajax({
type: 'POST',
url: url,
data: formData,
processData: false,
contentType: false
}).done(function (response) {
if (response.Status === "success") {
$("#lblName").html(response.Name);
}
});
}
</script>
</body>
</html>
Screenshot
![ASP.Net Core: AJAX Form Submit (Post) Example]()
Downloads
