In this article I will explain with an example, how to call Controller with GET call using jQuery AJAX in ASP.Net MVC.
Note: For beginners in ASP.Net MVC, please refer my article ASP.Net MVC 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 GET call made from the jQuery AJAX function from the View.
Note: By default, ASP.Net MVC does not allow JSON GET call and hence it needs to be explicitly allowed using the JsonRequestBehavior.AllowGet behavior.
 
The value of the name parameter is assigned to the Name property of the PersonModel object along with the Current DateTime and finally the PersonModel object is returned back as JSON to the jQuery AJAX function.
public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        return View();
    }
 
    [HttpGet]
    public JsonResult AjaxMethod(string name)
    {
        PersonModel person = new PersonModel
        {
            Name = name,
            DateTime = DateTime.Now.ToString()
        };
        return Json(person, JsonRequestBehavior.AllowGet);
    }
}
 
 

Typical GET call using jQuery AJAX

The following figure describes a jQuery AJAX call in ASP.Net MVC.
Call Controller with GET call using jQuery AJAX in ASP.Net MVC
 
 

View

Next step is to add a View for the Controller and while adding you will need to select the PersonModel class created earlier.
Call Controller with GET call using jQuery AJAX in ASP.Net MVC
 
Inside the View, in the very first line the PersonModel class is declared as Model for the View.
The View consists of an HTML TextBoxextBox 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 TYPE is set to GET and 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.
@model jQuery_AJAX_GET_MVC.Models.PersonModel
 
@{
     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://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btnGet").click(function () {
                $.ajax({
                     type: "GET",
                     url: "/Home/AjaxMethod",
                     data: { name: $("#txtName").val() },
                     contentType: "application/json; charset=utf-8",
                     dataType: "json",
                     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>
 
 

Screenshot

Call Controller with GET call using jQuery AJAX in ASP.Net MVC
 
 

Downloads

Download Code