In this article I will explain with an example, how to use jQuery AJAX and JSON in ASP.Net Core (.Net Core 3).
The Controller’s Action method will be called using jQuery AJAX and JSON from View in ASP.Net Core (.Net Core 3).
Note: For beginners in ASP.Net Core (.Net Core 3), please refer my article ASP.Net Core 3: Hello World Tutorial with Sample Program example.
 
 

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 3: 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 3: 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.
Note: For more details on how to configure JSON Serializer setting in ASP.Net Core (.Net Core 3), please refer my article ASP.Net Core 3.0: Changing the default Camel Case JSON Output.
 
 

Screenshot

.Net Core 3: Using jQuery AJAX in ASP.Net Core
 
 

Downloads

Download Code


Other available versions