💻 Lab: Converting a Desktop WinForms App to a Razor MVC Web App

Objective

In this lab, you’ll take a simple C# WinForms desktop application and use it as the basis to develop a Razor MVC web application in .NET 8. The web app will have the same features as the desktop version:

• Enter a Name and Age
• Click Create Customer to display a saved message
• Click Double Age to calculate twice the entered age

By the end, you will have a working Razor MVC web app called DesktopToRazor.

Step 1 - Download the Desktop App

1. Download the Desktop App.
2. Open the project in Visual Studio 2022.
3. Review the contents and familiarize yourself with the form, the model, and the classes.
4. This step will give you a visual of what components in your own desktop app can be reused and what will need to be rebuilt.

Step 2 – Set Up the Project

1. Open Visual Studio 2022 Community Edition. Click the Continue without Code option.
2. Go to File → New → Project.
3. Select ASP.NET Core Web App (Model-View-Controller).
4. If you don't have access to the .NET Core Web App option, go to Tools-> Get Tools & Features -> and Select "ASP.NET and Web Development"
5. Name the project DesktopToRazor and choose a folder location. Use the following options when setting up the new project:
6. Target Framework: .NET 8.0 (Long Term Support).
7. Authentication: None.
8. Uncheck Enable HTTPS to avoid confusion when testing. You may want to enable HTTPS for your own app, however, this process is beyond the purpose of this tutorial.
9. Click Create.

Your MVC project is now set up.

Step 3 – Reuse Your Logic Classes

From your desktop project, you already have three logic classes: Customer.cs, Calculator.cs, and CustomerHelper.cs. We will reuse them in the web app.

1. In Solution Explorer, right-click Models → Add → Class.
2. Create Customer.cs with this code:

namespace DesktopToRazor.Models
{
    public class Customer
    {
        public string Name { get; set; }
        public int Age { get; set; }
    }
}

3. Create Calculator.cs in the same folder:

namespace DesktopToRazor.Models
{
    public class Calculator
    {
        public int DoubleAge(int age)
        {
            return age * 2;
        }
    }
}

4. Create CustomerHelper.cs in the same folder:

namespace DesktopToRazor.Models
{
    public class CustomerHelper
    {
        public string GetCustomerInfo(Customer customer)
        {
            return $"Customer: {customer.Name}, Age: {customer.Age}";
        }
    }
}

5. Make sure you save each class.

Step 4 – Create the Controller

Controllers handle user actions and decide what to show. We’ll create a new CustomerController to manage form input and button clicks.

1. In Solution Explorer, right-click Controllers → Add → Class.
2. Name it CustomerController.cs.
3. Add this code:

using Microsoft.AspNetCore.Mvc;
using DesktopToRazor.Models;

namespace DesktopToRazor.Controllers
{
    public class CustomerController : Controller
    {
        private static Customer? _customer;

        public IActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public IActionResult CreateCustomer(string name, int age)
        {
            var customer = new Customer { Name = name, Age = age };
            _customer = customer;

            var helper = new CustomerHelper();
            ViewBag.Message = helper.GetCustomerInfo(customer) + " - Customer Saved!";
            return View("Index");
        }

        [HttpPost]
        public IActionResult DoubleAge(int age)
        {
            var calculator = new Calculator();
            int doubled = calculator.DoubleAge(age);

            ViewBag.Message = $"Doubled Age: {doubled}";
            return View("Index");
        }
    }
}

Step 5 – Create the View

The view is the HTML form where the user types in data. We’ll create Index.cshtml for our form.

1. In Solution Explorer, right-click Views → Add → New Folder, name it Customer.
2. Inside Customer, right-click → Add → Razor Component → Razor View - Empty, name it Index.cshtml.
3. Add this code:

@{
    ViewData["Title"] = "Customer Form";
}

<h2>Customer Form</h2>

<form asp-action="CreateCustomer" method="post">
    <label>Name:</label>
    <input type="text" name="name" /><br /><br />

    <label>Age:</label>
    <input type="number" name="age" /><br /><br />

    <button type="submit">Create Customer</button>
</form>

<br />

<form asp-action="DoubleAge" method="post">
    <label>Age:</label>
    <input type="number" name="age" /><br /><br />

    <button type="submit">Double Age</button>
</form>

<br />

<div style="margin-top:20px; color:green;">
    @ViewBag.Message
</div>

Step 6 – Update the Program.cs Routing

By default, MVC apps point to HomeController. We want our app to open CustomerController instead.

1. Open Program.cs located in the root of Solution Explorer.
2. Find the app.MapControllerRoute line and replace it with:

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Customer}/{action=Index}/{id?}");

Step 7 – Run the Application

1. Press Ctrl + F5 to start without debugging.
2. Your browser will open to http://localhost:5000 or something similar.
3. Enter a name and age.
4. Click Create Customer → You’ll see “Customer Saved” with details.
5. Click Double Age → You’ll see the doubled age result.