Sessions 21, 22, and 23: In-Depth Explanation

Lecture Topics:

• Web APIs
  • Creating ASP.NET MVC Web API
  • Configuring for CORS
  • Different Verbs (GET, POST, PUT, DELETE)
  • Consuming using a client
  • Using Newtonsoft APIs
  • Integrating Web API with React App
  • Configuring CORS for React App and Web API
  • Sending requests from React App, processing at Web API, and effecting the database

Lab (4 hours):

• Create a RESTful service using Web API
• Create a consumer

Lecture: Detailed Explanation

1. Creating ASP.NET MVC Web API

ASP.NET Core Web API is a framework for building RESTful services that handle HTTP requests and return JSON/XML data.

• Definition:

  • Web APIs are created using controllers inheriting from ControllerBase (instead of Controller used in MVC for views).

  • Example:

    // Controllers/EmployeesController.cs
    using Microsoft.AspNetCore.Mvc;
    using EmployeeApp.Data;
    using EmployeeApp.Models;
    using Microsoft.EntityFrameworkCore;
    
    namespace EmployeeApp.Controllers
    {
        [Route("api/[controller]")]
        [ApiController]
        public class EmployeesController : ControllerBase
        {
            private readonly EmployeeContext _context;
            public EmployeesController(EmployeeContext context) => _context = context;
    
            [HttpGet]
            public async Task<ActionResult<IEnumerable<Employee>>> GetEmployees()
            {
                return await _context.Employees.ToListAsync();
            }
        }
    }
    
    

• Key Points:

  • Use [ApiController] for automatic model validation and problem details.
  • Routes are defined with [Route("api/[controller]")].
  • Returns ActionResult<T> for flexible HTTP responses (e.g., Ok, NotFound).

• Why This Matters:

  • Web APIs provide backend services for modern web and mobile apps.

2. Configuring for CORS

Cross-Origin Resource Sharing (CORS) allows a client (e.g., React app) to access the API from a different domain.

• Definition:

  • CORS is configured in Program.cs to specify allowed origins, methods, and headers.

  • Example:

    var builder = WebApplication.CreateBuilder(args);
    builder.Services.AddCors(options =>
    {
        options.AddPolicy("AllowReactApp", builder =>
        {
            builder.WithOrigins("<http://localhost:3000>") // React app URL
                   .AllowAnyMethod()
                   .AllowAnyHeader();
        });
    });
    builder.Services.AddControllers();
    builder.Services.AddDbContext<EmployeeContext>(options =>
        options.UseSqlServer(builder.Configuration.GetConnectionString("DefaultConnection")));
    var app = builder.Build();
    app.UseCors("AllowReactApp");
    app.UseRouting();
    app.MapControllers();
    app.Run();
    
    

• Key Points:

  • Place UseCors before UseRouting in middleware pipeline.
  • Specify exact origins in production for security.

• Why This Matters:

  • CORS enables secure cross-domain communication, critical for SPA integration.

3. Different Verbs