Adding a View

曾经终败给现在 2022-10-10 04:53 105阅读 0赞

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][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:

public ActionResult Index() 
    {
        
        return View(); 
    }

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

![IndexAddView.png][]

The **Add View** dialog box appears. Leave the defaults the way they are and click the**Add** button:

![AddViewIndexHelloController.PNG][]

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

![SolnExpHelloWorldIndx.PNG][]

The following shows the *Index.cshtml* file that was created:

[![HelloWorldIndex][]][HelloWorldIndex 1]

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

@{
        ViewBag.Title = "Index";
    }
    
    <h2>Index</h2>
    
    <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 *\\Views\\HelloWorld* folder. The image below shows the string hard-coded in the view.

![WindowsLiveWriter_AddingaView_E5AE_MyMvcApp_thumb.png_cdn_id_2013-08-19-002][]

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.

[![\_LayoutCshtml][LayoutCshtml]][LayoutCshtml_LayoutCshtml]

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

<div id="title">
          <h1>MVC Movie App</h1>
      </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.

![WindowsLiveWriter_AddingaView_E5AE_about_thumb.png_cdn_id_2013-08-19-002][]

The complete *\_Layout.cshtml* file is shown below:

<!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")" 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", "Home")</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).

Open *MvcMovie\\Views\\HelloWorld\\Index.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.

@{
       
        ViewBag.Title = "Movie List";
    }
    
    <h2>My Movie List</h2>
    
    <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.

![WindowsLiveWriter_AddingaView_E5AE_MyMovieList_thumb.png_cdn_id_2013-08-19-002][]

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:

using System.Web;
    using System.Web.Mvc;
    
    namespace MvcMovie.Controllers
    {
       
        public class HelloWorldController : Controller
        {
       
            public ActionResult Index()
            {
       
                return View();
            }
    
            public ActionResult Welcome(string name, int numTimes = 1)
            {
       
                ViewBag.Message = "Hello " + name;
                ViewBag.NumTimes = numTimes;
    
                return View();
            }
        }
    }

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.

[![BuildHelloWorld][]][BuildHelloWorld 1]

Then right-click inside the `Welcome` method and click **Add View**. Here's what the**Add View** dialog box looks like:

![welcomeView.PNG][]

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.

@{
        ViewBag.Title = "Welcome";
    }
    
    <h2>Welcome</h2>
    
    <ul> 
       @for (int i=0; i < ViewBag.NumTimes; i++) { 
          <li>@ViewBag.Message</li> 
       } 
    </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.

![WindowsLiveWriter_AddingaView_E5AE_helloWorldScott4_thumb.png_cdn_id_2013-08-19-002][]

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.

[Razor view engine]: http://weblogs.asp.net/scottgu/archive/2010/07/02/introducing-razor.aspx
[IndexAddView.png]: http://i3.asp.net/common/www-css/i//MVC3/MVC3_gettingStarted_CS/img/IndexAddView.png
[AddViewIndexHelloController.PNG]: http://i3.asp.net/common/www-css/i//MVC3/MVC3_gettingStarted_CS/img/AddViewIndexHelloController.PNG
[SolnExpHelloWorldIndx.PNG]: http://i3.asp.net/common/www-css/i//MVC3/MVC3_gettingStarted_CS/img/SolnExpHelloWorldIndx.PNG
[HelloWorldIndex]: http://i3.asp.net/media/2578300/WindowsLiveWriter_AddingaView_E5AE_HelloWorldIndex_thumb.png?cdn_id=2013-08-19-002
[HelloWorldIndex 1]: http://i3.asp.net/media/2578294/WindowsLiveWriter_AddingaView_E5AE_HelloWorldIndex_2.png?cdn_id=2013-08-19-002
[WindowsLiveWriter_AddingaView_E5AE_MyMvcApp_thumb.png_cdn_id_2013-08-19-002]: http://i1.asp.net/media/2578306/WindowsLiveWriter_AddingaView_E5AE_MyMvcApp_thumb.png?cdn_id=2013-08-19-002
[LayoutCshtml]: http://i2.asp.net/media/2578318/WindowsLiveWriter_AddingaView_E5AE__LayoutCshtml_thumb.png?cdn_id=2013-08-19-002
[LayoutCshtml_LayoutCshtml]: http://i3.asp.net/media/2578312/WindowsLiveWriter_AddingaView_E5AE__LayoutCshtml_2.png?cdn_id=2013-08-19-002
[WindowsLiveWriter_AddingaView_E5AE_about_thumb.png_cdn_id_2013-08-19-002]: http://i1.asp.net/media/2578324/WindowsLiveWriter_AddingaView_E5AE_about_thumb.png?cdn_id=2013-08-19-002
[WindowsLiveWriter_AddingaView_E5AE_MyMovieList_thumb.png_cdn_id_2013-08-19-002]: http://i1.asp.net/media/2578330/WindowsLiveWriter_AddingaView_E5AE_MyMovieList_thumb.png?cdn_id=2013-08-19-002
[BuildHelloWorld]: http://i2.asp.net/media/2578366/WindowsLiveWriter_AddingaView_E5AE_BuildHelloWorld_thumb.png?cdn_id=2013-08-19-002
[BuildHelloWorld 1]: http://i3.asp.net/media/2578336/WindowsLiveWriter_AddingaView_E5AE_BuildHelloWorld_2.png?cdn_id=2013-08-19-002
[welcomeView.PNG]: http://i3.asp.net/common/www-css/i//MVC3/MVC3_gettingStarted_CS/img/welcomeView.PNG
[WindowsLiveWriter_AddingaView_E5AE_helloWorldScott4_thumb.png_cdn_id_2013-08-19-002]: http://i1.asp.net/media/2578372/WindowsLiveWriter_AddingaView_E5AE_helloWorldScott4_thumb.png?cdn_id=2013-08-19-002