ASP.

NET MVC Tutorial

Previous Next Chapter

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

Web Pages

MVC

Web Forms

The MVC Programming Model

MVC is one of three [Link] 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 [Link] (Web Forms). It is a lightweight, highly testable framework, integrated with all existing [Link] 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:

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 ([Link])

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.

[Link] MVC References

At the end of this tutorial you will find a complete [Link] MVC reference.

[Link] MVC - Internet Application

Previous Next Chapter
To learn [Link] 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:

Open the Visual C# templates Select the template [Link] 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:

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

[Link] MVC - Application Folders

Previous

Next Chapter

To learn [Link] MVC, we are Building an Internet application Part II: Exploring the Application Folders

MVC Folders
A typical [Link] 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 [Link] [Link] [Link] 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 [Link] 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 ([Link]) 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.

[Link] MVC - Styles and Layout

Previous Next Chapter

To learn [Link] MVC, we are Building an Internet 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>@[Link]</title> <link href="@[Link]("~/Content/[Link]")" rel="stylesheet" type="text/css" /> <script src="@[Link]("~/Scripts/[Link]")"></script> <script src="@[Link]("~/Scripts/[Link]")"></script> </head> <body> <ul id="menu"> <li>@[Link]("Home", "Index", "Home")</li> <li>@[Link]("Movies", "Index", "Movies")</li> <li>@[Link]("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: @[Link]() - URL content will be inserted here. @[Link]() - 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. @[Link] - 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 [Link]. It is located in the Content folder. Open the file [Link] 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 ------------------------------*/ [Link] { background-color:#ffffff; border:1px solid #c3c3c3; border-collapse:collapse; width:100%; } [Link] th { background-color:#e8eef4;

border:1px solid #c3c3c3; padding:3px; } [Link] 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.

[Link] MVC - Controllers

Previous Next Chapter

To learn [Link] MVC, we are Building an Internet Application. 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: [Link] (for the Home and About pages) and [Link] (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 "[Link] will map directly to the file "[Link]" 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 [Link], defines the two controls Index and About. Swap the content of the [Link] file with this:

using using using using using

System; [Link]; [Link]; [Link]; [Link];

namespace [Link] {

public class HomeController : Controller { public ActionResult Index() {return View();} public ActionResult About() {return View();} } }

The Controller Views

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

[Link] MVC - Views

Previous Next Chapter

To learn [Link] MVC, we are Building an Internet Application. 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).

[Link] File Types

The following HTML file types can be found in the Views Folder: File Type Plain HTML Classic ASP Classic [Link] [Link] Razor C# Extention .htm or .html .asp .aspx .cshtml

[Link] Razor VB

.vbhtml

The Index File

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

@{[Link] = "Home Page";} <h1>Welcome to W3Schools</h1> <p>Put Home Page content here</p>

The About File

The file [Link] represent the About page of the application. Put the following content in the file:

@{[Link] = "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.