Introduction
This article demonstrates how to send form data from the asp.net web application using the Ajax post method without the form serialization. In the previous part we learned to send the data using the JSON Form serialization here we will learn without the form serialization.
Prerequisites
- Visual Studio 2019 or later version
We have already created the project in the previous part so we will use the same project, same view Model, and same form layout; however only send the data to the controller without the form serialization. So if you are new to this article you can refer to the previous article for detail and can follow up to step 6 to create the project.
This article is an extension of the previous part, hence here we will use the previous solution and start directly by adding the Action Method in the Home controller.
Step 1 – Add Action Method in Home Controller
Add Action Method named as CreateStudent1 in Home Controller which we will use to create a view for Student Form submission without form serialization.
Below is the code for CreateStudent1 Action Method
public IActionResult CreateStudent1()
{
return View();
}
Step 2 – Add View
Right-click on the CreateStudent1 IActionResult method and add View for it as depicted below.
Select the Razor page and click on add.
CreateStudent1.cshtml code
<h4>Add Student Deatils using Ajax Post without Form Serialization</h4>
<hr />
<div class="row">
<div class="col-md-4">
<form id="studenteForm" novalidate class="needs-validation">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="Name" class="control-label"></label>
<input asp-for="Name" class="form-control" id="name" required />
<span asp-validation-for="Name" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Email" class="control-label"></label>
<input asp-for="Email" type="email" class="form-control" id="email" />
<span asp-validation-for="Email" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Phone" class="control-label"></label>
<input asp-for="Phone" class="form-control" id="phone" />
<span asp-validation-for="Phone" class="text-danger"></span>
</div>
<div class="form-group">
<button type="button" class="btn btn-primary" onclick="submitStudent()">Add </button>
</div>
</form>
</div>
</div>
@section Scripts {
@{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}
Then, we will use the below javascript on the form submission button click event using Ajax in CreateStudent.cshtml page. Here we will not use a form serializer. In the previous part, we have used a form serializer.
<script type="text/javascript">
function submitStudent() {
//below we are binding the input data (json format) in a variable inorder to post it.
var data = {
Name: $("#name").val(),
Email: $("#email").val(),
Phone: $("#phone").val()
}
console.log(data);
$.ajax({
type: 'POST',
url: '/Home/AddStudent',
contentType: 'application/json; charset=utf-8',
data: JSON.stringify(data),
success: function (result) {
alert('Successfully received Data ');
console.log(result);
},
error: function () {
alert('Failed to receive the Data');
console.log('Failed ');
}
})
}
</script>
Below Complete CreateStudent.cshtml code:
@model Sample.ASPDotNETCore.Models.StudentModel
@{
ViewData["Title"] = "CreateStudent1";
}
<script type="text/javascript">
function submitStudent() {
var data = {
Name: $("#name").val(),
Email: $("#email").val(),
Phone: $("#phone").val()
}
console.log(data);
$.ajax({
type: 'POST',
url: '/Home/AddStudent',
contentType: 'application/json; charset=utf-8',
data: JSON.stringify(data),
success: function (result) {
alert('Successfully received Data ');
console.log(result);
},
error: function () {
alert('Failed to receive the Data');
console.log('Failed ');
}
})
}
</script>
<h4>Add Student Deatils using Ajax Post without Form Serialization</h4>
<hr />
<div class="row">
<div class="col-md-4">
<form id="studenteForm" novalidate class="needs-validation">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="Name" class="control-label"></label>
<input asp-for="Name" class="form-control" id="name" required />
<span asp-validation-for="Name" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Email" class="control-label"></label>
<input asp-for="Email" type="email" class="form-control" id="email" />
<span asp-validation-for="Email" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Phone" class="control-label"></label>
<input asp-for="Phone" class="form-control" id="phone" />
<span asp-validation-for="Phone" class="text-danger"></span>
</div>
<div class="form-group">
<button type="button" class="btn btn-primary" onclick="submitStudent()">Add </button>
</div>
</form>
</div>
</div>
@section Scripts {
@{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}
Step 3 – Add post method in Home Controller for Submit button click Event
Then we will write the Post method in HomeController for the Form Submit event. Below is the code of the HTTP post method in HomeController with Model validation.
[HttpPost]
public async Task<IActionResult> AddStudent([FromBody] StudentModel student)
{
if (!ModelState.IsValid)
return BadRequest("Enter required fields");
//Insert code;
return this.Ok($"Form Data received!");
}
Add a link to the CreateStudent page in _Layout.cshtml as shown below.
Now, it’s time to build and run the project. Fill in the Student Form data and test it.
Below is the home page design:
Create Student page for data submission.
When the user clicks on Submit button, data will be sent to the controller like below.
Hence, we have submitted the form data to the controller from the Student Details form.
To recapitulate, in this article we have learned to submit the data using Ajax in the ASP.NET Core application. This is how we can send the form data using these different methods that we have learned in this article series.
You can refer to previous part to see the same form data submission using the Ajax post method.