ASP NetMVC Core Ajax Web API Endpoints

Screenshot from the tutorial

ASP.NET Core MVC: AJAX Web API Endpoints in 3 Minutes

In the realm of modern web applications, utilizing AJAX (Asynchronous JavaScript and XML) to interact with Web API endpoints is an essential skill. This tutorial will walk you through how to set up AJAX calls in an ASP.NET Core MVC application, leveraging the power of Web API endpoints to create a seamless user experience.

What is AJAX?

AJAX is a technique that allows web applications to send and retrieve data asynchronously without interfering with the display and behavior of the existing page. This means you can update parts of a web page without having to reload the entire page, which significantly enhances user experience.

Setting Up Your ASP.NET Core MVC Project

Before diving into AJAX, let's set up a simple ASP.NET Core MVC project that will serve as our foundation.

Step 1: Creating a New Project

1. Open Visual Studio.
2. Select Create a new project.
3. Choose ASP.NET Core Web Application and click Next.
4. Name your project (e.g., AjaxWebApiDemo), choose a location, and click Create.
5. Select the Web Application (Model-View-Controller) template and click Create.

Step 2: Adding a Web API Controller

We will create a Web API controller that handles our AJAX requests.

1. Right-click on the Controllers folder in your project.
2. Select Add > Controller.
3. Choose API Controller - Empty and click Add.
4. Name your controller SampleController.

Here’s a simple implementation for the SampleController:

using Microsoft.AspNetCore.Mvc;

namespace AjaxWebApiDemo.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class SampleController : ControllerBase
    {
        [HttpGet]
        public IActionResult Get()
        {
            var data = new { message = "Hello, World!" };
            return Ok(data);
        }
    }
}

Step 3: Adding AJAX to Your View

Next, we’ll add a view that utilizes AJAX to call our Web API.

1. Open the Views/Home/Index.cshtml file.
2. Add a button and a div to display the data fetched from the API:

@{
    ViewData["Title"] = "Home Page";
}

<h2>AJAX Web API Example</h2>
<button id="fetchData">Fetch Data</button>
<div id="result"></div>

@section Scripts {
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#fetchData').click(function () {
                $.ajax({
                    url: '/api/sample',
                    type: 'GET',
                    dataType: 'json',
                    success: function (data) {
                        $('#result').html(data.message);
                    },
                    error: function (error) {
                        $('#result').html('Error: ' + error.status + ' ' + error.statusText);
                    }
                });
            });
        });
    </script>
}

Step 4: Running Your Application

1. Set your project as the startup project.
2. Run the application (F5 or Ctrl + F5).
3. Navigate to the home page and click the Fetch Data button. You should see the message "Hello, World!" displayed in the result div.

Conclusion

Congratulations! You’ve successfully created a simple ASP.NET Core MVC application that interacts with a Web API using AJAX. This setup allows for dynamic content updates without requiring a full page reload, significantly enhancing user experience.

Key Takeaways

• AJAX enables asynchronous data fetching, allowing for smoother user interactions.
• ASP.NET Core MVC can easily integrate Web API endpoints for AJAX calls.
• Implementing AJAX involves setting up JavaScript (or jQuery) to make requests to your API.

Feel free to experiment further by expanding the API functionality or enhancing the front-end display. Happy coding!

Another view from the tutorial

---

Connect with SkillBakery Studios

Explore more tutorials, tools, and resources:

• skillbakery.com
• Facebook
• X (Twitter)
• YouTube Channel

Posted by SkillBakery Studios