Introduction to MVC 403. Adding a View Page

NTPCUGTom Perkins, Ph.D.

This section:

• View template files are used to generate HTML responses back to the user

• We’ll create a view template file using the Razor View engine.

• Razor files have a .cshtml extension

View template file

Razor

HTML Response to

user

Change the Index method

• Current Index method returns a string. • Change it to return a View object.

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

Controller method or Action Method

Add a View Template

• Right click inside the Index method• Click Add View

Click here

The Add View Dialog BoxLeave

defaults alone

Click

New Folder/File Created …

New Folder

New File

The contents of the Index.cshtml file

Add the following HTML under the <h2> tag.

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

The complete MvcMovie\Views\HelloWorld\Index.cshtml file is shown below.

@{ ViewBag.Title = "Index";}

<h2>Index</h2>

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

VS 2012 only …

Right click on Index.cshtml

Click on View in Page Inspector

Run the app, browse to:http://localhost:xxxx/HelloWorld

From our View Page

Change the Layout page

(master)

Shared Folder all pages use

Click on _Layout.cshtml

Find the @Render

Body() line

RenderBody

• Placeholder• All view-specific pages show up here• View pages are “wrapped” in layout page• When you select the About link– The Views\Home\About.cshtml view is rendered

inside the RenderBody method.

Change the site title

• Change “your logo here” to “MVC Movie”:

<div class="float-left"> <p class="site-title">@Html.ActionLink("MVC Movie", "Index", "Home")</p></div>

Replace the title element:

<title>@ViewBag.Title - Movie App</title>

Run the app; also check the “About” page

Note the changed title

Changes in the Layout template to the title will be reflected in all

the web pages

Change the title of the Index View

@{ ViewBag.Title = "Movie List";}

<h2>My Movie List</h2>

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

Open MvcMovie\Views\HelloWorld\Index.cshtmlChange Page title

Change Primary Heading

Change Secondary Heading

ViewBag is an object in

the view template

The changed page …

Changed Page title

Changed Primary Heading

Changed Secondary Heading

Passing data from the Controller to the View

• Controller classes– Invoked for an incoming URL request– Where you write code to:• Handle incoming browser requests• Retrieve data from a database• Decide what type of response to send back to the

browser– Call a View class to generate and format an HTML

response back to the browser

Best Practices

• Controllers provide data to views.• A view template should never perform

business logic or interact with a database directly.

• View should work only with data provided by controller (Separation of Concerns)

Controller

View

Data

Pass data from a Controller to a View via the ViewBag …

HelloWorldController, Welcome Action

URL containing Message,

NumTimes ViewBag Object

Parameters: Message, NumTimes

Welcome ViewHTML Browser

Modify the Welcome method in the HelloWorldController

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(); } }}

Automatic Binding to

query string

ViewBag can contain

anything (dynamic)

Create a Welcome view template

• F6- compile the project• Inside the Welcome method:– Right-Click– Select Add View– Click Add on the Add View dialog box– The Welcome.cshtml will be added to the project

Add logic to display data in a loop

• Modify Welcome.cshtml …@{ ViewBag.Title = "Welcome";}

<h2>Welcome</h2>

<ul> @for (int i=0; i < ViewBag.NumTimes; i++) { <li>@ViewBag.Message</li> } </ul>

• Run the app:– http://localhost:xx/HelloWorld/Welcome?name=Scott&numtimes=4

We’ve built a Controller and a View …We’ll build a Model next …