ASP.NET MVC Tutorial

ASP.NET is a development framework for building web pages and web sites with HTML, CSS, JavaScript and server scripting.
ASP.NET supports three different development models:
Web Pages, MVC (Model View Controller), and Web Forms.

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.

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 handles 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 a 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:
http://www.microsoft.com/web/gallery/install.aspx?appid=VWDorVS2010SP1Pack

What We Will Build

We will build an Internet application that supports adding, editing, deleting, and listing of information stored in a database.

What We Will Do

Visual Web Developer offers different templates for building web applications.
We will use Visual Web Developer to create an empty MVC Internet application with HTML5 markup.
When the empty Internet application is created, we will gradually add code to the application until it is fully finished. We will use C# as the programming language, and the newest Razor server code markup.
Along the way we will explain the content, the code, and all the components of the application.

Creating the Web Application

If you have Visual Web Developer installed, start Visual Web Developer and select New Project. Otherwise just read and learn.

In the New Project dialog box:

• Open the Visual C# templates
• Select the template ASP.NET MVC 3 Web Application
• Set the project name to MvcDemo
• Set the disk location to something like c:\w3schools_demo
• Click OK

When the New Project Dialog Box opens:

• Select the Internet Application template
• Select the Razor Engine
• Select HTML5 Markup
• Click OK

Visual Studio Express will create a project much like this:

MVC Folders

A typical ASP.NET MVC web application has the following folder content:

Application information Properties References Application folders App_Data Folder Content Folder Controllers Folder Models Folder Scripts Folder Views Folder Configuration files Global.asax packages.config Web.config

The folder names are equal in all MVC applications. The MVC framework is based on default naming. Controllers are in the Controllers folder, Views are in the Views folder, and Models are in the Models folder. You don't have to use the folder names in your application code.
Standard naming reduces the amount of code, and makes it easier for developers to understand MVC projects.
Below is a brief summary of the content of each folder:

The App_Data Folder

The App_Data folder is for storing application data.
We will add an SQL database to the App_Data folder, later in this tutorial.

The Content Folder

The Content folder is used for static files like style sheets (css files), icons and images.
Visual Web Developer automatically adds a themes folder to the Content folder. The themes folder is filled with jQuery styles and pictures. In this project you can delete the themes folder.
Visual Web Developer also adds a standard style sheet file to the project: the file Site.css in the content folder. The style sheet file is the file to edit when you want to change the style of the application.

We will edit the style sheet file (Site.css) file in the next chapter of this tutorial.

The Controllers Folder

The Controllers folder contains the controller classes responsible for handling user input and responses.
MVC requires the name of all controller files to end with "Controller".
Visual Web Developer has created a Home controller (for the Home and the About page) and an Account controller (for Login pages):

We will create more controllers later in this tutorial.

The Models Folder

The Models folder contains the classes that represent the application models. Models hold and manipulate application data.
We will create models (classes) in a later chapter of this tutorial.

The Views Folder

The Views folder stores the HTML files related to the display of the application (the user interfaces).
The Views folder contains one folder for each controller.
Visual Web Developer has created an Account folder, a Home folder, and a Shared folder (inside the Views folder).
The Account folder contains pages for registering and logging in to user accounts.
The Home folder is used for storing application pages like the home page and the about page.
The Shared folder is used to store views shared between controllers (master pages and layout pages).

We will edit the layout files in the next chapter of this tutorial.

The Scripts Folder

The Scripts folder stores the JavaScript files of the application.
By default Visual Web Developer fills this folder with standard MVC, Ajax, and jQuery files:

Note: The files named "modernizr" are JavaScript files used for supporting HTML5 and CSS3 features in the application.

Adding a Layout

The file _Layout.cshtml represent the layout of each page in the application. It is located in the Shared folder inside the Views folder.
Open the file and swap the content with this:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")"></script>
<script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")"></script>
</head>
<body>
<ul id="menu">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("Movies", "Index", "Movies")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
</ul>
<section id="main">
@RenderBody()
<p>Copyright W3schools 2012. All Rights Reserved.</p>
</section>
</body>
</html>

HTML Helpers

In the code above, HTML helpers are used to modify HTML output:
@Url.Content() - URL content will be inserted here.
@Html.ActionLink() - HTML link will be inserted here.
You will learn more about HTML helpers in a later chapter of this tutorial.

Razor Syntax

In the code above, the code marked red are C# using Razor markup.
@ViewBag.Title - The page title will be inserted here.
@RenderBody() - The page content will be rendered here.
You can learn about Razor markup for both C# and VB (Visual Basic) in our Razor tutorial.

Adding Styles

The style sheet for the application is called Site.css. It is located in the Content folder.
Open the file Site.css and swap the content with this:

body
{
font: "Trebuchet MS", Verdana, sans-serif;
background-color: #5c87b2;
color: #696969;
}
h1
{
border-bottom: 3px solid #cc9900;
font: Georgia, serif;
color: #996600;
}
#main
{
padding: 20px;
background-color: #ffffff;
border-radius: 0 4px 4px 4px;
}
a
{
color: #034af3;
}
/* Menu Styles ------------------------------*/
ul#menu
{
padding: 0px;
position: relative;
margin: 0;
}
ul#menu li
{
display: inline;
}
ul#menu li a
{
background-color: #e8eef4;
padding: 10px 20px;
text-decoration: none;
line-height: 2.8em;
/*CSS3 properties*/
border-radius: 4px 4px 0 0;
}
ul#menu li a:hover
{
background-color: #ffffff;
}
/* Forms Styles ------------------------------*/
fieldset
{
padding-left: 12px;
}
fieldset label
{
display: block;
padding: 4px;
}
input[type="text"], input[type="password"]
{
width: 300px;
}
input[type="submit"]
{
padding: 4px;
}
/* Data Styles ------------------------------*/
table.data
{
background-color:#ffffff;
border:1px solid #c3c3c3;
border-collapse:collapse;
width:100%;
}
table.data th
{
background-color:#e8eef4;
border:1px solid #c3c3c3;
padding:3px;
}
table.data td
{
border:1px solid #c3c3c3;
padding:3px;
}

The _ViewStart File

The _ViewStart file in the Shared folder (inside the Views folder) contains the following content:

@{Layout = "~/Views/Shared/_Layout.cshtml";}

This code is automatically added to all views displayed by the application.
If you remove this file, you must add this line to all views.

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):

Web servers will normally map incoming URL requests directly to disk files on the server. For example: an URL request like "http://www.dotnetgig.blogspot.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.
Swap the content of the HomeController.cs file with this:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

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

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

The Controller Views

The files Index.cshtml and About.cshtml in the Views folder defines the ActionResult views Index() and About() in the controller.

The Views Folder

The Views folder stores the files (HTML files) related to the display of the application (the user interfaces). 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.
Visual Web Developer has created an Account folder, a Home folder, and a Shared folder (inside the Views folder).
The Account folder contains pages for registering and logging in to user accounts.
The Home folder is used for storing application pages like the home page and the about page.
The Shared folder is used to store views shared between controllers (master pages and layout pages).
 

ASP.NET File Types

The following HTML file types can be found in the Views Folder:

File Type	Extention
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

The file Index.cshtml represents the Home page of the application. It is the application's default file (index file).
Put the following content in the file:

@{ViewBag.Title = "Home Page";}

<h1>Welcome to W3Schools</h1>

<p>Put Home Page content here</p>

The About File

The file About.cshtml represent the About page of the application.
Put the following content in the file:

@{ViewBag.Title = "About Us";}

<h1>About Us</h1>

<p>Put About Us content here</p>

Run the Application

Select Debug, Start Debugging (or F5) from the Visual Web Developer menu.
Your application will look like this:

Click on the "Home" tab and the "About" tab to see how it works.

Congratulations

Congratulations. You have created your first MVC Application.
Note: You cannot click on the "Movies" tab yet. We will add code for the "Movies" tab in the next chapters of this tutorial.

Creating the Database

Visual Web Developer comes with a free SQL database called SQL Server Compact.
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 Compact Local Database *
• Name the database Movies.sdf.
• Click the Add button

* If SQL Server Compact Local Database is not an option, you have not installed SQL Server Compact on your computer. Install it from this link: SQL Server Compact
Visual Web Developer automatically creates the database in the App_Data folder.

Adding a Database Table

Double-clicking the Movies.sdf 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 Create Table.
Create the following columns:

Column	Type	Allow Nulls
ID	int (primary key)	No
Title	nvarchar(100)	No
Director	nvarchar(100)	No
Date	datetime	No

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, click on the column name (ID) and select Primary Key. Also, in the Column Properties window, set the Identity property to True:

When you have finished creating the table columns, save the table and name it MovieDBs.
Note:
We have deliberately named the table "MovieDBs" (ending with s). In the next chapter, you will see the name "MovieDB" used for the data model. It looks strange, but this is the naming convention you have to use to make the controller connect to the database table.

Adding Database Records

You can use Visual Web Developer to add some test records to the movie database.
Double-click the Movies.sdf file in the App_Data folder.
Right-click the MovieDBs table in the Database Explorer window and select Show Table Data.
Add some records:

ID	Title	Director	Date
1	Psycho	Alfred Hitchcock	01.01.1960
2	La Dolce Vita	Federico Fellini	01.01.1960

Note: The ID column is updated automatically. You should not edit it.

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"/>

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 security.
AccountModels contains a LogOnModel, a ChangePasswordModel, and a RegisterModel.

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 MovieDB.cs, and click Add.
• Edit the class:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data.Entity;

namespace MvcDemo.Models
{
public class MovieDB
{
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<MovieDB> Movies { get; set; }
}
}

Note:
We have deliberately named the model class "MovieDB". In the previous chapter, you saw the name "MovieDBs" (endig with s) used for the database table. It looks strange, but this is the naming convention you have to use to make the model connect to the database table.

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: MovieDB (McvDemo.Models)
• Select data context class: MovieDBContext (McvDemo.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

Adding Database Views

The following files are automatically created in the Movies folder:

• Create.cshtml
• Delete.cshtml
• Details.cshtml
• Edit.cshtml
• Index.cshtml

Congratulations

Congratulations. You have added your first MVC data model to your application.
Now you can click on the "Movies" tab :-)
 

MVC Application Security

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:

The Change Password Model

public class ChangePasswordModel
{

[Required]
[DataType(DataType.Password)]
[Display(Name = "Current password")]
public string OldPassword { get; set; }

[Required]
[StringLength(100, ErrorMessage = "The {0} must be at least {2}      characters long.", MinimumLength = 6)]
[DataType(DataType.Password)]
[Display(Name = "New password")]
public string NewPassword { get; set; }

[DataType(DataType.Password)]
[Display(Name = "Confirm new password")]
[Compare("NewPassword", ErrorMessage = "The new password and confirmation password do not match.")]
public string ConfirmPassword { get; set; }

}

The Logon Model

public class LogOnModel
{

[Required]
[Display(Name = "User name")]
public string UserName { get; set; }

[Required]
[DataType(DataType.Password)]
[Display(Name = "Password")]
public string Password { get; set; }

[Display(Name = "Remember me?")]
public bool RememberMe { get; set; }

}

The Register Model

public class RegisterModel
{

[Required]
[Display(Name = "User name")]
public string UserName { get; set; }

[Required]
[DataType(DataType.EmailAddress)]
[Display(Name = "Email address")]
public string Email { get; set; }

[Required]
[StringLength(100, ErrorMessage = "The {0} must be at least {2} characters long.", MinimumLength = 6)]
[DataType(DataType.Password)]
[Display(Name = "Password")]
public string Password { get; set; }

[DataType(DataType.Password)]
[Display(Name = "Confirm password")]
[Compare("Password", ErrorMessage = "The password and confirmation password do not match.")]
public string ConfirmPassword { get; set; }
}

HTML Helpers

With MVC, HTML helpers are much like traditional ASP.NET Web Form controls.
Just like web form controls in ASP.NET, HTML helpers are used to modify HTML. But HTML helpers are more lightweight. Unlike Web Form controls, an HTML helper does not have an event model and a view state.
In most cases, an HTML helper is just a method that returns a string.
With MVC, you can create your own helpers, or use the built in HTML helpers.

Standard HTML Helpers

MVC includes standard helpers for the most common types of HTML elements, like HTML links and HTML form elements.

HTML Links

The easiest way to render an HTML link in is to use the HTML.ActionLink() helper.
With MVC, the Html.ActionLink() does not link to a view. It creates a link to a controller action.
Razor Syntax:

@Html.ActionLink("About this Website", "About")

ASP Syntax:

<%=Html.ActionLink("About this Website", "About")%>

The first parameter is the link text, and the second parameter is the name of the controller action.
The Html.ActionLink() helper above, outputs the following HTML:

<a href="/Home/About">About this Website</a>

The Html.ActionLink() helper as several properties:

Property	Description
.linkText	The link text (label)
.actionName	The target action
.routeValues	The values passed to the action
.controllerName	The target controller
.htmlAttributes	The set of attributes to the link
.protocol	The link protocol
.hostname	The host name for the link
.fragment	The anchor target for the link

Note: You can pass values to a controller action. For example, you can pass the id of a database record to a database edit action:
Razor Syntax C#:

@Html.ActionLink("Edit Record", "Edit", new {Id=3})

Razor Syntax VB:

@Html.ActionLink("Edit Record", "Edit", New With{.Id=3})

The Html.ActionLink() helper above, outputs the following HTML:

<a href="/Home/Edit/3">Edit Record</a>

HTML Form Elements

There following HTML helpers can be used to render (modify and output) HTML form elements:

• BeginForm()
• EndForm()
• TextArea()
• TextBox()
• CheckBox()
• RadioButton()
• ListBox()
• DropDownList()
• Hidden()
• Password()

ASP.NET Syntax C#:
<%= Html.ValidationSummary("Create was unsuccessful. Please correct the errors and try again.") %>
<% using (Html.BeginForm()){%>
<p>
<label for="FirstName">First Name:</label>
<%= Html.TextBox("FirstName") %>
<%= Html.ValidationMessage("FirstName", "*") %>
</p>
<p>
<label for="LastName">Last Name:</label>
<%= Html.TextBox("LastName") %>
<%= Html.ValidationMessage("LastName", "*") %>
</p>
<p>
<label for="Password">Password:</label>
<%= Html.Password("Password") %>
<%= Html.ValidationMessage("Password", "*") %>
</p>
<p>
<label for="Password">Confirm Password:</label>
<%= Html.Password("ConfirmPassword") %>
<%= Html.ValidationMessage("ConfirmPassword", "*") %>
</p>
<p>
<label for="Profile">Profile:</label>
<%= Html.TextArea("Profile", new {cols=60, rows=10})%>
</p>
<p>
<%= Html.CheckBox("ReceiveNewsletter") %>
<label for="ReceiveNewsletter" style="display:inline">Receive Newsletter?</label>
</p>
<p>
<input type="submit" value="Register" />
</p>
<%}%>

Publish Your Application Without Using Visual Web Developer

An ASP.NET MVC application can be published to a remote server by using the Publish commands in WebMatrix ,Visual Web Developer, or Visual Studio.
This function copies all your application files, controllers, models, images, and all the required DLL files for MVC, Web Pages, Razor, Helpers, and SQL Server Compact (if a database is used).
Sometimes you don't want to use this option. Maybe your hosting provider only supports FTP? Maybe you already have a web site based on classic ASP? Maybe you want to copy the files yourself? Maybe you want to use Front Page, Expression Web, or some other publishing software?
Will you get a problem? Yes, you will. But you can solve it.
To perform a web copy, you have to know how to include the right files, what DDL files to copy, and where store them.
Follow these steps:

1. Use the Latest Version of ASP.NET

Before you continue, make sure your hosting computer runs the latest version of ASP.NET (4.0).

2. Copy the Web Folders

Copy your website (all folders and content) from your development computer to an application folder on your remote hosting computer (server).
If your App_Data folder contains test data, don't copy the App_Data folder (see SQL Data below).

3. Copy the DLL Files

On the remote server create a bin folder in the root of your application. (If you have installed Helpers, you already have a bin folder)
Copy everything from your folders:
C:\Program Files (x86)\Microsoft ASP.NET\ASP.NET Web Pages\v1.0\Assemblies
C:\Program Files (x86)\Microsoft ASP.NET\ASP.NET MVC 3\Assemblies
to your application's bin folder on the remote server.

4. Copy the SQL Server Compact DLL Files

If your application has a SQL Server Compact database (an .sdf file in App_Data folder), you must copy the SQL Server Compact DLL files:
Copy everything from your folder:
C:\Program Files (x86)\Microsoft SQL Server Compact Edition\v4.0\Private
to your application's bin folder on the remote server.
Create (or edit) the Web.config file for your application:

Example C#

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.data>
<DbProviderFactories>
<remove invariant="System.Data.SqlServerCe.4.0" />

<add invariant="System.Data.SqlServerCe.4.0"
name="Microsoft SQL Server Compact 4.0"
description=".NET Framework Data Provider for Microsoft SQL Server Compact" type="System.Data.SqlServerCe.SqlCeProviderFactory, System.Data.SqlServerCe, Version=4.0.0.1,Culture=neutral, PublicKeyToken=89845dcd8080cc91" />

</DbProviderFactories>
</system.data>
</configuration>

5. Copy SQL Server Compact Data

Do you have .sdf files in your App_Data folder that contains test data?
Do you want to publish the test data to the remote server?
Most likely not.
If you have to copy the SQL data files (.sdf files), you should delete everything in the database, and then copy the empty .sdf file from your development computer to the server.
THAT'S IT. GOOD CODING !