Making AJAX Calls to Page Handler Methods in ASP.NET Core 3.1

ASP.NET Core is a powerful framework for building web applications, and it includes many features that make it easy to create dynamic, responsive web pages. One of these features is the ability to make AJAX calls to page handler methods. In this article, we will explore what AJAX calls are, how they work in ASP.NET Core, and how to use them to create more dynamic web pages.

What are AJAX Calls?

AJAX stands for Asynchronous JavaScript and XML. It is a technique for creating dynamic web pages that can update themselves without requiring the user to refresh the entire page. With AJAX, you can send requests to the server in the background, and update only a portion of the page based on the response. This allows you to create web pages that feel more responsive and interactive, and can provide a better user experience.

Making AJAX Calls in ASP.NET Core

In ASP.NET Core, you can make AJAX calls to page handler methods. These are methods that are decorated with the [HttpGet] or [HttpPost] attributes, and are used to handle HTTP requests. To make an AJAX call to a page handler method, you can use the fetch API, which is a built-in JavaScript function that allows you to make HTTP requests. Here is an example of how to use the fetch API to make an AJAX call to a page handler method:

fetch('/my-page-handler-method')
  .then(response => response.json())
  .then(data => {
    // Update the page based on the data
  });

In this example, the fetch function is used to send a GET request to the URL '/my-page-handler-method'. The URL should point to the page handler method that you want to call. The then function is used to handle the response from the server. In this example, the response is expected to be in JSON format, so the json method is used to parse the response. Once the response has been parsed, the data can be used to update the page.

Creating Page Handler Methods in ASP.NET Core

To create a page handler method in ASP.NET Core, you need to define a method in your controller that is decorated with the [HttpGet] or [HttpPost] attribute. Here is an example of a simple page handler method:

[HttpGet]
public IActionResult GetData()
{
  var data = new { name = "John Doe", age = 30 };
  return Json(data);
}

In this example, the GetData method is decorated with the [HttpGet] attribute, which means that it will handle GET requests. The method returns an object in JSON format, which can be used to update the page. To make this method accessible from the client-side, you need to use the Route attribute to specify the URL that the method should be available at. Here is an example:

[HttpGet("data")]
public IActionResult GetData()
{
  var data = new { name = "John Doe", age = 30 };
  return Json(data);
}

In this example, the Route attribute is used to specify that the method should be available at the URL '/data'. This means that the client-side can make a request to '/data' to call this method.

Using AJAX Calls to Create Dynamic Web Pages

Now that we have explored what AJAX calls are and how to make them in ASP.NET Core, let's take a look at how to use them to create dynamic web pages. One common use of AJAX calls is to load data from the server without requiring the user to refresh the entire page. Here is an example of how to use AJAX calls to load data from the server:

// Load data from the server when the page loads
document.addEventListener('DOMContentLoaded', () => {
  fetch('/data')
    .then(response => response.json())
    .then(data => {
      // Update the page with the data
      document.getElementById('name').innerHTML = data.name;
      document.getElementById('age').innerHTML = data.age;
    });
});

In this example, the fetch function is used to send a GET request to the URL '/data' when the page loads. The DOMContentLoaded event is used to ensure that the page is fully loaded before the request is sent. Once the response has been received, the data is used to update the page. In this example, the name and age elements are updated with the data from the server.

In this article, we have explored what AJAX calls are and how to use them in ASP.NET Core. We have seen how to create page handler methods, how to use the fetch API to make AJAX calls to these methods, and how to use AJAX calls to create dynamic web pages. With the power of AJAX and the ease of use of ASP.NET Core, you can create web pages that are dynamic, responsive, and provide a better user experience. Happy coding!

References