Introduction to MVC 4 03. Adding a View Page
description
Transcript of Introduction to MVC 4 03. Adding a View Page
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 …