ASP.NET MVC

ASP.NET MVC - Internet Application

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:

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

 

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

To learn ASP.NET MVC, we are Building an Internet application

Part II: Exploring the Application Folders

---

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.

To learn ASP.NET 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>@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.

You will learn more about views in a later chapter of this tutorial.

To learn ASP.NET 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: 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.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 andAbout.

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();}
}
}

To learn ASP.NET 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).

 

---

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 toNageswar Content</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.