Getting Started with ASP.NET Core MVC: A Comprehensive Guide
Written on
Chapter 1: Introduction to ASP.NET Core MVC
Diving directly into hands-on experience is often the most effective method to learn. In this guide, I will walk you through the process of starting with ASP.NET Core, utilizing the MVC framework for this purpose. You might be curious about this choice, especially since REST APIs and React are trending options today. However, exploring MVC first will provide you with insights into its advantages and disadvantages.
We will be working with .NET version 8.0.204 for this tutorial.
Creating Your Project
To get started, navigate to your project directory and execute the following commands in your terminal. Use the cd command to enter your project folder:
cd FirstProject
To establish a global.json file specifying your .NET version, use:
dotnet new globaljson --output FirstProject
Now, create your MVC application without HTTPS:
dotnet new mvc --no-https --output FirstProject --framework net8.0
Next, create a solution file:
dotnet new sln -o FirstProject
dotnet sln FirstProject add FirstProject
After completing these commands, you should observe the project structure as follows:
Project Structure Overview
In the launchSettings.json file, you can modify the port on which your ASP.NET Core application operates:
{
"$schema": "http://json.schemastore.org/launchsettings.json",
"iisSettings": {
"windowsAuthentication": false,
"anonymousAuthentication": true,
"iisExpress": {
"applicationUrl": "http://localhost:56166",
"sslPort": 0
}
},
"profiles": {
"http": {
"commandName": "Project",
"dotnetRunMessages": true,
"launchBrowser": true,
"applicationUrl": "http://localhost:5083",
"environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Development"}
},
"IIS Express": {
"commandName": "IISExpress",
"launchBrowser": true,
"environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Development"}
}
}
}
Testing Your Application
It's time to run your application:
dotnet run
As expected, modern frameworks typically have a welcome page that looks like this.
Understanding Controllers
The critical functionality resides in the Controllers folder, where you will find HomeController.cs. Controllers are named following the pattern [Name]Controller. In ASP.NET Core, endpoints handle incoming requests, with actions (methods) defined within controllers generating responses.
Let’s change the return value of the Index method to a string:
public class HomeController : Controller {
public string Index() {
return "Hello Medium";}
}
Run the application again using dotnet run. If you've run it previously, remember to stop it first with Ctrl + C (Windows/Linux) or Cmd + C (macOS).
Verifying Output Changes
While the output might seem unchanged, it confirms that the controller dictates what the user sees.
By default, the application responds to three routes: /, /Home, and /Home/Index. Modify the URL in your browser to localhost:5084/Home to see that it still functions.
Creating a New View
Now, let’s create a new HTML file. We need to modify the Index method to return a ViewResult instead of a string, and we also need to create a corresponding View. Change the Index method to:
public ViewResult Index() {
return View("HelloMedium");
}
Navigate to the Views/Home directory in your project and create a new file named HelloMedium.cshtml.
Setting Up the HelloMedium View
Add the following HTML content to HelloMedium.cshtml:
@{
Layout = null;
}
<h1>Index</h1>
<p>Hello Medium from a view</p>
Congratulations! You have successfully created an HTML file and returned the defined content.
Understanding Layouts
Notice that the background has changed to white. This is because a layout hasn’t been applied yet. Layouts allow you to define shared HTML elements in one location, which can be reused across multiple views.
Dynamic Content with Razor
You may wonder how to send dynamic content to the HTML file since HTML is inherently static. Fortunately, Razor, the view engine used in ASP.NET Core, can interpret expressions and generate HTML to be sent to the browser.
Let's update the HelloMedium.cshtml file to specify a model type:
@model string
@{
Layout = null;
}
<h1>Index</h1>
<p>Hello @Model from a view</p>
Now, modify the HomeController.cs to pass data to the view:
public ViewResult Index() {
const string name = "Tomas";
return View("HelloMedium", name);
}
Now, when you run the application again, you'll see that the name is displayed correctly in the HTML file due to Razor's processing.
Dynamic HTML Output
Thank you for taking the time to read this guide. I hope you found it helpful and informative. If you have any feedback or comments, please feel free to share!
Chapter 2: Video Tutorials
In this first video, "How to Create Your First ASP NET Core MVC .NET 7 Web Application Project in Visual Studio 2022," you'll learn the basics of setting up your environment and creating your first project step by step.
The second video, "Introduction to ASP.NET Core MVC (.NET 8)," provides a comprehensive overview of the MVC framework and its components, perfect for beginners looking to deepen their understanding.