Asp.Net Mvc Calling Apis Using Ajax Complete Guide

Step 1: Create an ASP.NET MVC Project

1. Open Visual Studio.
2. Go to File > New > Project.
3. Select ASP.NET Web Application (.NET Framework).
4. Enter your project name and click Create.
5. Choose MVC template and make sure the authentication type is either No Authentication or anything as per your requirement, then click Create.

Step 2: Add an API Controller

We’ll start by adding a simple API controller that returns data in JSON format.

1. Right-click on Controllers folder in Solution Explorer.
2. Go to Add > Controller.
3. Select Web API 2 Controller - Empty and click Add.
4. Name your controller ProductController and click Add.

Implement the basic Get operation:

using System.Collections.Generic;
using System.Linq;
using System.Web.Http;
using System.Web.Mvc;

namespace YourProjectName.Controllers.Api
{
    public class ProductController : ApiController
    {
        // Mock database
        private IEnumerable<Product> products = new List<Product>
        {
            new Product { Id = 1, Name = "Laptop", Price = 899.99 },
            new Product { Id = 2, Name = "Smartphone", Price = 499.99 },
            new Product { Id = 3, Name = "Tablet", Price = 299.99 }
        };

        [HttpGet]
        public IHttpActionResult GetProducts()
        {
            return Ok(products);
        }

        [HttpGet]
        public IHttpActionResult GetProduct(int id)
        {
            var product = products.FirstOrDefault(p => p.Id == id);
            if (product == null)
                return NotFound();

            return Ok(product);
        }
    }
}

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

Step 3: Create the View

Next, we will create a view where we will display the list of products from the API using AJAX.

1. Right-click on the Views/Home folder.
2. Select Add > View.
3. Name it Index and click Add.

In the Index.cshtml, add the following code:

@{
    ViewBag.Title = "Products";
}

<h2>Products</h2>

<button id="loadProductsBtn">Load Products</button>

<div id="productsContainer">
    <ul id="productsList"></ul>
</div>

@section scripts {
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#loadProductsBtn').click(function () {
                $.ajax({
                    url: '@Url.Action("GetProducts", "Product", new { httproute = "" })',
                    type: 'GET',
                    dataType: 'json',
                    success: function (data) {
                        var productList = $('#productsList');
                        productList.empty(); // Clear previous list items
                        $.each(data, function (index, product) {
                            productList.append('<li>' + product.Name + ' - $' + product.Price.toFixed(2) + '</li>');
                        });
                    },
                    error: function (xhr, status, error) {
                        alert('Error loading products: ' + error);
                    }
                });
            });
        });
    </script>
}

Step 4: Configure Routes

Ensure you have the proper routes defined for both the MVC and Web API controllers.

1. Open App_Start/WebApiConfig.cs.
2. Ensure you have the default route defined:

public static void Register(HttpConfiguration config)
{
    config.MapHttpAttributeRoutes();

    config.Routes.MapHttpRoute(
        name: "DefaultApi",
        routeTemplate: "api/{controller}/{id}",
        defaults: new { id = RouteParameter.Optional }
    );
}

3. Open App_Start/RouteConfig.cs and ensure the MVC route is also defined correctly:

public static void RegisterRoutes(RouteCollection routes)
{
    routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

    routes.MapRoute(
        name: "Default",
        url: "{controller}/{action}/{id}",
        defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional },
        namespaces: new[] { "YourProjectName.Controllers" } // Adjust the namespace
    );
}

Step 5: Run the Application

Run the application by pressing F5 or clicking the Start button in Visual Studio.

• Navigate to Home/Index in your browser.
• Click on the "Load Products" button.
• You should see the list of products dynamically loaded into the #productsList unordered list via AJAX.

Step 6: Explanation of the AJAX Call

Here’s a breakdown of the AJAX call in the Index.cshtml:

$(document).ready(function () {
    $('#loadProductsBtn').click(function () {
        $.ajax({
            url: '@Url.Action("GetProducts", "Product", new { httproute = "" })', // Endpoint of the API
            type: 'GET', // HTTP method
            dataType: 'json', // Expected data type
            success: function (data) { // Success callback
                var productList = $('#productsList');
                productList.empty();
                $.each(data, function (index, product) {
                    productList.append('<li>' + product.Name + ' - $' + product.Price.toFixed(2) + '</li>');
                });
            },
            error: function (xhr, status, error) { // Error callback
                alert('Error loading products: ' + error);
            }
        });
    });
});

• url: Specifies the endpoint to which the request is sent. We use Url.Action to generate the URL to the GetProducts action in the Product API controller.
• type: Defines the HTTP method used for the request. In this case, it's a GET request.
• dataType: The type of data expected back from the server. Here we expect JSON.
• success: A function to be called if the request succeeds. We populate the #productsList with the retrieved data.
• error: A function to be called if the request fails. Shows an error alert.

Step 7: Advanced Example - POST Operation

Let's add a feature to add a new product to the list using AJAX with a POST request to the API.

Modify the API Controller:

Add a PostProduct method in the ProductController:

[HttpPost]
public IHttpActionResult PostProduct(Product product)
{
    if (!ModelState.IsValid)
        return BadRequest(ModelState);

    // Add product to mock database and assign ID
    ((List<Product>)products).Add(new Product 
    { 
        Id = products.Max(p => p.Id) + 1,
        Name = product.Name,
        Price = product.Price 
    });

    return CreatedAtRoute("DefaultApi", new { id = product.Id }, product);
}

Add Form to the View:

In the Index.cshtml file, add a form to collect the product details:

<div id="addProductContainer">
    <h3>Add a New Product</h3>
    <form id="addProductForm">
        <label for="productName">Name:</label>
        <input type="text" id="productName" name="Name" required />
        <br />
        <label for="productPrice">Price:</label>
        <input type="number" id="productPrice" name="Price" required step="0.01" />
        <br />
        <button type="submit">Add Product</button>
    </form>
</div>

@section scripts {
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#loadProductsBtn').click(function () {
                $.ajax({
                    url: '/api/Product',
                    type: 'GET',
                    dataType: 'json',
                    success: function (data) {
                        var productList = $('#productsList');
                        productList.empty();
                        $.each(data, function (index, product) {
                            productList.append('<li>' + product.Name + ' - $' + product.Price.toFixed(2) + '</li>');
                        });
                    },
                    error: function (xhr, status, error) {
                        alert('Error loading products: ' + error);
                    }
                });
            });

            $('#addProductForm').submit(function (e) {
                e.preventDefault(); // Prevent form from submitting normally

                var product = {
                    Name: $('#productName').val(),
                    Price: parseFloat($('#productPrice').val())
                };

                $.ajax({
                    url: '/api/Product',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify(product),
                    success: function (newProduct) {
                        alert('Product added successfully!');
                        $('#productsList').append('<li>' + newProduct.Name + ' - $' + newProduct.Price.toFixed(2) + '</li>');
                        $('#addProductForm')[0].reset(); // Clear form fields
                    },
                    error: function (xhr, status, error) {
                        alert('Error adding product: ' + error);
                    }
                });
            });
        });
    </script>
}

Explanation:

In the form submit handler:

• e.preventDefault(): Stops the default form submission behavior.
• product: Creates JavaScript object from the form inputs.
• $.ajax: Sends the POST request.
  • contentType: Specifies the MIME type of the request body. In this case, it's application/json.
  • data: Converts the product object to JSON string before sending.
  • success: Called if the request is successful. It appends the new product to the list.
  • error: Displays an error message if something goes wrong.

Conclusion

You now have a basic understanding of how to call APIs using AJAX in an ASP.NET MVC application. This example covers both GET and POST HTTP methods and demonstrates dynamic content loading without needing to reload the page.