Introduction to MVC Adding a View Page NTPCUG Tom 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 Box Leave defaults alone Click

New Folder/File Created … New Folder New File

The contents of the Index.cshtml file

Add the following HTML under the tag. Hello from our View Template! Hello from our View Template! The complete MvcMovie\Views\HelloWorld\Index.cshtml file is shown ViewBag.Title = "Index"; ViewBag.Title = "Index";}<h2>Index</h2> Hello from our View Template! Hello from our View Template!

VS 2012 only … Right click on Index.cshtml Click on View in Page Inspector

Run the app, browse to: From our View Page

Change the Layout page (master) Shared Folder all pages use Click on _Layout.cshtml Find 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", "Index", "Home") Replace the title - Movie App

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 ViewBag.Title = "Movie List"; } My Movie List Hello from our View Template! Open MvcMovie\Views\HelloWorld\Index.cshtml Change 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 View HTML 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"; } (int i=0; i < ViewBag.NumTimes; i++) } Run the app: –

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