Language

Adding a View (VB)

By Rick Anderson|

This tutorial will teach you the basics of building an ASP.NET MVC Web application using Microsoft Visual Web Developer 2010 Express Service Pack 1, which is a free version of Microsoft Visual Studio. Before you start, make sure you've installed the prerequisites listed below. You can install all of them by clicking the following link: Web Platform Installer. Alternatively, you can individually install the prerequisites using the following links:

If you're using Visual Studio 2010 instead of Visual Web Developer 2010, install the prerequisites by clicking the following link: Visual Studio 2010 prerequisites.

A Visual Web Developer project with VB.NET source code is available to accompany this topic. Download the VB.NET version. If you prefer C#, switch to the C# version of this tutorial.

In this section we're going to modify the HelloWorldController class to use a view template file to cleanly encapsulate the process of generating HTML responses to a client.

Let's start by using a view template with the Index method in the HelloWorldController class. Currently the Index method returns a string with a message that is hard-coded within the controller class. Change the Index method to return a View object, as shown in the following:

        Public Function Index() As ActionResult
            Return View()
        End Function

Let's now add a view template to our project that we can invoke with the Index method. To do this, right-click inside the Index method and click Add View.

IndexAddView

The Add View dialog box appears. Leave the default entries and click the Add button.

3addView

The MvcMovie\Views\HelloWorld folder and the MvcMovie\Views\HelloWorld\Index.vbhtml file are created. You can see them in Solution Explorer:

SolnExpHelloWorldIndx

Add some HTML under the <h2> tag. The modified MvcMovie\Views\HelloWorld\Index.vbhtml file is shown below.

@Code
    ViewData("Title") = "Index"
End Code

<h2>Index</h2>

<b>Hello</b> World!

Run the application and browse to the "hello world" controller (http://localhost:xxxx/HelloWorld). The Index method in your controller didn't do much work; it simply ran the statement return View(), which indicated that we wanted to use a view template file to render a response to the client. Because we did not explicitly specify the name of the view template file to use, ASP.NET MVC defaulted to using the Index.vbhtml view file within the \Views\HelloWorld folder. The image below shows the string hard-coded in the view.

3HelloWorld

Looks pretty good. However, notice that the browser's title bar says "Index" and the big title on the page says "My MVC Application." Let's change those.

Changing views and layout pages

First, let's change the text "My MVC Application." That text is shared and appears on every page. It actually appears in only one place in our project, even though it's on every page in our application. Go to the /Views/Shared folder in Solution Explorer and open the _Layout.vbhtml file. This file is called a layout page and it's the shared "shell" that all other pages use.

Note the @RenderBody() line of code near the bottom of the file. RenderBody is a placeholder where all the pages you create show up, "wrapped" in the layout page. Change the <h1> heading from "My MVC Application" to "MVC Movie App".

   <div id="title">
        <h1>MVC Movie App</h1>
  </div>

Run the application and note it now says "MVC Movie App". Click the About link, and that page shows "MVC Movie App", too.

The complete _Layout.vbhtml file is shown below:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewData("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")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
</head>
<body>
    <div class="page">
        <header>
            <div id="title">
                <h1>MVC Movie App</h1>
            </div>
            <div id="logindisplay">
                @Html.Partial("_LogOnPartial")
            </div>
            <nav>
                <ul id="menu">
                    <li>@Html.ActionLink("Home", "Index", "HelloWorld")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                </ul>
            </nav>
        </header>
        <section id="main">
            @RenderBody()
        </section>
        <footer>
        </footer>
    </div>
</body>
</html>

Now, let's change the title of the Index page (view).

@Code
    ViewData("Title") = "Movie List"
End Code

<h2>My Movie List</h2>

<p>Hello from our View Template!</p>

Open MvcMovie\Views\HelloWorld\Index.vbhtml. There are two places to make a change: first, the text that appears in the title of the browser, and then in the secondary header (the <h2> element). We'll make them slightly different so you can see which bit of code changes which part of the app.

Run the application and browse to http://localhost:xx/HelloWorld. Notice that the browser title, the primary heading, and the secondary headings have changed. It's easy to make big changes in your application with small changes to a view. (If you don't see changes in the browser, you might be viewing cached content. Press Ctrl+F5 in your browser to force the response from the server to be loaded.)

3_MyMovieList

Our little bit of "data" (in this case the "Hello World!" message) is hard-coded, though. Our MVC application has V (views) and we've got C (controllers), but no M (model) yet. Shortly, we'll walk through how create a database and retrieve model data from it.

Passing Data from the Controller to the View

Before we go to a database and talk about models, though, let's first talk about passing information from the Controller to a View. We want to pass what a view template requires in order to render an HTML response to a client. These objects are typically created and passed by a controller class to a view template, and they should contain only the data that the view template requires — and no more.

Previously with the HelloWorldController class, the Welcome action method took a name and a numTimes parameter and then output the parameter values to the browser. Rather than have the controller continue to render this response directly, let's instead we'll put that data in a bag for the View.  Controllers and Views can use a ViewBag object to hold that data. That will be passed over to a view template automatically, and used to render the HTML response using the contents of the bag as data. That way the controller is concerned with one thing and the view template with another — enabling us to maintain clean "separation of concerns" within the application.

Alternatively, we could define a custom class, then create an instance of that object on our own, fill it with data and pass it to the View. That is often called a ViewModel, because it's a custom Model for the View. For small amounts of data, however, the ViewBag works great.

Return to the HelloWorldController.vb file change the Welcome method inside the controller to put the Message and NumTimes into the ViewBag. The ViewBag is a dynamic object. That means you can put whatever you want in to it. The ViewBag has no defined properties until you put something inside it.

The complete HelloWorldController.vb with the new class in the same file.

Namespace MvcMovie
    Public Class HelloWorldController
        Inherits System.Web.Mvc.Controller
        '
        ' GET: /HelloWorld

        Function Index() As ActionResult
            Return View()
        End Function

        Public Function Welcome(ByVal name As String, Optional ByVal numTimes As Integer = 1) As ActionResult
            ViewBag.Message = "Hello " & name
            ViewBag.NumTimes = numTimes
            Return View()
        End Function

    End Class
End Namespace

Now our ViewBag contains data that will be passed over to the View automatically. Again, alternatively we could have passed in our own object like this if we liked:

return View(myCustomObject)

Now we need a WelcomeView template! Run the application so the new code is compiled. Close the browser, right-click inside the Welcome method, and then click Add View.

Here's what your Add View dialog box looks like.

3AddWelcomeView

Add the following code under the <h2> element in the new Welcome.vbhtml file. We'll make a loop and say "Hello" as many times as the user says we should!

@Code 
    For i As Integer = 0 To ViewBag.NumTimes
	@<h3> @ViewBag.Message @i.ToString </h3>
     Next i
 End Code

Run the application and browse to http://localhost:xx/HelloWorld/Welcome?name=Scott&numtimes=4

Now data is taken from the URL and passed to the controller automatically. The controller packages up the data into a Model object and passes that object to the view. The view than displays the data as HTML to the user.

3Hello_Scott_4

Well, that was a kind of an "M" for model, but not the database kind. Let's take what we've learned and create a database of movies.

Author Information

Rick Anderson

Rick Anderson – Rick Anderson works as a programmer writer for Microsoft, focusing on ASP.NET MVC, Windows Azure and Entity Framework. You can follow him on twitter via @RickAndMSFT.