Creating an MVC Project

After this lesson you can

• Create an ASP.NET Core MVC project and run it in the browser
• Find your way around an MVC project's folders, Program.cs and appsettings.json

Key takeaways

• dotnet new mvc -n NorthwindWeb creates an MVC project, and dotnet run starts it on the address it prints. Ctrl+C stops it.
• The Controllers, Models and Views folders hold the three parts of MVC, and wwwroot holds static files sent as they are.
• Program.cs builds and starts the app: AddControllersWithViews() turns on MVC, and MapControllerRoute sets the route.
• ASP.NET Core reads appsettings.json for you, so the connection string goes in its ConnectionStrings section.

Time to make a web app. In this chapter you'll build NorthwindWeb, a small website for the Northwind products you've been querying, one piece per lesson.

Create the project

From the terminal:

cd ~/bootcamp
dotnet new mvc -n NorthwindWeb
cd NorthwindWeb
dotnet run

Or in Visual Studio: File > New > Project, choose ASP.NET Core Web App (Model-View-Controller), name it NorthwindWeb, and keep the defaults (.NET 10, Authentication type: None).

dotnet run builds the app and starts it. It prints the address it's listening on, then waits for requests:

info: Microsoft.Hosting.Lifetime[14]
      Now listening on: http://localhost:5204
info: Microsoft.Hosting.Lifetime[0]
      Application started. Press Ctrl+C to shut down.

Open that address in your browser (your port number will be different), and there's your website: a Welcome page with Home and Privacy links. Press Ctrl+C in the terminal to stop it. In Visual Studio, Ctrl+F5 runs the app and opens the browser for you.

If the browser warns that the connection isn't private on an https://localhost address, trust the development certificate once, then restart the app:

dotnet dev-certs https --trust

What's in the project

NorthwindWeb/
├── Controllers/        HomeController.cs: answers requests
├── Models/             classes that carry data
├── Views/              .cshtml files that become HTML
│   ├── Home/           Index.cshtml and Privacy.cshtml, the views for HomeController
│   └── Shared/         _Layout.cshtml, the frame around every page
├── wwwroot/            static files sent as they are: css, js, images, and Bootstrap in lib/
├── Properties/         launchSettings.json: the app's port
├── appsettings.json    the app's settings, such as connection strings
├── Program.cs          starts the app
└── NorthwindWeb.csproj

Controllers, Models and Views: the three folders are the three parts of the MVC pattern, the subject of the next lesson.

Program.cs

Program.cs builds the app and starts it. The template's version, with its comments trimmed:

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddControllersWithViews();

var app = builder.Build();

if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Home/Error");
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseRouting();

app.UseAuthorization();

app.MapStaticAssets();

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

app.Run();

You don't need every line yet. These are the ones that matter now:

(The template writes var for the builder and the app. Their full types are long, WebApplicationBuilder and WebApplication, and var lets C# work them out.)

appsettings.json

ASP.NET Core reads appsettings.json for you when it starts. Add NorthwindWeb's connection string, in the same ConnectionStrings section you used in Configure the Project for SQL Server:

{
  "ConnectionStrings": {
    "Northwind": "Server=localhost;Database=Northwind;Integrated Security=true;TrustServerCertificate=true;"
  },
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "AllowedHosts": "*"
}

And add the SQL Server driver, as before:

dotnet add package Microsoft.Data.SqlClient
dotnet add package System.Security.Cryptography.Pkcs

A web project copies appsettings.json next to the program by itself, so there's no CopyToOutputDirectory setting to add this time.

Common problems

Check yourself

2 questions to try on the lesson page.

So what

One command gives you a working website with a home page, a layout, Bootstrap and a route. From here on, every feature is a controller, a model or a view added to this same project.

Key terms

• Program.cs
• Static Files

Cheat sheets

• Creating an MVC Project