ASP NetMVC Core Ajax Web API Expose

Screenshot from the tutorial

ASP.NET MVC Core Ajax Web API: A Quick Guide

In the world of web development, ASP.NET Core has emerged as a powerful framework for building dynamic and interactive web applications. With its ability to seamlessly integrate Ajax and Web API functionality, developers can create responsive applications that communicate with the server without requiring a full page reload. In this post, we will explore how to expose a Web API using ASP.NET MVC Core in a straightforward manner, taking inspiration from the YouTube video "ASP NetMVC Core Ajax Web API Expose."

What is ASP.NET Core?

ASP.NET Core is an open-source, cross-platform framework designed for building modern, cloud-based web applications. It offers a modular architecture, making it lightweight and flexible. One of its key features is the ability to build RESTful APIs, allowing applications to communicate with clients over HTTP.

Understanding Ajax and Web API

Ajax (Asynchronous JavaScript and XML) is a technique used to create asynchronous web applications. It allows web pages to send and retrieve data from a server in the background without interfering with the display and behavior of the existing page.

Web API is a framework that makes it easy to build HTTP services that can be consumed by various clients, including browsers, mobile applications, and desktop applications. ASP.NET Core Web API is a powerful way to expose data and services to clients.

Setting Up Your ASP.NET Core Project

Before diving into the implementation of Ajax with Web API, let’s start by setting up a new ASP.NET Core project.

Step 1: Create a New Project

1. Open Visual Studio and select "Create a new project."
2. Choose "ASP.NET Core Web Application."
3. Name your project and choose a location.
4. Select ".NET Core" and "ASP.NET Core 5.0" (or later), then choose "Web Application (Model-View-Controller)."

Step 2: Install Required Packages

You may need to install the following NuGet packages to work with Ajax and Web API:

Install-Package Microsoft.AspNetCore.Mvc.NewtonsoftJson
Install-Package Microsoft.AspNetCore.Cors

Building the Web API

Step 1: Create a Model

Create a model class that represents the data you will be working with. For instance, if you're building a simple API for managing products, create a Product model:

public class Product
{
    public int Id { get; set; }
    public string Name { get; set; }
    public decimal Price { get; set; }
}

Step 2: Create a Controller

Next, create a controller that will handle HTTP requests to your API. Right-click on the "Controllers" folder and select "Add" > "Controller." Choose "API Controller - Empty" and name it ProductsController.

Here is a sample implementation:

using Microsoft.AspNetCore.Mvc;
using System.Collections.Generic;
using System.Linq;

[Route("api/[controller]")]
[ApiController]
public class ProductsController : ControllerBase
{
    private static List<Product> products = new List<Product>
    {
        new Product { Id = 1, Name = "Product 1", Price = 10.00m },
        new Product { Id = 2, Name = "Product 2", Price = 20.00m }
    };

    [HttpGet]
    public ActionResult<IEnumerable<Product>> GetProducts()
    {
        return Ok(products);
    }
}

Step 3: Enable CORS

To allow your web application to communicate with your API, you need to enable CORS (Cross-Origin Resource Sharing). In Startup.cs, add the following lines in the ConfigureServices method:

public void ConfigureServices(IServiceCollection services)
{
    services.AddControllers().AddNewtonsoftJson();
    services.AddCors(options =>
    {
        options.AddPolicy("AllowAllOrigins",
            builder => builder.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader());
    });
}

In the Configure method, make sure to include the CORS middleware:

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    app.UseRouting();
    app.UseCors("AllowAllOrigins");
    app.UseAuthorization();
    app.UseEndpoints(endpoints => { endpoints.MapControllers(); });
}

Making Ajax Calls

Now that you have your Web API set up, let’s see how to make an Ajax call to retrieve data from it.

Step 1: Add jQuery

Make sure to include jQuery in your project. You can add it through a CDN in your Layout.cshtml file:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Step 2: Implement the Ajax Call

Next, in your view (e.g., Index.cshtml), you can implement an Ajax call to fetch the products:

<script>
$(document).ready(function() {
    $.ajax({
        url: '/api/products',
        type: 'GET',
        success: function(data) {
            var productList = $('#productList');
            productList.empty();
            $.each(data, function(index, product) {
                productList.append('<li>' + product.Name + ' - $' + product.Price + '</li>');
            });
        },
        error: function(xhr, status, error) {
            console.error(error);
        }
    });
});
</script>

<ul id="productList"></ul>

Conclusion

In this tutorial, we have walked through the process of creating a simple ASP.NET Core Web API and making an Ajax call to retrieve data. By following these steps, you can build dynamic, responsive web applications that leverage the power of ASP.NET Core's capabilities.

For more in-depth learning, you can explore additional features such as authentication, advanced routing, and integrating with front-end frameworks. With these skills, you will be well-equipped to create modern web applications that users love. 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