Module 5

Developing MVC Views

Module Overview
- Implementing MVC Views
- Implementing Strongly-typed MVC Views
- Implementing Partial MVC Views
esson 1: Implementing MVC Views
- What is an MVC View?
- Demonstration: Creating an MVC View
- What is an HTM Helper?
What is an MVC View?
The ASP.NET MVC framework is a lightweight, highly testable presentation
framework that is integrated with the existing ASP.NET features
Models
Model objects are the
parts of the
application that
implement the logic
for the applications
data domain
Models
Model objects are the
parts of the
application that
implement the logic
for the applications
data domain
Views
Views are the
components that
display the
applications user
interface (UI)
Views
Views are the
components that
display the
applications user
interface (UI)
Controllers
Controllers are the
components that
handle user
interaction, work
with the model, and
select a view to
render the UI
Controllers
Controllers are the
components that
handle user
interaction, work
with the model, and
select a view to
render the UI
The MVC framework includes the following components:
Demonstration:
Creating an MVC View
Create a new ASP.NET MVC 2
web appIication
Create a new ASP.NET MVC 2
web appIication
DeIete the current About view DeIete the current About view
Create an empty view named
About in the Home foIder
Create an empty view named
About in the Home foIder
BuiId the soIution BuiId the soIution
Run the appIication Run the appIication
otes Page Over-flow Slide. Do ot Print Slide.
See otes pane.
What Are HTM Helpers?
Classes of tmlelper methods:
W MvcForm Extensions Renders HTML forms.
W nput Extensions Renders HTML input elements.
W Label Extensions Renders HTML label element.
W Link Extensions Renders HTML links.
W $elect Extensions Renders drop-down lists and lists boxes.
W TextArea Extensions Renders an HTML TextArea.
W Validation Extensions Renders validation controls.
HTM helpers are used to programmatically render HTM
markup in a view. They return a string of type
Mvctmlelper.
<%: tml.TextBox("Text1") %> <%: tml.TextBox("Text1") %>
esson 2: Implementing Strongly-typed MVC
Views
- What is a Strongly-typed View?
- Demonstration: Creating a Strongly-typed View
- CRUD MVC Views
What is a Strongly-typed View?
A strongly-typed view contains data that is based on a
model.
<%@ Page
Inherits="System.Web.Mvc.ViewPage
<AdventureWorks.Models.Person>" %>
.
<% using (tml.BeginForm()) {%>
<div class="editor-label">
<%: tml.LabelFor(model => model.FirstName) %>
</div>
<div class="editor-field">
<%: tml.TextBoxFor(model => model.FirstName) %>
<%: tml.ValidationMessageFor(model =>
model.FirstName) %>
</div>
<% } %>
<%@ Page
Inherits="System.Web.Mvc.ViewPage
<AdventureWorks.Models.Person>" %>
.
<% using (tml.BeginForm()) {%>
<div class="editor-label">
<%: tml.LabelFor(model => model.FirstName) %>
</div>
<div class="editor-field">
<%: tml.TextBoxFor(model => model.FirstName) %>
<%: tml.ValidationMessageFor(model =>
model.FirstName) %>
</div>
<% } %>
Demonstration:
Creating a Strongly-typed View
Create a new ASP.NET
MVC 2 web application
Create a new ASP.NET
MVC 2 web application
Add a model Add a model
Build the application Build the application
Add a view using the Add
View dialog box
Add a view using the Add
View dialog box
Add a view using the Add
View dialog box
Add a view using the Add
View dialog box
Run the application Run the application
otes Page Over-flow Slide. Do ot Print Slide.
See otes pane.
otes Page Over-flow Slide. Do ot Print Slide.
See otes pane.
otes Page Over-flow Slide. Do ot Print Slide.
See otes pane.
otes Page Over-flow Slide. Do ot Print Slide.
See otes pane.
otes Page Over-flow Slide. Do ot Print Slide.
See otes pane.
CRUD MVC Views
Using the Add View dialog box, it is easy to create
strongly-typed views to create, read, update and
delete records.
These are the types of views that the Add View
dialog box can create:
W ist
W Details
W Create
W Update
W Delete
W Empty
esson 3: Implementing Partial MVC Views
- What is a Partial MVC View?
- Demonstration: Creating a Partial MVC View
What is a Partial MVC View?
<%@ Page Language="C#"
Inherits="System.Web.Mvc.ViewPage
<SampleMVC.Models.Person>" %>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Create</title>
</head>
<body>
<% tml.RenderPartial("Person"); %>
</body>
</html>
<%@ Page Language="C#"
Inherits="System.Web.Mvc.ViewPage
<SampleMVC.Models.Person>" %>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Create</title>
</head>
<body>
<% tml.RenderPartial("Person"); %>
</body>
</html>
<%@ Control Language="C#"
Inherits="System.Web.Mvc.ViewUserControl
<SampleMVC.Models.Person>" %>
.
<%@ Control Language="C#"
Inherits="System.Web.Mvc.ViewUserControl
<SampleMVC.Models.Person>" %>
.
Partial View
Page that Renders a Partial View
Demonstration:
Creating a Partial MVC View
pen the ASP.NET MVC 2 web
application
pen the ASP.NET MVC 2 web
application
Add a partial view using the
Add View dialog box
Add a partial view using the
Add View dialog box
Copy the markup from the
Create view to the new partial
view
Copy the markup from the
Create view to the new partial
view
Add an tml.RenderPartial
method to the Create view
Add an tml.RenderPartial
method to the Create view
Run the application Run the application
otes Page Over-flow Slide. Do ot Print Slide.
See otes pane.
ab: Developing MVC Views
- Exercise 1: Develop a ist MVC View
- Exercise 2: Develop a Details MVC View
- Exercise 3: Develop a Create MVC View
- Exercise 4: Develop an Edit MVC View
- Exercise 5: Develop a Delete MVC View
ogon information
Virtual machine 10264A-GE-DEV
User name Student
Password
Pa$$w0rd
Estimated time: 90 minutes

Slide 21
A1 ]ust making sure there really is a companion CD as referenced on the Notes page?
uthor,
ab Scenario
Module Review and Takeaways
- Review Questions
- Real-World Issues and Scenarios
- Best Practices
otes Page Over-flow Slide. Do ot Print Slide.
See otes pane.