Exercise 4: Creating a View
So far you have been returning strings from controller actions. Although that’s a useful way of understanding how controllers work, it’s not how you’d want to build a real web application. Views are components that provide a better approach for generating HTML back to the browser with the use of template files.
In this exercise you will learn how to add a MasterPage to setup a template for common HTML content, a StyleSheet to enhance the look and feel of the site and finally a View template to enable HomeController to return HTML.
Task 1 – Adding a MasterPage
ASP.NET MasterPages are layout files that allow you to setup a template for common HTML to use across the entire website. In this task you will add a MasterPage with a common header with links to the Home page and Store area.
- If not already open, start Microsoft Visual Web Developer 2010 Express from Start | All Programs | Microsoft Visual Studio 2010 Express | Microsoft Visual Web Developer 2010 Express.
- In the File menu, choose Open Project. In the Open Project dialog, browse to Source\Ex04-CreatingAView\Begin, select MvcMusicStore.sln and click Open. Alternatively, you may continue with the solution that you obtained after completing the previous exercise.
Add a MasterPage. Because it is a shared resource you will create it under the /Views/Shared folder. To do this, expand the Views folder and right-click the Shared folder. Select Add and then the New Item command.
Figure 23
Adding a new item
In the Add New Item dialog box select the MVC 3 View Master Page (ASPX) template, located under Visual [C#|Basic],Web template list. Change the name to Site.Master and click Add.
Figure 24
Add New Item Dialog – C#
Figure 25
Add New Item Dialog - VB
Site.Master file is added. This template contains the HTML container layout for all pages on the site. It includes the <html> element for the HTML response, as well as the <head> and <body> elements. <asp:ContentPlaceholder> tags within the HTML content identify regions that view templates will be able to fill in with dynamic content.
<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="https://www.w3.org/1999/xhtml" > <head runat="server"> <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title> </head> <body> <div> <asp:ContentPlaceHolder ID="MainContent" runat="server"> </asp:ContentPlaceHolder> </div> </body> </html>
<%@ Master Language="VB" Inherits="System.Web.Mvc.ViewMasterPage" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="https://www.w3.org/1999/xhtml" > <head runat="server"> <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title> </head> <body> <div> <asp:ContentPlaceHolder ID="MainContent" runat="server"> </asp:ContentPlaceHolder> </div> </body> </html>
Add a common header with links to the Home page and Store area on all pages in the site. In order to do that, add the following code inside the <div> statement.
<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>
FakePre-f7c74888819f45edbd6cbab5f1343d16-b329ca29fc104edf95c36052216c63ccFakePre-97a6864666834bc592167d7863e1c25d-995214fba32744bf9519823ec87104ddFakePre-acfddd2a1a154c7792999cab0c7d0cdc-ddb7da4de84b4cc6a8a5196b9903f8fcFakePre-c39de151c51d4d90a3082d8e7102d69f-58449233dea7468e8b3bcad99fe205d2FakePre-d16ddf52ba5d4d0cbae09b6e92282e8b-0e7802e9bebd4cd98c0423ab42f84604FakePre-a89a6a57000e4376a1fd33be5c1c0b55-6e9a222afb41423783c6e5250b7bcda5FakePre-ffe767b7a901400088edf6de75a2b2ed-79911f97a1674a83bf70b5ee220b60a0FakePre-08f88c9fe4034de695e356c0e4b67dd8-f16661677a95455f844b9dd068f74828FakePre-56b7a2aa17fa492fa5de47759ebbed50-3c43577b3db84f0fb43adfc4bee7e2ff <div id="header"> <h1>ASP.NET MVC MUSIC STORE</h1> <ul id="navlist"> <li class="first"><a href="/" id="current">Home</a></li> <li><a href="/Store/">Store</a></li> </ul> </div>FakePre-c9376be84ec8436dbe3a0c7f2c206b48-729f413ec04545daae7bdae151b77ec5FakePre-830534019dd547129e2b42a51de7b183-10bd51d4700c4ba5bf21931f74764457FakePre-dad078521982470d8974d52b70e8cf38-b2e8ed1c40214f62bf4c6e38ea5d6b5eFakePre-c98219a40f5445fe90145f2e998fca04-9482eb1209394dcfaf05febfd9f4913dFakePre-376deb9504a84e50bf690e969db2c911-460f8e97e3ec4d9284b69c7fa295fdf4FakePre-263a073d439a4cf29d22de5a1b1c6208-9c6b8e7d4b4a439c845f44c18096b1ba
<%@ Master Language="VB" Inherits="System.Web.Mvc.ViewMasterPage" %>
FakePre-433296923f854af3a634067a7301043c-cd143217ed82465b87561cefd740bbedFakePre-71613e05a37244c99cde7ff8cbe4b4dd-b24a286187f1473485bd0db585425962FakePre-92d53c3e020b4be5839d5bbcdf4c95a8-29c0f60a92794e1b8181d059ac639461FakePre-72e25ef90df94bf6bd474be70fcfcc72-3ae33536684b439eac0c4f02218ba259FakePre-42109c86f0ea4c25a1964e280e979581-35388e4444be40c99c37139c356f7a5fFakePre-4251964f73604b93a35c3007e05bc87c-f38689a3e74d490a8a3bb94809247a6eFakePre-88a333c98b8d4d008e621feedab23c02-7caa8422b03947389c47a90cea60d19eFakePre-aaa62b1efa8e4551bb0ba946ed345d4b-abab19b91e06433eaa7e913615c91b73FakePre-ee7fd0c76aff4db1a1759bfa88d4714c-ef5cde01dbd14d0cb1fd2c1c411a0912 <div id="header"> <h1>ASP.NET MVC MUSIC STORE</h1> <ul id="navlist"> <li class="first"><a href="/" id="current">Home</a></li> <li><a href="/Store/">Store</a></li> </ul> </div>FakePre-450a5e8c675249708c2da6f8a470b382-653d7bd578964d65a2d76a85505fd4afFakePre-8105eca6f30f418fa82c1a856d25088b-1aa8fdddf9094eca84565966caed8748FakePre-d0ee63812ad042d3aa69a531908effec-2ceccacb79d945dda31600bfe8e4e807FakePre-b1f779f6094b4a4ebdd9505ed8706ce8-a6e0dfd4a826429ab94b4650e94a60f3FakePre-3cc42cbba7fc47ac88ebc65244de4469-067548c070bc4938b1ad13ef4b9f329aFakePre-fc32100350d2408b8808a8b505da1d02-d3d07363db024b81bc3a45c80c77f755
Did you know? Visual Studio 2010 has snippets that make it easy to add commonly used code in HTML, code files and more! Try it out by typing <div + tab (twice) to insert a complete div tag.
Task 2 – Adding CSS Stylesheet
The empty project template includes a very streamlined CSS file which just includes styles used to display validation messages. You will use additional CSS and images (potentially provided by a designer) in order to enhance the look and feel of the site.
In this task, you will add a CSS stylesheet to Site.Master to define the styles of the site.
The CSS file and images are included in the Source\Assets\Content of this Lab. In order to add them to the application, drag their content from a Windows Explorer window into the Solution Explorer in Visual Web Developer Express, as shown below:
Figure 26
Dragging style contents
- A warning dialog will appear, asking for confirmation to replace Site.css file. Click Yes.
-
Add a <link> element into the <head> tag of Site.Master file, with a reference to the css file you just added:
<head runat="server">
<link href="/Content/Site.css" rel="Stylesheet" type="text/css" />FakePre-89129f425a9d495fa7cd8ccaa7cbf3fc-55e758cb2c4948d690a7ab136a60e872FakePre-d79f73720d8d48bd9619a64e44993310-55c823e55548457b95c1cc0ce2b93db6
Task 3 – Adding a View Template
In this task, you will add a View template to generate the HTML response that will use the Master Page and CSS added in this exercise.
To use a View template when browsing the site’s home page, first you need to indicate that instead of returning a string, the HomeController Index method should return a View. Open HomeController class and change its Index method to return an ActionResult, and have it return View().
(Code Snippet – ASP.NET MVC 3.0 Fundamentals – Ex4 HomeController Index - CSharp)
public class HomeController : Controller
FakePre-151dc4879708439ba0e3a8321fc8a244-361ae96879564da5b12d5d113d1072f0FakePre-30f1204cf76e43aa8564e99737f56d6b-f7fa681167d845059ca99fad618f9da4FakePre-4ee9e6fe282140eb88a61296537fc831-cb36e4f44f454e4098bd91295723c394FakePre-87878a636aea433db7c4c6d759c38738-83b28303085e4039823dd01d225b4f71 public ActionResult Index() { return View(); }FakePre-a93e05ece7d54efc9b0ef5f4a8571d23-68afdf1ebb8249f68b1ef189bd9f5089
(Code Snippet – ASP.NET MVC 3.0 Fundamentals – Ex4 HomeController Index - VB)
Public Class HomeController
FakePre-18cfa80958664ec081436ea9d1a492d8-fe14cdca31f3445fbdcbb53f01e0aaeeFakePre-983af24bc70548a48dd3f540b6a3260f-b0dc90211fd34f91b15a3ebcdfc6746fFakePre-b04f11e03f344accafc79634a4a6ff74-7decba5360cb40e888e536011b4274dbFakePre-d240540c7f2e44a78ab6a9b0ffc71658-1db80b7ac0ac4540976c7b71eac0d81a Public Function Index() As ActionResult Return View() End FunctionFakePre-6f97e60b76334d4ea8c0ee3010c78812-eeced8acf110447d80a6dcb178c6927dFakePre-c775b8de733d4abcb6e7fdb46ba19a39-da330ac65ae640acb214e0aa909ce7ba
Now, you need to add an appropriate View template. To do this, right-click inside the Index action method and select Add View. This will bring up the Add View dialog.
Figure 28
Adding a View from within the Index method – C#
Figure 29
Adding a View from within the Index method - VB
The Add View Dialog appears. It allows generating View template files. By default this dialog pre-populates the name of the View template so that it matches the action method that will use it. Because you used the Add View context menu within the Index action method of the HomeController, the Add View dialog has Index as the default view name. Because there is a Site.Master MasterPage template within the project, the dialog also pre-fills that name as the master page template the View should be based on. Click Add.
Figure 30
Add View Dialog
Visual Studio generates an Index.aspx view template inside the Views\Home folder and then opens it.
Figure 31
Add View Dialog
name and location of the
Index.aspx file is relevant and follows the default ASP.NET MVC naming conventions.
The folder (\Views\
Home) matches the controller name (
HomeController). The View template name (
Index), matches the controller action method which will be displaying the View.
This way, ASP.NET MVC avoids having to explicitly specify the name or location of a View template when using this naming convention to return a View.
The generated View template is based on the Site.master template earlier defined, and contains two <asp:content> sections that enables you to override to fill with the page content. Update the Title to Home, and change the main content to This is the Home Page, as shown in the code below:
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
Home <h2>This is the Home Page</h2>FakePre-783658d5e3bd400f9b49293136201b00-6783136664234342bebd2e065ac88785FakePre-1b5a71f46e0b48a0b00c26a0f930d6d2-6e2301e5d7d0407d8a46ac92ebb93f1b Home <h2>This is the Home Page</h2>FakePre-fb1512b68cfa48bbb33d793c08e2b930-3eeed5c309a542b78d5321fd4a4b50f0FakePre-b9ec56c6d4ba4738ac6712d68c964a46-3692ec57760a48018ecc246726f22388
Select MvcMusicStore project in the Solution Explorer and Press F5 to run the Application.
Figure 32
MvcMusicStore Project selected in the Solution Explorer
Next Step
Exercise 4: Verification