In this article I will explain with an example, how to use
jQuery AJAX and
JSON in ASP.Net Core (.Net Core 5).
The Controller’s Action method will be called using
jQuery AJAX and
JSON from View in ASP.Net Core (.Net Core 5).
Model
The Model class consists of following properties.
public class PersonModel
{
///<summary>
/// Gets or sets Name.
///</summary>
public string Name { get; set; }
///<summary>
/// Gets or sets DateTime.
///</summary>
public string DateTime { get; set; }
}
Controller
The Controller consists of following Action methods.
Action method for handling GET operation
Inside this Action method, simply the View is returned.
Action method for handling jQuery AJAX operation
This Action method handles the call made from the
jQuery AJAX function from the View.
Note: The following Action method handles
AJAX calls and hence the return type is set to
JsonResult.
The value of the name parameter is assigned to the Name property of the PersonModel class object along with the Current DateTime.
Finally, the
PersonModel class object is returned back as
JSON to the
jQuery AJAX function.
public class HomeController : Controller
{
// GET: Home
public IActionResult Index()
{
return View();
}
[HttpPost]
public JsonResult AjaxMethod(string name)
{
PersonModel person = new PersonModel
{
Name = name,
DateTime = DateTime.Now.ToString()
};
return Json(person);
}
}
View
The View consists of following elements:
TextBox – For user input.
Button – For making
AJAX call to the Controller's Action method.
Inside the View, the following script file is inherited.
1. jquery.min.js
The HTML Button has been assigned a
jQuery click event handler.
When the Button is clicked
jQuery AJAX called is made to the Controller’s Action method.
The
jQuery ajax function has following properties and event handlers.
![.Net Core 5: Using jQuery AJAX in ASP.Net Core]()
Properties
1. type – The type of HTTP Request i.e. GET or POST.
2. url – URL of the Controller’s Action method.
3. data – The parameters to be sent to the Controller’s Action method.
Event Handlers
1. success – This event handler is triggered when the
AJAX call is successfully executed.
2. failure – This event handler is triggered when the
AJAX call failed.
3. error – This event handler is triggered when the
AJAX call encounters an error.
Finally, the response from the
AJAX call is received in
JSON format inside the
Success event handler and the result is displayed using
JavaScript Alert Message Box.
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"content="width=device-width" />
<title>Index</title>
</head>
<body>
<input type="text" id="txtName" />
<input type="button" id="btnGet"value="Get Current Time" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btnGet").click(function () {
$.ajax({
type: "POST",
url: "/Home/AjaxMethod",
data: { "name": $("#txtName").val() },
success: function (response) {
alert("Hello: " + response.Name + ".\nCurrent Date and Time: " + response.DateTime);
},
failure: function (response) {
alert(response.responseText);
},
error: function (response) {
alert(response.responseText);
}
});
});
});
</script>
</body>
</html>
Configuring the JSON Serializer setting
The above program will work, but you will see
undefined values in the
JavaScript Alert Message Box (as shown below) when you try to parse the
JSON.
![.Net Core 5: Using jQuery AJAX in ASP.Net Core]()
In order to resolve it, the JSON Serializer settings need to be configured in the Startup.cs file.
Screenshot
![.Net Core 5: Using jQuery AJAX in ASP.Net Core]()
Downloads
