Introduction

Welcome to the ASP.NET Core MVC Basics tutorial! This guide will walk you through the essential concepts and components of building web applications using the Model-View-Controller (MVC) architectural pattern with ASP.NET Core.

Whether you're new to web development or looking to understand ASP.NET Core, this tutorial provides a solid foundation.

What is MVC?

Model-View-Controller (MVC) is a widely used architectural pattern for designing user interfaces and web applications. It separates an application into three interconnected parts:

• Model: Represents the data and business logic of the application. It's responsible for managing the application's state.
• View: Renders the user interface. It receives data from the Model and displays it to the user. Views are typically responsible for presentation logic.
• Controller: Acts as an intermediary between the Model and the View. It handles user input, interacts with the Model to retrieve or update data, and selects the appropriate View to display the results.

This separation of concerns makes applications more organized, maintainable, and testable.

Project Setup

To get started, you'll need the .NET SDK installed. You can create a new ASP.NET Core MVC project using the .NET CLI:

dotnet new mvc -o MyMvcApp
cd MyMvcApp
dotnet run

This command will create a new directory named MyMvcApp containing a basic ASP.NET Core MVC project structure.

Controllers

Controllers handle incoming HTTP requests. They are typically C# classes that inherit from Controller. Each action method within a controller can handle a specific request and return a result.

Consider the HomeController.cs file in your project:

using Microsoft.AspNetCore.Mvc;
using System.Diagnostics;
using MyMvcApp.Models;

namespace MyMvcApp.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }

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

        [ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)]
        public IActionResult Error()
        {
            return View(new ErrorViewModel { RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier });
        }
    }
}

In this example:

• Index() and Privacy() are action methods.
• IActionResult is returned, which can be a ViewResult, RedirectResult, etc.
• return View(); tells the framework to find and render a corresponding view.

Views

Views are responsible for presenting data to the user. They are typically Razor files (.cshtml) that mix HTML markup with C# code.

The Index.cshtml view for the HomeController might look like this:

@{
    ViewData["Title"] = "Home Page";
}

@*@

    
Welcome
    
Learn about building Web apps with ASP.NET Core.

Key elements in Razor views:

• @ symbol for Razor directives and expressions.
• ViewData["Title"] sets the page title.
• HTML elements are used for structure and content.

Models

Models represent your application's data and logic. In ASP.NET Core MVC, models are typically Plain Old C# Objects (POCOs) that hold data and sometimes include validation logic.

An example Model, ErrorViewModel.cs:

namespace MyMvcApp.Models
{
    public class ErrorViewModel
    {
        public string? RequestId { get; set; }

        public bool ShowRequestId => !string.IsNullOrEmpty(RequestId);
    }
}

Models are often passed from the Controller to the View to display dynamic content.

Routing

Routing determines how incoming HTTP requests are mapped to controller action methods. ASP.NET Core uses a routing system that can be configured in the Program.cs file.

The default routing configuration in Program.cs often includes:

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

This pattern means:

• If no controller is specified, use Home.
• If no action is specified, use Index.
• An optional id parameter can be included.

Passing Data Between Controller and View

You can pass data from the Controller to the View in several ways:

• ViewBag: A dynamic object that allows you to pass data without defining properties in advance. Use with caution as it lacks compile-time checking.
• ViewData: A dictionary that stores data. Similar to ViewBag but uses explicit key-value pairs.
• Strongly-Typed Models: The most recommended approach. Create a model class to represent the data and pass an instance of it to the View.

Example of passing data using a strongly-typed model:

In the Controller:

public IActionResult About()
{
    var aboutData = new AboutViewModel { Message = "This is about our amazing application!" };
    return View(aboutData);
}

And in the corresponding About.cshtml view:

@model MyMvcApp.Models.AboutViewModel
@*@
<h2>@Model.Message</h2>

Next Steps

Congratulations! You've covered the basics of ASP.NET Core MVC.

To further enhance your skills, consider exploring:

• Entity Framework Core: For database access.
• Dependency Injection: For managing services.
• Validation: Implementing robust data validation.
• Authentication and Authorization: Securing your application.
• API Development: Building RESTful APIs with ASP.NET Core.

Continue your learning journey with our ASP.NET Core MVC Advanced tutorial.