• Article

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.

  1. 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.
  2. 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.

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

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

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

    HTML(C#)

    <%@ 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>

    HTML(Visual Basic)

    <%@ 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>

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

    HTML(C#)

    <%@ 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

    HTML(Visual Basic)

    <%@ 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

Note:
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.

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

  2. A warning dialog will appear, asking for confirmation to replace Site.css file. Click Yes.
  3. Figure 27

    Warning Dialog

  4. Add a <link> element into the <head> tag of Site.Master file, with a reference to the css file you just added:

    HTML

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

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

    C#

    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)

    Visual Basic

    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

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

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

  4. Visual Studio generates an Index.aspx view template inside the Views\Home folder and then opens it.

    Figure 31

    Add View Dialog

    Note:
    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.

  5. 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:

    HTML

    <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

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

< previous | next >

Downloads

Download The Offline Training Kit
Download Hands-on Lab Document (DOCX)
Download Hands-on Lab Source Files

Contents