I Let GitHub Copilot Build My Razor Pages UI (While Rewriting an Old .NET App)
Source: Dev.to
Background
I’m rewriting an old .NET Framework application using modern .NET and AI tools. In this part of the project I let GitHub Copilot inside Microsoft Visual Studio generate the entire user interface. The result was surprisingly good, with a few interesting lessons.
Project Structure
The application is organized into separate projects:
- Domain – business logic
- Data Access – persistence
- Services – application layer
- Composition Root – dependency wiring
The UI layer is thin, referencing only the Services layer, while the rest of the logic lives outside the front‑end. This structure works well for small, medium, and even larger projects.
Choosing Razor Pages Over Blazor
My first thought was to use Blazor, a modern front‑end option in ASP.NET Core. However, after several quick experiments Copilot consistently struggled to generate working Blazor projects. Razor Pages turned out to be far easier for AI‑assisted development.
Preparing the Project for Copilot
- Created a Razor Pages project shell manually.
- Wrote a high‑level prompt describing the page.
- Focused on DTOs and data layout rather than specific UI controls.
I deliberately did not describe UI controls in detail (e.g., dropdowns, textboxes, specific HTML elements). Instead, I described what data should appear and how it should be ordered on the screen. That was enough.
Copilot’s Output
Copilot generated:
- Razor pages
- Page models
- ViewModels
The solution compiled immediately, and the generated PlayLottery page worked. The form allowed users to:
- Choose how many tickets to generate
- Select number‑generation strategies
- Use historical lottery numbers as results
The results page displayed:
- Overall results
- Net profit or loss
Iterative Workflow
The workflow became simple:
Prompt → run → refine
Examples of prompts I gave Copilot:
- Display the winning numbers
- Show the generated tickets
- Add borders so the results look like actual lottery tickets
Each change required only a small prompt, making UI iteration surprisingly fast.
Key Takeaways
- Keep business logic outside the UI.
- Provide clear DTOs.
- Describe data layout instead of UI controls.
- Iterate with concise prompts.
Razor Pages works extremely well with AI coding tools. Blazor may still catch up, but right now Razor Pages feels much easier for AI‑assisted scaffolding.
Video Demonstration
I recorded the entire process:
YouTube – GitHub Copilot builds Razor Pages UI
The video shows:
- The prompt used for Copilot
- The generated Razor Pages
- Running the application
- Refining the UI with additional prompts
Discussion
💡 If you’re experimenting with AI‑assisted development in .NET, I’d be curious to know:
Have you had better results with Razor Pages or Blazor when using Copilot?