Skip to content
  • iImagine
  • Register
  • Log In

Web Development School

Learning made easy.

  • Books
    • Beginning Web Development with ASP.Net Core & Client-Side Technologies
      • TOC
      • Part 1
        • Chapter 1: Static HTML – Designing the landing page
      • Part 2
        • Chapter 2: ASP.Net Core – Let’s talk Dynamic
        • Chapter 3: Introduction to ASP.Net Core MVC
          [ASP.Net Core v9]
      • Part 4
        • Chapter 7: Using Server Side & Client Side technologies together
          [ASP.Net Core v7 & Angular 15]
  • Environment Setup
    • Installing Angular
    • Installing Visual Studio 2022
    • Installing SQL Server 2022 Express
    • Installing Postman
    • Installing Git for Windows
  • Blog
  • iImagine WebSolutions
  • Events
  • Learning Videos
  • Toggle search form

Introduction to ASP.Net Core MVC

In my opinion, this is one of the most exciting chapters in the book because, after all, this book is all about ASP.Net Core. And, in this chapter we are going to start learning our first ASP.Net Core framework; MVC.


We already talked about some of the problems of building a website by hand in straight HTML in Chapter 2, Module 1: Introduction to ASP.Net Core.

In this chapter we are going to learn how to solve these problems by rebuilding the Fred’s Cars local dealership landing and detail pages as a dynamic website using ASP.Net Core MVC as our dynamic framework.

Table Of Contents
  1. MVC Architecture
    • Separation of Concerns
  2. What is MVC
    • Controller Responsibilities
    • Model Responsibilities
    • View Responsibilities
  3. Testability
  4. What's Next

MVC Architecture

We also already touched lightly on the MVC architecture in Chapter 2, Module 3: What is ASP.Net. Let’s quickly review the three MVC components and their responsibilities.

MVC Architecture

MODEL
Contains the business rules and provides access to the database for the controller.

CONTROLLER
Controls application flow. Receives the incoming URL request and sends CRUD (Create, Retrieve, Update, and Delete) requests to the Model, and provides the View with a Model of data to display.

VIEW
Responsible for rendering the data model sent from the controller in HTML to the user.

These definitions will become more clear once we start to model out our business domain and build some actual controllers and views.

Separation of Concerns

However, for now, just understand that using the above three components allows us to achieve separation of concerns. Dividing up the responsibilities of a web application between these three tiers makes each piece easier to focus on when we need to write or maintain code in that area of the application. It also makes the application easier to scale and test.


I don’t want to get too much into theory here. The best way to learn about each of the MVC components is to jump in and get our hands dirty. But let’s expand slightly on the definition of MVC and each of its components before we move on.

What is MVC

Microsoft gives the following definition for MVC.

ASP.NET Core MVC is a rich framework for building web apps and APIs using the Model-View-Controller design pattern.

In the above definition web apps refers to the kind of application we are going to build in this chapter; Fred’s Cars. APIs refers to another kind of application MVC can be used to build called Web APIs, or Web Services, or Rest Services. We won’t build any APIs is in this chapter. But, we will build out a pretty sophisticated Web API using MVC in Chapter 7, Intro to Full Stack Development where I also get into describing the MVC components more in depth for both Web Applications and API Applications.

Controller Responsibilities

The controller is responsible for working with the Model to perform user actions and/or retrieve results of queries. The controller chooses which View component to display to the user. And provides it with any Model data it requires.

Controllers should not contain any HTML. The controller is only responsible for application flow.

Model Responsibilities

The model represents the state of the application. It also contains the application’s business logic and operations. The model is responsible for persisting the state of the application usually to a database.

View Responsibilities

Views are responsible for presenting content. Typically the controller will pass data down to the view from the model and the view will render that data in HTML to the user.

The view should not contain any business logic or, at the most, very limited business logic. Business logic should live in the controller.

Testability

One of the biggest advantages to the MVC framework is the fact that it lends itself easily to testability. Because the application is broken up into three components, functionality is easer to isolate and test.

What’s Next

As promised I tried to keep the theory short in this module because I know you are excited as I am to get started building our project and writing some code.

In the next module we will create an ASP.Net Core MVC project using Visual Studio 2022.

< Prev
Next >

Leave a ReplyCancel reply

Chapter 1: Static HTML – Designing the landing page.

  • Static HTML – Designing the landing page.
  • Let’s get started!
  • Mock your site with HTML
  • Make CSS easy with Bootstrap
  • Mock your content
  • Introducing JavaScript
  • JavaScript Code Improvements
  • Results Data
  • Images and the HTML Image Element.
  • Revisiting Reusability for CSS and JavaScript
  • Reuse for HTML: PART 1
  • Reuse for HTML: PART 2
  • Details Page – Using a Bootstrap Component
  • Creating Links
  • Chapter One Conclusion

Chapter 2: ASP.Net Core – Let’s talk Dynamic

  • Introduction to ASP.Net Core
  • What is .Net?
  • What is ASP.Net
  • Introduction to Entity Framework Core

Chapter 3: ASP.Net MVC Core – Models, Views, and Controllers [ASP.Net Core v9]

  • Introduction to ASP.Net Core MVC
  • Create the project: ASP.Net Core MVC
  • Explore the ASP.Net Core Empty Web Project Template
  • Configure the Application for MVC
  • Create a Controller: Home Controller
  • Create a View: Index View for the Home Controller
  • Install Bootstrap using Libman
  • Create the Layout template
  • Create the Model
  • Install EF Core & Create the Database
  • Seed the Database: Loading test data
  • DI (Dependency Injection): Display a List of Vehicles
  • Repository Pattern: The Vehicles Repo
  • Unit Test 1: Home Controller Can Use Vehicle Repository
  • Unit Test 2: Vehicle Repository Can Return List
  • Add the ImagePath Migration and Thumbnail images to results
  • Pagination: Create a Custom Tag Helper
  • Sorting
  • Category Filter
  • Partial View: Break out the vehicle results
  • View Component: Create dynamic category buttons

Chapter 7: Using Server Side & Client Side technologies together. [ASP.Net Core v7 & Angular v15]

  • Intro to Full Stack Development
  • Fred’s Cars – Full Stack Development
  • Prepare the environment
  • Create the Visual Studio Solution
  • Add the ASP.Net Core Web API project
  • Add the Angular Project
  • Wire it up!
  • WeatherForecast: Understanding the basics
  • Vehicles API Controller: Mock Data
  • Vehicles Angular Component: Consuming Data
  • Routing and Navigation
  • Using a Component Library: Angular Material
  • Our first Angular Material Component: MatToolbar
  • Configuring for Saas: CSS with superpowers
  • Create the Header & Footer components
  • Displaying Results with MatTable
  • Loading: Using a Progress Spinner
  • MatTable: Client-Side Paging and Sorting
  • MatSidenav: Create a Search Sidebar
  • MatCheckbox: Category Search UI
  • Adding an image to the welcome page
  • Create the database with Entity Framework Core migrations
  • MatPaginator & PageEvent: Custom Server-Side Paging
  • Unit Testing: Custom Server-Side Paging
  • Repository Pattern: VehicleRepository
  • Unit Test: Paging in the Vehicles controller
  • Server-Side Sorting
  • Unit Tests: Sorting
  • Filter (Quick Search)
  • Unit Tests: Filter feature
  • Advanced Search: Categories
  • Unit Tests: Search by category
  • Progress Spinner: Final Fix

TOC

  • What were WebForms?
  • Enter MVC
    • Understanding MVC
    • Advantages of MVC
  • ASP.Net Core MVC – A total rewrite
  • ASP.Net Core 2 MVC – Here come Razor Pages
    • Understanding Razor Pages
  • ASP.Net Core 3 – Dropping the MVC reference
    • Understanding Blazor
  • Dropping the MVC reference
  • Hello .Net 5!
  • What’s Next? – Here comes .Net 6.

Recent Posts

  • Angular Commands Cheat Sheet
  • Installing Git for Windows
  • Installing Postman
  • Installing SQL Server 2022 Express
  • Installing Visual Studio 2022

Recent Comments

No comments to show.

Archives

  • November 2023
  • October 2023
  • June 2023
  • October 2021

Categories

  • Angular
  • ASP.Net
  • Environment Setup
  • See All
  • SQL Server
  • Visual Studio
  • Web API & Rest Services

WordPress Theme Editor

Copyright © 2025 Web Development School.

Powered by PressBook Blog WordPress theme