2012/03/23

The MVC Programming Model

MVC is one of three ASP.NET programming models.
MVC is a framework for building web applications using a MVC (Model View Controller) design:
  • The Model represents the application core (for instance a list of database records).
  • The View displays the data (the database records).
  • The Controller handles the input (to the database records).
The MVC model also provides full control over HTML, CSS, and JavaScript.

MVC
The MVC model defines web 
applications with 3 logic layers:

The business layer (Model logic)
The display layer (View logic)
The input control (Controller logic)
The Model is the part of the application that handles the logic for the application data.
Often model objects retrieve data (and store data) from a database.
The View is the parts of the application that handles the display of the data.
Most often the views are created from the model data.
The Controller is the part of the application that handle user interaction.
Typically controllers read data from a view, control user input, and send input data to the model.
The MVC separation helps you manage complex applications, because you can focus on one aspect a time. For example, you can focus on the view without depending on the business logic. It also makes it easier to test an application.
The MVC separation also simplifies group development. Different developers can work on the view, the controller logic, and the business logic in parallel.

Web Forms vs MVC

The MVC programming model is an lighter alternative to traditional ASP.NET (Web Forms). It is a lightweight, highly testable framework, integrated with all existing ASP.NET features, such as Master Pages, Security, and Authentication.

Visual Web Developer

Visual Web Developer is the free version of Microsoft Visual Studio.
Visual Web Developer is a development tool tailor made for MVC (and Web Forms).
Visual Web Developer contains:
  • MVC and Web Forms
  • Drag-and-drop web controls and web components
  • A web server language (Razor using VB or C#)
  • A web server (IIS Express)
  • A database server (SQL Server Compact)
  • A full web development framework (ASP.NET)
If you install Visual Web Developer, you will get more benefits from this tutorial.
If you want to install Visual Web Developer, click on this link:

The Views Folder

The Views Folder stores the files (HTML files) related to the display of the application (user interface templates). These files may have the extensions html, asp, aspx, cshtml, and vbhtml, depending on the language content.
The Views folder contains one folder for each controller. In our example these are the folders Homeand Account.
It also contains a folder named Shared. This folder contains views shared between many controllers (for example master pages and layout pages):
Folder

ASP.NET File Types

The following HTML file types can be found in the Views Folder:
File TypeExtention
Plain HTML.htm or .html
Classic ASP.asp
Classic ASP.NET.aspx
ASP.NET Razor C#.cshtml
ASP.NET Razor VB.vbhtml

The Index File and About File

In our example Index.cshtml represent the Home page of the application. It is the application's default file (index file):
@{ViewBag.Title = "Home Page";}

<h2>@ViewBag.Message</h2>

<p>Put content here</p>
About.cshtml represent the About page of the application:
@{ViewBag.Title = "About Us";}

<h2>About</h2>

<p>Put content here</p>
 
Controllers are the classes (files) that handle input and output.

The Controllers Folder

The Controllers Folder contains the controller classes responsible for handling user input and responses.
MVC requires the name of all controllers to end with "Controller".
In our example, Visual Web Developer has created the following files: HomeController.cs (for the Home and About pages) and AccountController.cs (For the Log On pages):
Folder
Web servers will normally map incoming URL requests directly to disk files on the server. For example: an URL request like "http://www.w3schools.com/default.asp" will map directly to the file "default.asp" at the root directory of the server.
The MVC framework maps differently. MVC maps URLs to methods. These methods are in classes called "Controllers".
Controllers are responsible for processing incoming requests, handling input, saving data, and sending a response to send back to the client.

The Home controller

The controller file in our application HomeController.cs, defines the two controls Index and About:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace movieapp.Controllers
{
public class HomeController : Controller
{

// Home Page
public ActionResult Index()
{
ViewBag.Message = "Welcome to ASP.NET MVC!";
return View();
}

// About Page
public ActionResult About()
{
return View();
}

}
}


The Controller Views

The files Index.cshtml and About.cshtml in the Views folder defines the view of the controller.
The file Layout.cshtml in the Shared folder (in the Views folder) defines the layout of the view.


 
 
 

MVC Models

The MVC Model contains all application logic (business logic, validation logic, and data access logic), except pure view and controller logic.
With MVC, models both hold and manipulate application data.

The Models Folder

The Models Folder contains the classes that represent the application model.
Visual Web Developer automatically creates an AccountModels.cs file that contains the models for application authentication.
AccountModels contains a LogOnModel, a ChangePasswordModel, and a RegisterModel:
Model

Creating the Database

Visual Web Developer comes with a free SQL database called SQL Server Express.
The database needed for this tutorial can be created with these simple steps:
  • Right-click the App_Data folder in the Solution Explorer window.
  • Select Add, New Item.
  • Select SQL Server Database, and name the database movies.mdf.
  • Click the Add button.
Visual Web Developer automatically creates the database in the App_Data folder.
Note: In this tutorial it is expected that you have some knowledge about SQL databases. If you want to study this topic first, please visit our SQL Tutorial.

Adding a Database Table

Double-clicking the movies.mdf file in the App_Data folder will open a Database Explorer window.
To create a new table in the database, right-click the Tables folder, and select Add New Table.
In the database editor window, you can right-click in the "Column Name" field and select "Insert Column" to create table columns.
Create the following columns:
ColumnTypeAllow Nulls
Idint (primary key)false
Titlenvarchar(100)false
Directornvarchar(100)false
Datedatetimefalse
Columns explained:
Id is an integer (whole number) used to identify each record in the table.
Title is a 100 character text column to store the name of the movie.
Director is a 100 character text column to store the director's name.
Date is a datetime column to store the release date of the movie.
After creating the columns described above, you must make the Id column the table's primary key (record identifier). To do this, right-click on the column name (Id) and select Set Primary Key. Also, in the Column Properties window, expand the Identity Specification and change the Is Identityproperty to Yes:
Databse
When you have finished creating the table columns, save the table and name it movies.

Adding Database Records

You can use Visual Web Developer to add some test records to the movie database.
Double-click the movies.mdf file in the App_Data folder.
Right-click the movies table in the Database Explorer window and select Show Table Data.
Add some records:
IdTitleDirectorDate
1PsychoAlfred Hitchcock01.01.1960
La Dolce VitaFederico Fellini01.01.1960
Note: The Id column is updated automatically. You cannot edit it.

Adding a Database Model

The database model needed for this tutorial can be created with these simple steps:
  • In the Solution Explorer, right-click the Models folder, and select Add and Class.
  • Name the class Movie.cs, and click Add.
  • Edit the Movie class:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data.Entity;

namespace movieapp.Models
{
public class Movie
{
public int Id { get; set; }
public string Title { get; set; }
public string Director { get; set; }
public DateTime Date { get; set; }
}
public class MovieDBContext : DbContext
{
public DbSet<Movie> Movies { get; set; }
}
}


Adding a Connection String

Add the following element to the <connectionStrings> element in your Web.config file:

<add name="MovieDBContext"
connectionString="Data Source=|DataDirectory|Movies.sdf"
providerName="System.Data.SqlServerCe.4.0"/>


Adding a Database Controller

The database controller needed for this tutorial can be created with these simple steps:
  • In the Solution Explorer, right-click the Controllers folder, and select Add and Controller
  • Set controller name to MoviesController
  • Select template: Controller with read/write actions and views, using Entity Framework
  • Select model class: Movie (movieapp.Models)
  • Select data context class: MovieDBContext (movieapp.Models)
  • Select views Razor (CSHTML)
  • Click Add
Visual Web Developer will create the following files:
  • A MoviesController.cs file in the Controllers folder
  • A Movies folder in the Views folder
The following files are created in the Movies folder:
  • Create.cshtml
  • Details.cshtml
  • Edit.cshtml
  • Index.cshtml

Running the Application

Test-run the application by selecting Start Debugging or simply F5.
Add movies to the url in your browser (like http://localhost:49344/movies) and see your movie application in work.

0 comments:

Post a Comment