Migrate from ASP.NET MVC 5 to ASP.NET Core 7 Web API

AspNetCore.WebApi.csproj

@@ -0,0 +1,30 @@
+<Project Sdk="Microsoft.NET.Sdk.Web">
+
+  <PropertyGroup>
+    <TargetFramework>net8.0</TargetFramework>
+    <Nullable>enable</Nullable>
+    <ImplicitUsings>enable</ImplicitUsings>
+    <RootNamespace>asp_net_angularjs</RootNamespace>
+    <AssemblyName>asp-net-angularjs-core</AssemblyName>
+    <GenerateAssemblyInfo>false</GenerateAssemblyInfo>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <PackageReference Include="Microsoft.AspNetCore.SpaServices.Extensions" Version="8.0.8" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <Compile Remove="App_Start/**" />
+    <Compile Remove="Global.asax.cs" />
+    <Compile Remove="Controllers/LandingController.cs" />
+    <Compile Remove="Properties/**" />
+    <Content Remove="Views/**" />
+    <Content Remove="Global.asax" />
+    <Content Remove="Web.config" />
+    <Content Remove="Web.*.config" />
+    <Content Remove="packages.config" />
+    <None Remove="Views/**" />
+    <None Remove="packages.config" />
+  </ItemGroup>
+
+</Project>

Controllers/ApiController.cs

@@ -0,0 +1,31 @@
+using Microsoft.AspNetCore.Mvc;
+
+namespace asp_net_angularjs.Controllers
+{
+    [ApiController]
+    [Route("api/[controller]")]
+    public class ApiController : ControllerBase
+    {
+        [HttpGet("version")]
+        public IActionResult GetVersion()
+        {
+            return Ok(new
+            {
+                application = "ASP.NET Core AngularJS Demo",
+                version = "1.0.0",
+                framework = ".NET 7.0",
+                timestamp = DateTime.UtcNow
+            });
+        }
+
+        [HttpGet("health")]
+        public IActionResult GetHealth()
+        {
+            return Ok(new
+            {
+                status = "healthy",
+                timestamp = DateTime.UtcNow
+            });
+        }
+    }
+}

Controllers/LandingApiController.cs

@@ -0,0 +1,26 @@
+using Microsoft.AspNetCore.Mvc;
+
+namespace asp_net_angularjs.Controllers
+{
+    [ApiController]
+    [Route("api/[controller]")]
+    public class LandingApiController : ControllerBase
+    {
+        [HttpGet("config")]
+        public IActionResult GetConfig()
+        {
+            return Ok(new
+            {
+                title = "XLTS for AngularJS with ASP.NET Core",
+                description = "Migrated from ASP.NET MVC 5 to ASP.NET Core 7 Web API",
+                features = new[]
+                {
+                    "AngularJS Frontend",
+                    "ASP.NET Core 7 Web API",
+                    "CORS Enabled",
+                    "Static File Serving"
+                }
+            });
+        }
+    }
+}

MIGRATION-DIAGRAM.md

@@ -0,0 +1,104 @@
+# Migration Diagram: ASP.NET MVC 5 to ASP.NET Core 7 Web API
+
+## Architecture Overview
+
+```mermaid
+graph TB
+    subgraph "BEFORE: ASP.NET MVC 5 (.NET Framework 4.8)"
+        subgraph "MVC5[ASP.NET MVC 5 Application]"
+            GlobalAsax["Global.asax<br/>(Application Start)"]
+            WebConfig["Web.config<br/>(Configuration)"]
+            AppStart["App_Start<br/>(Routing/Bundles)"]
+
+            subgraph "MVC Components"
+                LandingController["LandingController<br/>(MVC Controller)"]
+                RazorView["Landing/Index.cshtml<br/>(Razor View)"]
+            end
+        end
+
+        subgraph "Frontend1[AngularJS Frontend]"
+            WebApp1["WebApp/<br/>(app.js, components)"]
+            Content1["Content/<br/>(CSS files)"]
+            NodeModules1["node_modules/<br/>(jQuery, AngularJS)"]
+        end
+
+        LandingController -->|Server-side Rendering| RazorView
+        RazorView -->|Embedded Scripts/Styles| Frontend1
+    end
+
+    subgraph "AFTER: ASP.NET Core 7 Web API (.NET 8.0)"
+        subgraph "Core[ASP.NET Core Web API]"
+            ProgramCs["Program.cs<br/>(Application Start & Middleware)"]
+            AppSettings["appsettings.json<br/>(Configuration)"]
+
+            subgraph "API Components"
+                ApiController["ApiController<br/>(JSON API)"]
+                LandingApiController["LandingApiController<br/>(JSON API)"]
+            end
+
+            subgraph "Static Files"
+                StaticMiddleware["Static File Middleware"]
+                IndexHtml["wwwroot/index.html<br/>(Static HTML)"]
+                CorsPolicy["CORS Policy<br/>(AllowAngularJS)"]
+            end
+        end
+
+        subgraph "Frontend2[AngularJS Frontend]"
+            WebApp2["WebApp/<br/>(app.js, components)"]
+            Content2["Content/<br/>(CSS files)"]
+            NodeModules2["node_modules/<br/>(jQuery, AngularJS)"]
+        end
+
+        StaticMiddleware -->|Serves Static Files| IndexHtml
+        IndexHtml -->|References| Frontend2
+        Frontend2 -->|CORS-enabled API Calls| ApiController
+        Frontend2 -->|CORS-enabled API Calls| LandingApiController
+    end
+
+    classDef beforeStyle fill:#ffebee,stroke:#c62828,stroke-width:2px
+    classDef afterStyle fill:#e8f5e8,stroke:#2e7d32,stroke-width:2px
+    classDef frontendStyle fill:#e3f2fd,stroke:#1565c0,stroke-width:2px
+
+    class MVC5,GlobalAsax,WebConfig,AppStart,LandingController,RazorView beforeStyle
+    class Core,ProgramCs,AppSettings,ApiController,LandingApiController,StaticMiddleware,IndexHtml,CorsPolicy afterStyle
+    class Frontend1,Frontend2,WebApp1,WebApp2,Content1,Content2,NodeModules1,NodeModules2 frontendStyle
+```
+
+## Key Changes
+
+1. **Project Structure**:
+   - Replaced legacy `.csproj` with SDK-style project format
+   - Migrated from .NET Framework 4.8 to .NET 8.0
+   - Replaced NuGet packages with .NET Core equivalents
+
+2. **Configuration**:
+   - Replaced `Web.config` with `appsettings.json`
+   - Configured middleware in `Program.cs` instead of `Global.asax`
+   - Added CORS policy for frontend communication
+
+3. **Controllers**:
+   - Converted MVC Controllers to API Controllers
+   - Changed from returning Views to returning JSON data
+   - Added `[ApiController]` attribute
+
+4. **Frontend Integration**:
+   - Replaced server-side Razor views with static HTML
+   - Configured static file middleware to serve frontend assets
+   - Implemented CORS to allow API communication
+
+5. **Bundling/Minification**:
+   - Removed `BundleConfig.cs` bundling
+   - Directly referenced individual files in HTML
+
+## Technology Stack Comparison
+
+| Component | Before | After |
+|-----------|--------|-------|
+| Framework | .NET Framework 4.8 | .NET 8.0 |
+| Web Framework | ASP.NET MVC 5 | ASP.NET Core 7 Web API |
+| Configuration | Web.config | appsettings.json |
+| Startup | Global.asax | Program.cs |
+| Controllers | MVC Controllers | API Controllers |
+| Views | Razor Views | Static HTML |
+| Frontend | AngularJS | AngularJS (unchanged) |
+| Communication | Server-side rendering | JSON API + CORS |

Program.cs

@@ -0,0 +1,59 @@
+using Microsoft.Extensions.FileProviders;
+
+var builder = WebApplication.CreateBuilder(args);
+
+builder.Services.AddControllers();
+builder.Services.AddCors(options =>
+{
+    options.AddPolicy("AllowAngularJS", policy =>
+    {
+        policy.AllowAnyOrigin()
+              .AllowAnyMethod()
+              .AllowAnyHeader();
+    });
+});
+
+var app = builder.Build();
+
+if (app.Environment.IsDevelopment())
+{
+    app.UseDeveloperExceptionPage();
+}
+
+app.UseCors("AllowAngularJS");
+
+app.UseStaticFiles(); // Serves from wwwroot by default
+
+app.UseStaticFiles(new StaticFileOptions
+{
+    FileProvider = new PhysicalFileProvider(
+        Path.Combine(builder.Environment.ContentRootPath, "WebApp")),
+    RequestPath = "/WebApp"
+});
+
+app.UseStaticFiles(new StaticFileOptions
+{
+    FileProvider = new PhysicalFileProvider(
+        Path.Combine(builder.Environment.ContentRootPath, "Content")),
+    RequestPath = "/Content"
+});
+
+app.UseStaticFiles(new StaticFileOptions
+{
+    FileProvider = new PhysicalFileProvider(
+        Path.Combine(builder.Environment.ContentRootPath, "node_modules")),
+    RequestPath = "/node_modules"
+});
+
+app.UseRouting();
+
+app.MapControllers();
+
+app.MapGet("/", async (IWebHostEnvironment env) => 
+{
+    var filePath = Path.Combine(env.ContentRootPath, "wwwroot", "index.html");
+    var content = await File.ReadAllTextAsync(filePath);
+    return Results.Content(content, "text/html");
+});
+
+app.Run();

README-MIGRATION.md

@@ -0,0 +1,89 @@
+# ASP.NET Core 7 Web API Migration
+
+This document describes the migration from ASP.NET MVC 5 (.NET Framework 4.8) to ASP.NET Core 7 Web API.
+
+## Migration Summary
+
+### What Changed
+- **Project File**: Migrated from legacy `.csproj` format to modern SDK-style project (`AspNetCore.WebApi.csproj`)
+- **Configuration**: Replaced `Web.config` with `appsettings.json`
+- **Application Startup**: Replaced `Global.asax.cs` with `Program.cs`
+- **Controllers**: Converted from MVC Controllers returning Views to API Controllers returning JSON
+- **Static Files**: Replaced ASP.NET bundling with direct static file serving
+- **Frontend Integration**: Converted Razor view to static HTML file
+
+### New Project Structure
+```
+AspNetCore.WebApi.csproj    # New SDK-style project file
+Program.cs                  # Application entry point and configuration
+appsettings.json           # Application configuration
+Controllers/
+  ├── ApiController.cs     # General API endpoints
+  └── LandingApiController.cs # Landing-specific API endpoints
+wwwroot/
+  └── index.html          # Static HTML file (converted from Index.cshtml)
+```
+
+### Running the New Application
+
+1. **Build the project**:
+   ```bash
+   dotnet build AspNetCore.WebApi.csproj
+   ```
+
+2. **Run the application**:
+   ```bash
+   dotnet run --project AspNetCore.WebApi.csproj
+   ```
+
+3. **Access the application**:
+   - Frontend: `http://localhost:5000` (or the port shown in console)
+   - API endpoints:
+     - `http://localhost:5000/api/api/version`
+     - `http://localhost:5000/api/api/health`
+     - `http://localhost:5000/api/landingapi/config`
+
+### Frontend Changes Required
+
+**None!** The AngularJS frontend remains completely unchanged. The migration maintains compatibility by:
+
+1. **Static File Serving**: All frontend assets (JavaScript, CSS, HTML) are served as static files
+2. **CORS Configuration**: Enables cross-origin requests from the frontend
+3. **Path Mapping**: Maintains the same file paths for all frontend resources
+
+### API Endpoints
+
+The new Web API provides these endpoints for future frontend integration:
+
+- `GET /api/api/version` - Returns application version information
+- `GET /api/api/health` - Returns health status
+- `GET /api/landingapi/config` - Returns configuration data for the landing page
+
+### Key Technical Changes
+
+1. **Dependency Injection**: Uses built-in ASP.NET Core DI container
+2. **Middleware Pipeline**: Configured in `Program.cs` with static files, CORS, and routing
+3. **Static File Serving**: Serves files from `WebApp/`, `Content/`, and `node_modules/` directories
+4. **CORS Policy**: "AllowAngularJS" policy allows all origins, methods, and headers
+
+### Database Connections
+
+No database connections existed in the original application, so none were migrated.
+
+### External Dependencies
+
+The application has no external service dependencies beyond the npm packages for the frontend.
+
+### Development Workflow
+
+1. Use `dotnet build` instead of MSBuild
+2. Use `dotnet run` instead of IIS Express
+3. Configuration changes go in `appsettings.json` instead of `Web.config`
+4. Add new API endpoints by creating controllers that inherit from `ControllerBase`
+
+### Deployment Considerations
+
+- Target runtime: .NET 7.0
+- Deployment model: Self-contained or framework-dependent
+- Static files are served directly by Kestrel
+- CORS is configured for development (consider restricting origins in production)

appsettings.Development.json

@@ -0,0 +1,8 @@
+{
+  "Logging": {
+    "LogLevel": {
+      "Default": "Information",
+      "Microsoft.AspNetCore": "Warning"
+    }
+  }
+}

appsettings.json

@@ -0,0 +1,9 @@
+{
+  "Logging": {
+    "LogLevel": {
+      "Default": "Information",
+      "Microsoft.AspNetCore": "Warning"
+    }
+  },
+  "AllowedHosts": "*"
+}

wwwroot/index.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width" />
+  <title>XLTS for AngularJS with ASP.NET Core</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
+
+  <!-- CSS files -->
+  <link rel="stylesheet" href="/Content/site.css" />
+  <link rel="stylesheet" href="/WebApp/Components/test.component.css" />
+  <link rel="stylesheet" href="/WebApp/Directives/test.directive.css" />
+
+  <!-- JavaScript files -->
+  <script src="/node_modules/jquery/dist/jquery.min.js"></script>
+  <script src="/node_modules/angular/angular.min.js"></script>
+  <script src="/WebApp/app.js"></script>
+  <script src="/WebApp/Components/test.component.js"></script>
+  <script src="/WebApp/Directives/test.directive.js"></script>
+</head>
+<body ng-app="app">
+  <h1 data-testid="title">XLTS for AngularJS with ASP.NET Core</h1>
+  <test-directive></test-directive>
+  <test-component></test-component>
+</body>
+</html>