What is MVVM pattern?

MVVM stands for Model-View-View Model. This pattern supports two-way data binding between view and View model. This enables automatic propagation of changes, within the state of view model to the View. Typically, the view model uses the observer pattern to notify changes in the view model to model.

1. Model - The Model represents a set of classes that describes the business logic and data. It also defines business rules for data means how the data can be changed and manipulated.

2. View - The View represents the UI components like CSS, jQuery, html etc. It is only responsible for displaying the data that is received from the controller as the result. This also transforms the model(s) into UI.

3. View Model - The View Model is responsible for exposing methods, commands, and other properties that helps to maintain the state of the view, manipulate the model as the result of actions on the view, and trigger events in the view itself.

This pattern is commonly used by the WPF, Silverlight, Caliburn, nRoute etc.

Key Points about MVVM Pattern

1. User interacts with the View.

2. There is many-to-one relationship between View and ViewModel means many View can be mapped to one ViewModel.

3. View has a reference to ViewModel but View Model has no information about the View.

4. Supports two-way data binding between View and ViewModel.

Complete flow of MVC?

To understand the the power of MVC you need to understand the Life Cycle, I could go in to great detail about the ASP.NET Life cycle, but I have found a number of very good articles already providing good amount of information on the Life Cycle.  Before going to the pages here is a simple flow diagram of the steps the MVC process goes through

Below are the steps how control flows in MVC (Model, view and controller) architecture:-

1. All end user requests are first sent to the controller.
2. The controller depending on the request decides which model to load. The controller loads the model and attaches the model with the appropriate view.
3. The final view is then attached with the model data and sent as a response to the end user on the browser.

ASP.NET MVC represents a simpler, more testable framework for developing web applications in Microsoft .NET.When people reference the acronym MVC, they are most likely referring to the software design pattern. Model-View-Controller is a user interface design pattern that separates display , data, and flow of control into different objects  The view represents the screen and user input, the controller acts to coordinate the input/output from the view, and the model is the data structure that is passed between the two as shown in below figure 1. The pattern helps separate the display, interaction, and data logic.

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 Studio Express 2012/2010

Visual Studio Express is a free version of Microsoft Visual Studio. Visual Studio Express is a development tool tailor made for MVC (and Web Forms). Visual Studio Express contains:

1. MVC and Web Forms
2. Drag-and-drop web controls and web components
3. A web server language (Razor using VB or C#)
4. A web server (IIS Express)
5. A database server (SQL Server Compact)
6. A full web development framework (ASP.NET)

If you install Visual Studio Express, you will get more benefits from this tutorial. If you want to install Visual Studio Express, click on one of these links: Visual Web Developer 2012 (If you have Windows 7 or Windows 8) Visual Web Developer 2010 (If you have Windows Vista or XP)

	After you have installed Visual Studio Express the first time, it pays to run the installation one more time, to install fixes and service packs. Just click on the link once more.

To learn ASP.NET MVC, we will Build an Internet Application

Part I: Creating the Application

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:

1. Open the Visual C# templates
2. Select the template ASP.NET MVC 3 Web Application
3. Set the project name to MvcDemo
4. Set the disk location to something like c:\shabirhakim.net_demo
5. Click OK

When the New Project Dialog Box opens

1. Select the Internet Application template
2. Select the Razor Engine
3. Select HTML5 Markup
4. Click OK

Visual Studio Express will create a project much like this:
 

We will explore the content of the files and folders in the next chapter of this tutorial.

Part II: Exploring the Application

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. If your application is using data from server or any other source , you can remove this. This folder is required when you want database file independently reside in your application.

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.like shown below with sample/default classes

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.

Part III: Adding Styles and a Consistent Look (Layout).

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("articles", "Index", "articles")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
</ul>

<section id="main">
@RenderBody()
<p>Copyright shabirhakim.net 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.

HTML helpers are methods you can invoke on the Html property of a view. You also have access to URL helpers (via the Url property), and Ajax helpers (via the Ajax property). All these helpers have the same goal: to make views easy to author. The URL helper is also available from within the controller. Most of the helpers, particularly the HTML helpers, output HTML markup. For example, the BeginForm helper you saw earlier is a helper you can use to build a robust form tag for your search form, but without using lines and lines of code:

 @using (Html.BeginForm("Search", "Home", FormMethod.Get)) {
   <input name="q" type="text" />
  <input type="submit" value="Search" /> } 

Chances are the BeginForm helper will output the same markup you had previously when you first implemented the search form. However, behind the scenes the helper is coordinating with the routing engine to generate a proper URL, so the code is more resilient to changes in the application deployment location. Note the BeginForm helper outputs both the opening <form> and the closing </form>. The helper emits the opening tag during the call to BeginForm, and the call returns an object implementing IDisposable. When execution reaches the closing curly brace of the using statement in the view, the helper emits the closing tag, thanks to the implicit call to Dispose. The using trick makes the code simpler and elegant. For those who fi nd it completely distasteful, you can also use the following approach, which provides a bit of symmetry:

@{Html.BeginForm("Search", "Home", FormMethod.Get);}
   <input name="q" type="text" />
<input type="submit" value="Search" /> } 
@{Html.EndForm();}

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.

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. You will learn more about views in a later chapter of this tutorial. Part IV: Adding a Controller.

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: a URL request like "http://www.shabirhakim.net/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.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.

Part V: Adding Views for Displaying the Application.

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

 

Each controller folder contains a view file for each action method, and the file is named the same as the action method. This provides the basis for how views are associated to an action method. The view selection logic looks for a view with the same name as the action within the /Views/ ControllerName directory (the controller name without the Controller suffi x in this case). The view selected in this case would be /Views/Home/Index.cshtml.

As with most things in ASP.NET MVC, you can override this convention. Suppose that you want the Index action to render a different view. You could supply a different view name, as follows:

public ActionResult Index() 
 { return View("NotIndex"); } 
   

In this case, it will still look in the /Views/Home directory, but choose NotIndex.cshtml as the view. In some situations, you might even want to specify a view in a completely different directory structure. You can use the tilde syntax to provide the full path to the view, as follows:

 public ActionResult Index()
 { return View("~/Views/Example/Index.cshtml");
  } 

When using the tilde syntax, you must supply the file extension of the view because this bypasses the view engine’s internal lookup mechanism for finding views.

ADDING A VIEW

 In the “View Basics” and “View Conventions” sections you learned how a controller specifi es a view. But how does that view get created in the first place? You could certainly create a file by hand and add it to your Views directory, but the ASP.NET MVC tooling for Visual Studio makes adding a view using the Add View dialog very easy. The easiest way to display the Add View dialog is to right-click in an action method. You can use any action method you’d like; for this example you can just add a new action method named Edit and then create a view for that action using the Add View dialog. Begin by adding an Edit action method to the HomeController in an MVC 5 application that contains the following code:

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

Next, launch the Add View dialog by right-clicking an action method and selecting Add View (see Figure 3-4)

This brings up the Add View dialog, as shown in Figure 3-5. The following list describes each menu item in detail: ➤ View name: When launching this dialog from the context of an action method, the view name is prepopulated using the name of the action method. Naturally, the view name is required. ➤ Template: After you select a type, you can also choose a scaffold template. These templates use the Visual Studio templating system to generate a view based on the model type selected. The templates are shown in Figure 3-6 and explained in Table 3-1.

-

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 shabirhakim.net</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.

SUCESS

Great. You have created your first MVC Application

Adding a Database.

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:

1. Right-click the App_Data folder in the Solution Explorer window
2. Select Add, New Item
3. Select SQL Server Compact Local Database *
4. Name the database Users.sdf.
5. 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. 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

 

Adding Database Records

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

 

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:

1. In the Solution Explorer, right-click the Models folder, and select Add and Class.
2. Name the class articleDB.cs, and click Add.

 

Adding a Database Controller

The database controller needed for this tutorial can be created with these simple steps:

1. Re-Build your project: Select Debug, and then Build MvcDemo from the menu.
2. In the Solution Explorer, right-click the Controllers folder, and select Add and Controller
3. Set controller name to articlesController
4. Select template: Controller with read/write actions and views, using Entity Framework
5. Select model class: articleDB (MvcDemo.Models)
6. Select data context class: articleDBContext (MvcDemo.Models)
7. Select views Razor (CSHTML)
8. Click Add

Visual Web Developer will create the following files:

1. A articlesController.cs file in the Controllers folder
2. A articles folder in the Views folder

Adding Database Views

The following files are automatically created in the articles folder:

1. Create.cshtml
2. Delete.cshtml
3. Details.cshtml
4. Edit.cshtml
5. Index.cshtml

Adding a Connection String

Congratulations

Congratulations. You have added your first MVC data model to your application. Now you can click on the "articles" 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 are used to modify HTML output

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: