Adding a View (C#)
[!NOTE] An updated version of this tutorial is available here that uses ASP.NET MVC 5 and Visual Studio 2013. It’s more secure, much simpler to follow and demonstrates more features.
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:
- Visual Studio Web Developer Express SP1 prerequisites
- ASP.NET MVC 3 Tools Update
- SQL Server Compact 4.0(runtime + tools support)
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 C# source code is available to accompany this topic. Download the C# version. If you prefer Visual Basic, switch to the Visual Basic version of this tutorial.
In this section you’re going to modify the HelloWorldController class to use view template files to cleanly encapsulate the process of generating HTML responses to a client.
You’ll create a view template file using the new Razor view engine introduced with ASP.NET MVC 3. Razor-based view templates have a .cshtml file extension, and provide an elegant way to create HTML output using C#. Razor minimizes the number of characters and keystrokes required when writing a view template, and enables a fast, fluid coding workflow.
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 in the controller class. Change the Index method to return a View object, as shown in the following:
[!code-csharpMain]
1: public ActionResult Index()
2: {
3: return View();
4: }
This code uses a view template to generate an HTML response to the browser. In the project, add a view template that you can use with the Index method. To do this, right-click inside the Index method and click Add View.
The Add View dialog box appears. Leave the defaults the way they are and click the Add button:
The MvcMoviefolder and the MvcMovie.cshtml* file are created. You can see them in Solution Explorer:
The following shows the Index.cshtml file that was created:
Add some HTML under the <h2> tag. The modified MvcMovie.cshtml file is shown below.
[!code-cshtmlMain]
1: @{
2: ViewBag.Title = "Index";
3: }
4:
5: <h2>Index</h2>
6:
7: <p>Hello from our View Template!</p>
Run the application and browse to the HelloWorld controller (http://localhost:xxxx/HelloWorld). The Index method in your controller didn’t do much work; it simply ran the statement return View(), which specified that the method should use a view template file to render a response to the browser. Because you didn’t explicitly specify the name of the view template file to use, ASP.NET MVC defaulted to using the Index.cshtml view file in the *folder. The image below shows the string hard-coded in the view.
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, you want to change the “My MVC Application” title at the top of the page. That text is common to every page. It actually is implemented in only one place in the project, even though it appears on every page in the application. Go to the /Views/Shared folder in Solution Explorer and open the _Layout.cshtml file. This file is called a layout page and it’s the shared “shell” that all other pages use.
Layout templates allow you to specify the HTML container layout of your site in one place and then apply it across multiple pages in your site. Note the @RenderBody() line near the bottom of the file. RenderBody is a placeholder where all the view-specific pages you create show up, “wrapped” in the layout page. Change the title heading in the layout template from “My MVC Application” to “MVC Movie App”.
[!code-cshtmlMain]
1: <div id="title">
2: <h1>MVC Movie App</h1>
3: </div>
Run the application and notice that it now says “MVC Movie App”. Click the About link, and you see how that page shows “MVC Movie App”, too. We were able to make the change once in the layout template and have all pages on the site reflect the new title.
The complete _Layout.cshtml file is shown below:
[!code-cshtmlMain]
1: <!DOCTYPE html>
2: <html>
3: <head>
4: <meta charset="utf-8" />
5: <title>@ViewBag.Title</title>
6: <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
7: <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
8: <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
9: </head>
10: <body>
11: <div class="page">
12: <header>
13: <div id="title">
14: <h1>MVC Movie App</h1>
15: </div>
16: <div id="logindisplay">
17: @Html.Partial("_LogOnPartial")
18: </div>
19: <nav>
20: <ul id="menu">
21: <li>@Html.ActionLink("Home", "Index", "Home")</li>
22: <li>@Html.ActionLink("About", "About", "Home")</li>
23: </ul>
24: </nav>
25: </header>
26: <section id="main">
27: @RenderBody()
28: </section>
29: <footer>
30: </footer>
31: </div>
32: </body>
33: </html>
Now, let’s change the title of the Index page (view).
Open MvcMovie.cshtml. 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). You’ll make them slightly different so you can see which bit of code changes which part of the app.
[!code-cshtmlMain]
1: @{
2: ViewBag.Title = "Movie List";
3: }
4:
5: <h2>My Movie List</h2>
6:
7: <p>Hello from our View Template!</p>
To indicate the HTML title to display, the code above sets a Title property of the ViewBag object (which is in the Index.cshtml view template). If you look back at the source code of the layout template, you’ll notice that the template uses this value in the <title> element as part of the <head> section of the HTML. Using this approach, you can easily pass other parameters between your view template and your layout file.
Run the application and browse to http://localhost:xx/HelloWorld. Notice that the browser title, the primary heading, and the secondary headings have changed. (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.)
Also notice how the content in the Index.cshtml view template was merged with the _Layout.cshtml view template and a single HTML response was sent to the browser. Layout templates make it really easy to make changes that apply across all of the pages in your application.
Our little bit of “data” (in this case the “Hello from our View Template!” message) is hard-coded, though. The MVC application has a “V” (view) and you’ve got a “C” (controller), 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. Controller classes are invoked in response to an incoming URL request. A controller class is where you write the code that handles the incoming parameters, retrieves data from a database, and ultimately decides what type of response to send back to the browser. View templates can then be used from a controller to generate and format an HTML response to the browser.
Controllers are responsible for providing whatever data or objects are required in order for a view template to render a response to the browser. A view template should never perform business logic or interact with a database directly. Instead, it should work only with the data that’s provided to it by the controller. Maintaining this “separation of concerns” helps keep your code clean and more maintainable.
Currently, the Welcome action method in the HelloWorldController class takes a name and a numTimes parameter and then outputs the values directly to the browser. Rather than have the controller render this response as a string, let’s change the controller to use a view template instead. The view template will generate a dynamic response, which means that you need to pass appropriate bits of data from the controller to the view in order to generate the response. You can do this by having the controller put the dynamic data that the view template needs in a ViewBag object that the view template can then access.
Return to the HelloWorldController.cs file and change the Welcome method to add a Message and NumTimes value to the ViewBag object. ViewBag is a dynamic object, which means you can put whatever you want in to it; the ViewBag object has no defined properties until you put something inside it. The complete HelloWorldController.cs file looks like this:
[!code-csharpMain]
1: using System.Web;
2: using System.Web.Mvc;
3:
4: namespace MvcMovie.Controllers
5: {
6: public class HelloWorldController : Controller
7: {
8: public ActionResult Index()
9: {
10: return View();
11: }
12:
13: public ActionResult Welcome(string name, int numTimes = 1)
14: {
15: ViewBag.Message = "Hello " + name;
16: ViewBag.NumTimes = numTimes;
17:
18: return View();
19: }
20: }
21: }
Now the ViewBag object contains data that will be passed to the view automatically.
Next, you need a Welcome view template! In the Debug menu, select Build MvcMovie to make sure the project is compiled.
Then right-click inside the Welcome method and click Add View. Here’s what the Add View dialog box looks like:
Click Add, and then add the following code under the <h2> element in the new Welcome.cshtml file. You’ll create a loop that says “Hello” as many times as the user says it should. The complete Welcome.cshtml file is shown below.
[!code-cshtmlMain]
1: @{
2: ViewBag.Title = "Welcome";
3: }
4:
5: <h2>Welcome</h2>
6:
7: <ul>
8: @for (int i=0; i < ViewBag.NumTimes; i++) {
9: <li>@ViewBag.Message</li>
10: }
11: </ul>
Run the application and browse to the following URL:
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 the data into a ViewBag object and passes that object to the view. The view then displays the data as HTML to the user.
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.
)
|
|