Asp.Net Mvc Introduction To Web Api Complete Guide

Step 1: Create a New ASP.NET Project

1. Open Visual Studio.

2. Create a new project:

   • Go to File > New > Project.
   • Select Web category from the left side.
   • Choose ASP.NET Web Application (.NET Framework) and click Next.

3. Configure your project:

   • Name your project (e.g., MvcWebApiDemo) and choose a location.
   • Click Create.

4. Select a template:

   • In the New ASP.NET Web Application dialog, select MVC.
   • Check the box for Web API to include it in the project.

   

5. Create the project:

   • Click Create to generate the solution.

Step 2: Explore the Generated Project Structure

Your project structure should look something like this:

MvcWebApiDemo/
├── Controllers/
│   ├── HomeController.cs
│   └── ValuesController.cs
├── Models/
├── Views/
│   ├── Home/
│   │   ├── Index.cshtml
│   ├── Shared/
│   │   ├── _Layout.cshtml
│   └── Web.config
├── Areas/
├── App_Start/
│   ├── FilterConfig.cs
│   ├── RouteConfig.cs
│   ├── WebApiConfig.cs
│   └── BundleConfig.cs
├── Content/
├── Scripts/
└── Web.config

• Controllers: Contains both MVC and Web API controllers.
  • HomeController: MVC controller for web pages.
  • ValuesController: Web API controller for handling HTTP requests (GET, POST, PUT, DELETE).
• Models: Where you define your data models.
• Views: Contains HTML and Razor views for MVC part of the project.
• App_Start: Contains configuration files like routing and bundles configuration for MVC and Web API.
• Content: Location for static files such as CSS.
• Scripts: Location for JavaScript files.
• Web.config: Configuration file at the root of your project.

Step 3: Define a Model

Let's create a simple model for demonstration purposes.

1. Add a new class in the Models folder:

   • Right-click on Models.
   • Select Add > Class.
   • Name the class Product.

2. Define the properties of the Product class in Product.cs:

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

Step 4: Create a Web API Controller

We've already got a default ValuesController. Let's modify and add functionality to this controller for our Product model.

1. Rename ValuesController to ProductsController:

   • Right-click on ValuesController.cs in the Controllers folder.
   • Select Rename.
   • Name the file ProductsController.cs.

2. Modify ProductsController:

Replace the content of ProductsController.cs with the following code:

using System.Collections.Generic;
using System.Web.Http;
using MvcWebApiDemo.Models;

namespace MvcWebApiDemo.Controllers
{
    public class ProductsController : ApiController
    {
        private static List<Product> products = new List<Product>
        {
            new Product { Id = 1, Name = "Laptop", Price = 800.00m },
            new Product { Id = 2, Name = "Smartphone", Price = 300.00m }
        };

        // GET: api/Products
        [HttpGet]
        public IEnumerable<Product> Get()
        {
            return products;
        }

        // GET: api/Products/5
        [HttpGet]
        public IHttpActionResult Get(int id)
        {
            var product = products.Find(p => p.Id == id);
            if (product == null)
            {
                return NotFound();
            }
            return Ok(product);
        }

        // POST: api/Products
        [HttpPost]
        public IHttpActionResult Post(Product product)
        {
            if (product == null)
            {
                return BadRequest("Product cannot be null");
            }

            product.Id = products.Count + 1;
            products.Add(product);
            return CreatedAtRoute("DefaultApi", new { id = product.Id }, product);
        }

        // PUT: api/Products/5
        [HttpPut]
        public IHttpActionResult Put(int id, Product product)
        {
            if (id <= 0 || product == null || id != product.Id)
            {
                return BadRequest();
            }

            var index = products.FindIndex(p => p.Id == id);
            if (index < 0)
            {
                return NotFound();
            }

            products[index] = product;
            return Ok(product);
        }

        // DELETE: api/Products/5
        [HttpDelete]
        public IHttpActionResult Delete(int id)
        {
            var product = products.Find(p => p.Id == id);
            if (product == null)
            {
                return NotFound();
            }

            products.Remove(product);
            return Ok();
        }
    }
}

This controller provides CRUD operations (Create, Read, Update, Delete) for products.

Step 5: Configure Web API Routing

The routing configuration for the Web API is already set up in App_Start/WebApiConfig.cs. Ensure it looks like this:

using System.Web.Http;

namespace MvcWebApiDemo
{
    public static class WebApiConfig
    {
        public static void Register(HttpConfiguration config)
        {
            // Web API configuration and services

            // Web API routes
            config.MapHttpAttributeRoutes();

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

Step 6: Testing the Web API

We'll need to use a tool like Postman or simply the browser to test our API operations.

Get All Products

• Use the browser or Postman.
• Call GET http://localhost:<port>/api/products.
• You should see a list of products in JSON format.

Get Specific Product

• Use Postman or a browser.
• Call GET http://localhost:<port>/api/products/1.
• It will return details of the product with id 1.

Post a New Product

• Use Postman.
• Set HTTP method to POST.
• Set URL to http://localhost:<port>/api/products.
• Choose raw body and format JSON:

{
    "name": "Tablet",
    "price": 250.00
}

• Send the request.
• The server should respond with the created product, including automatically generated id.

Put to Update a Product

• Use Postman.
• Set HTTP method to PUT.
• Set URL to http://localhost:<port>/api/products/1.
• Choose raw body and format JSON:

{
    "id": 1,
    "name": "Laptop Pro",
    "price": 1200.00
}

• Send the request.
• The product details with id 1 should be updated.

Delete a Product

• Use Postman.
• Set HTTP method to DELETE.
• Set URL to http://localhost:<port>/api/products/2.
• Send the request.
• The product with id 2 should be deleted.

Step 7: Add MVC Views to Display Products

Now let's add some MVC views to display the products fetched via the Web API.

1. Add a new view for Products:

   • Right-click on the Views/Home folder.
   • Select Add > View.
   • Name the view Products.
   • Click Add.

2. Fetch products using jQuery:

   • Replace the content of Products.cshtml with the following:

@{
    ViewBag.Title = "Products";
}

<h2>Products</h2>

<table id="products-table" class="table">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Price</th>
        </tr>
    </thead>
    <tbody>
        <!-- Data will populate here via jQuery -->
    </tbody>
</table>

@section scripts
{
    <script>
        $(document).ready(function ()
        {
            $.ajax({
                url: 'api/products',
                type: 'GET',
                contentType: 'application/json',
                success: function (data)
                {
                    data.forEach(function (item)
                    {
                        $('#products-table tbody').append('<tr><td>' + item.Id + '</td><td>' + item.Name + '</td><td>' + item.Price.toFixed(2) + '</td></tr>');
                    });
                },
                error: function (xhr)
                {
                    alert('Error fetching products');
                }
            });
        });
    </script>
}

Here we are using jQuery's ajax function to fetch products from our Web API and then populating the table with their data.

Step 8: Test the MVC View

1. Run the application.

2. Navigate to Products page:

   • Modify HomeController to point to Products view by default:

   public class HomeController : Controller
   {
       public ActionResult Index()
       {
           return RedirectToAction("Products");
       }
   
       public ActionResult Products()
       {
           return View();
       }
   }
   

3. Open the browser.

4. Access Products page.

5. Check the table to see if it's populated with the data from your Web API.

Conclusion

You have now successfully created an ASP.NET MVC application with a Web API that supports basic CRUD operations. You also added an MVC view to consume and display data from the Web API.