.NET MVC Page Lifecycle

This is meant to be a high level introduction to working with .NET MVC.

MVC(Model-View-Controller) is a software architectural patterns used for implementing user interfaces. It has been around since the 1970s, but has risen to popularity recently because of the explosion of client-facing applications that need highly interactive interfaces.

Basically MVC defines 3 different component pieces for building a user-facing application. A model — the data model of the application that talks to the database, a view — the piece of the application that presents a view of the data to the user, and a controller — the piece of the application that combines model data with views and presents that data to the user.

.NET MVC is an MVC framework that renders server side. What this means is that all of your view content is created on the server before actually getting sent to your browser as HTML, js, and css. (it always boils down to those three). When you create a new page in .NET MVC you will need 3 basic files — A controller, a model, and a view. Let’s look at each of them one by one to get a picture of how they work together.

Controller (movieController.cs)

The controller is the file that receives incoming requests from clients. It is the smartest and most logic-intensive in your page architecture, the conductor that arranges for the other pieces to combine themselves in the right ways.

It does four primary things.

1. Accept request information as arguments
2. Perform logic for that particular request
3. Populate data Models
4. Return Views

public class PersonController : Controller
{
  static List<Person> people = new List<Person>();
  // GET: /Person/
  public ActionResult Index()
  {
     // this is where we build the model     
     var model = new List<Person>;
     //this is where we bind the model to the view     
     result = PartialView(“SecureTrip/SecurePassport”, model);
     
     // and finally return the whole package + send to client
     return result; 
}
  // GET: /Person/Details/5
  public ActionResult Details(string personId)
  {
     var model = new Person(personId);
     result = PartialView(“SecureTrip/SecurePassport”, model);
     return result;
   }
}

This controller is intelligently interpreting arguments out of the request from the client, and combining the views with models to create fully formed responses back. Before it can combine the model information with the view, it has to populate the model — which happens in the model file:

Model (example — Person.cs)

The model is just a data object with a constructor. When you call on the model from the controller, the code here will run and build the model object using the arguments that you pass in. If you need to get data from the database to populate the model, all of that would happen here. Here’s a sample model file.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace People.Models
 {
   public class Person
   {
   public int Id { get; set; }
   public string Name { get; set; }
   public int Age { get; set; }
   public string Street { get; set; }
   public string City { get; set; }
   public string State { get; set; }
   public int Zipcode { get; set; }
   }
   public Person(int Id , string Name, int Age, string Street, 
   string City, string State, int Zipcode)
   {
   Id = Id;
   Name = Name;
   Age = Age;
   Street = Street
   City = City;
   State = State;
   Zipcode = Zipcode;
  }
 }

You can see the two separate sections of the file — the class that actually defines the properties of the model and then the constructor which uses arguments to build an instance of this model class. When the model has been populated hree, it will be returned to the controller and combined with a View:

View (example — person.cshtml)

The view is just a layout file that has placeholder for model data. According to the .NET MVC docs, there should always be only one model for each view. This will ensure that all of the model fields map exactly to the views, and that you are thinking carefully about not sending too much data to the view.

@model EFTours.Web.Application.Models.SecureStage
@using Sitecore.Resources.Media
<div class=”wrapper page-wrapper”>
  <div class=”page-header-text>
  <h1> @Model.Name</h1>
  <div class=”subheader”>
   @Model.Age
  </div>
 
  <div class=”subheader”>
   @Model.Street
  </div>
  <div class=”subheader”>
   @Model.City
  </div>
  <div class=”subheader”>
   @Model.State
  </div>
  </div>
</div>

Together these three files build the foundation of a .NET MVC application.

Obviously you will quickly add complexity on top of this framework — but there is a simplicity to the MVC model that allows you to do a lot with only a few files. You will see this pattern across many frameworks including rails, express for Node, and even microcosms of it in front end frameworks like angular and ReactJS.

Have fun writing .NET!