How to Call Controller using jQuery AJAX in ASP.Net Core MVC

  In this article we will discuss How to Call Controller using jQuery AJAX in ASP.Net Core MVC.

Here we will explain Controller’s Action method will be called using jQuery AJAX function and JSON data will be returned back to the View using JsonResult class in ASP.Net Core MVC.

Before start this article, please visit our previous article Paging example in ASP.Net Core MVC

Configuring the JSON Serializer setting

Add the NewtonsoftJson package into project

Then inside the ConfigureServices method, you will have to add the following code which will instruct the program to use Newtonsoft library for JSON serialization.

Model

Following is a Model class named CustomerModel with two properties i.e. Name and DateTime

Controller

The value of the name parameter is assigned to the Name property of the CustomerModel object along with the Current DateTime and finally the CustomerModel object is returned back as JSON to the jQuery AJAX function.

This Action method handles the call made from the jQuery AJAX function from the View.

View

The View consists of an HTML TextBox element and a Button. The Button has been assigned a jQuery click event handler and when the Button is clicked a jQuery AJAX called is made to the Controller’s action method.

The URL for the jQuery AJAX call is set to the Controller’s action method i.e. /Home/AjaxMethod. The value of the TextBox is passed as parameter and the returned response is displayed using JavaScript Alert Message Box.

Output

</> Find the Source Code in Github

  Summary

In this tutorial we discussed how to return JSON from Controller in ASP.Net Core MVC. If have any question related to this topic then give your feedback.