Introduction to MVC 4
03. 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
Razor
View template file
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 <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
Find the
@Render
Body()
line
Click on
_Layout.cshtml
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
Open MvcMovie\Views\HelloWorld\Index.cshtml
Change Page title
ViewBag is
an object in
the view
template
@{
ViewBag.Title = "Movie List";
}
Change Primary Heading
<h2>My Movie List</h2>
<p>Hello from our View Template!</p>
Change Secondary
Heading
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
Pass data from a Controller to a View
via the ViewBag …
URL
containing
Message,
NumTimes
HelloWorldController,
Welcome Action
ViewBag
Object
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();
}
ViewBag can
contain
anything
(dynamic)
Automatic
Binding to
query string
public ActionResult Welcome(string name, int numTimes = 1)
{
ViewBag.Message = "Hello " + name;
ViewBag.NumTimes = numTimes;
return View();
}
}
}
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 …