Migrate from .NET Framework 4.8 to .NET 7 #12
Conversation
- Convert project to SDK-style format targeting net7.0 - Replace ASP.NET MVC 5 with ASP.NET Core MVC - Replace System.Web.Optimization with direct static file serving - Replace Global.asax with Program.cs minimal hosting model - Update controller to use Microsoft.AspNetCore.Mvc - Update view to use direct script/link tags instead of bundling - Migrate XML configuration (Web.config) to JSON (appsettings.json) - Remove all legacy .NET Framework files and dependencies - Update README for cross-platform .NET 7 development - Update playwright config and E2E tests for new port (5000) - Update test expectations for new title and library versions The client-side AngularJS and jQuery code remains unchanged. All verification steps completed successfully: - dotnet build: successful compilation - dotnet run: application starts and runs correctly - Manual browser testing: confirmed AngularJS 1.8.3 and jQuery 3.7.0 work
🤖 Devin AI EngineerI'll be helping with this pull request! Here's what you should know: ✅ I will automatically:
Note: I can only respond to comments from users who have write access to this repository. ⚙️ Control Options:
|
|
Explain the code in this repo |
Code Architecture ExplanationThis repository is a demo application showcasing AngularJS (client-side) integration with ASP.NET Core MVC (server-side) after migrating from .NET Framework 4.8 to .NET 7. High-Level ArchitectureThe application follows a traditional MVC pattern with a twist: the server primarily serves as a delivery mechanism for the AngularJS single-page application (SPA), while the client-side handles most of the interactivity. Backend (ASP.NET Core MVC):
Frontend (AngularJS):
Key Files and Their Roles1. Program.cs (Application Entry Point)// Bootstraps the entire .NET 7 application using minimal hosting model
// Configures services: MVC controllers, Razor runtime compilation
// Configures middleware: static files, routing, HTTPS redirection
// Sets up multiple PhysicalFileProviders to serve static assets from different directoriesThis replaces the old
2. Controllers/LandingController.cs (MVC Controller)public class LandingController : Controller
{
public IActionResult Index() => View();
}This is extremely simple - it just returns a view. The controller's job is only to render the initial HTML shell. All application logic happens client-side in AngularJS. 3. Views/Landing/Index.cshtml (Razor View / HTML Shell)This is the critical bridge between server and client:
Script Loading Order is Critical: <script src="~/node_modules/jquery/dist/jquery.min.js"></script> <!-- 1. jQuery first -->
<script src="~/node_modules/angular/angular.min.js"></script> <!-- 2. Angular second -->
<script src="~/WebApp/app.js"></script> <!-- 3. App module -->
<script src="~/WebApp/Components/test.component.js"></script> <!-- 4. Components -->
<script src="~/WebApp/Directives/test.directive.js"></script> <!-- 5. Directives -->4. WebApp/app.js (AngularJS Application Module)Defines the main AngularJS module: angular.module('asp_net_angularjs', [])This is the AngularJS "app" that gets bootstrapped when the browser encounters 5. WebApp/Components/ (Reusable UI Components)Example: angular.module('asp_net_angularjs').component('testComponent', {
template: '<div>AngularJS Version: {{ vm.version }}</div>',
controller: function() { this.version = angular.version.full; }
});6. WebApp/Directives/ (Custom Directives)Example: angular.module('asp_net_angularjs').directive('testDirective', function() {
return {
template: '<div>jQuery Version: {{ vm.version }}</div>',
controller: function() { this.version = $.fn.jquery; }
};
});Request FlowHere's what happens when a user visits the application:
Static File Serving (Critical After Migration)In the old .NET Framework version, // Serve from wwwroot/
app.UseStaticFiles();
// Serve from WebApp/ at /WebApp/*
app.UseStaticFiles(new StaticFileOptions {
FileProvider = new PhysicalFileProvider(Path.Combine(..., "WebApp")),
RequestPath = "/WebApp"
});
// Similar for Content/ and node_modules/This means:
Project Configurationangularjs-asp-net48-mvc5.csproj (SDK-Style Project)<Project Sdk="Microsoft.NET.Sdk.Web">
<PropertyGroup>
<TargetFramework>net7.0</TargetFramework>
</PropertyGroup>
<ItemGroup>
<PackageReference Include="Microsoft.AspNetCore.Mvc.Razor.RuntimeCompilation" Version="7.0.20" />
<PackageReference Include="Newtonsoft.Json" Version="13.0.3" />
</ItemGroup>
</Project>Only 2 NuGet packages needed (vs 9 in old version):
appsettings.json (Configuration){
"Logging": {
"LogLevel": { "Default": "Information" }
},
"AllowedHosts": "*"
}Replaces Development Workflow
Key Migration Changes
TestingThe E2E tests verify:
This confirms the entire stack works: server → view → client-side scripts → AngularJS bootstrap → component rendering. Let me know if you'd like me to explain any specific part in more detail or add more documentation to the repository! |
1 participant
Migrate from .NET Framework 4.8 to .NET 7
Summary
This PR completes a full migration of the AngularJS demo application from .NET Framework 4.8 (ASP.NET MVC 5) to .NET 7 (ASP.NET Core MVC). The migration modernizes the project structure to use SDK-style format and enables cross-platform support while preserving all client-side AngularJS and jQuery functionality.
Key Changes:
net7.0Global.asaxwithProgram.csusing minimal hosting modelSystem.Web.Optimizationwith direct static file serving viaPhysicalFileProviderWeb.config) to JSON (appsettings.json)Microsoft.AspNetCore.Mvc.Razor.RuntimeCompilation,Newtonsoft.Json)Microsoft.AspNetCore.Mvcbase classes<script>and<link>tagsdotnetCLIClient-Side Code: All AngularJS and jQuery code remains unchanged and functional.
Local Verification Completed:
dotnet buildcompiles successfullydotnet runstarts application on http://localhost:5000Review & Testing Checklist for Human
Critical Items (Must Verify):
Additional Considerations:
Test Plan
dotnet buildand verify successful compilationdotnet runand navigate to http://localhost:5000npm run e2eand verify all 3 tests passNotes
PhysicalFileProviderinstances inProgram.csto serve static files fromWebApp/,Content/, andnode_modules/directories, replicating the behavior of the original bundling systemIndex.cshtmlrather than managed by bundling config - this is critical for AngularJS to bootstrap correctlyLink to Devin run: https://app.devin.ai/sessions/4862184cb4184a35b38bf6008fadf605
Requested by: Ibs (@ibrahim-sowunmi)