1/9/2020 Module 2: Designing ASP.

NET MVC 5 Web Applications

Module 2: Designing ASP.NET MVC 5 Web Applications

Contents:

Module Overview

Lesson 1: Est Planning in the Project Design Phase

ed
oc
um
Lesson N
2:o Designing
en Models, Controllers, and Views
es t
tán p art o pe
n
pDesigning rte
Lab: erm ers@ ASP.NET ne MVC 5 Web Applications
itid ed ce a
as uc Da
las
Module Review ac and n
Takeaways
co ionit iel M
pia .co
ss m acha
in do
au .
tor
iza
ció
n.
Module Overview

Microsoft ASP.NET MVC 5 is a programming model that you can use to create powerful and complex web
applications. However, all complex development projects, and large projects in particular, can be challenging and
intricate to fully
Es understand. Without a complete understanding of the purposes of a project, you cannot develop an
te
effective solutiondtooc the customer’s problem. You need to know how to identify a set of business needs and plan an
um
N enmeet those needs. The project plan that you create assures stakeholders that you
MVC web oapplication
es to t
tán p art o pe
ne
understand their prequirements r
erm rs@ teand ne communicates the functionality of the web application, its user interface,
itid
structure, and data storage ed thecdevelopers
to ea who will create it. By writing a detailed and accurate project plan, you
as uc
can ensure that the powerful ac Dof
las features a n
co ionit iel M are used most effectively to solve a customer’s business problems.
MVC
pia .c
s s om acha
in do
au .
Objectives tor
iza
ció
After completing this module, you will be able to:n.

• Plan the overall architecture of an MVC 5 web application and consider aspects such as state management.

• Plan the models, controllers, and views that are required to implement a given set of functional requirements.
Es
te
do
cu
No me
es nt
Lesson 1:tánPlanningp art o pe in the Project Design Phase
pe n e rt
rm rs@ enec
itid ed ea
as u
las caci Dani
Before you and your team of cdevelopers on el a Model-View-Controller (MVC) web application or write any code,
plan
op i
ias t.com Mach
you must have a thorough understanding sin of two athings:
do the business problem you are trying to solve and the
au .
ASP.NET components that you can use toribuild t o a solution. Before designing a web application architecture and its
za
database, you should know how to identify the ciórequirements that potential users of a web application have.
n.

Lesson Objectives
After completing this lesson, you will be able to:
Es
te
• do
Describe the various project development models.
cu
No me
es n to
• tán topgather
Describe how ar pe
pe tners information
rte
ne
about project requirements when building MVC 5 web applications.
rm @ c
itid ed e a
as requirements
u
• Determine the functional las caci Dani and business problems when building web applications.
co on e
pia it.co l Mac
• s
Explain how to plan the database design when m h building a web application.

• Describe possible distributed application architectures.

https://www.skillpipe.com/#/reader/book/4ed7876c-8864-4cf5-91ee-491726dfe322 1/22
1/9/2020 Module 2: Designing ASP.NET MVC 5 Web Applications

• Describe the options for planning state management in a web application.

• Describe the options for planning globalization and localization of a web application.

• Determine the critical aspects of web application design.

Project Development Methodologies

Es
te
do
cu
No me
es nt
tán part o pe
pe n e rt
rm rs@ enec
itid ed ea
as u
las caci Dani
co on e
pia it.co l Mac
ss m ha
in do
au .
tor
iza
ció
n.

Es
te
do
cu
No me
es nt
tán part o pe
pe n e rt
rm rs@ enec
itid ed ea
as u
las caci Dani
co on e
pia it.co l Mac
ss m ha
in do
au .
tor
iza
ció
n.

Developing a web application or intranet application is often a complex process that involves many developers in
different teams performing various roles. To organize the development process and ensure that everybody in a
project works together, you can use a wide range of development methodologies. These development
methodologies Es describe the phases of the development project, the roles people take, the deliverables that
conclude eachtephase,
do and other aspects of the project. You should choose a development methodology at an early
cu
stage in Na oproject. Manyme organizations have a standard methodology that they always use for project development.
es nt
tán part o pe
pe n e rt
rm rs@ enec
Some project development itid methodologies
ed ea include the waterfall model, the iterative development model, the
as uc Da
prototyping model, the agile l a
assoftwarec development
n model, extreme programming, and test-driven development.
co ionit iel M
pia .co a ch
ss m ad
in o.
Waterfall Model au
tor
iza
ció
n.
The waterfall model is an early methodology that defines the following phases of a project:

• Feasibility analysis. In this phase, planners and developers study and determine the approaches and
technologies that can be used to build the software application.
Es
• Requirement te analysis. In this phase, planners and analysts interview the users, managers, administrators, and
do
cu
other N
stakeholders mof en the software application to determine their needs.
oe to
stá pa
np r tne perte
e
• Application design. r
rm In sthis ne
phase, planners, analysts, and developers record a proposed solution.
itid @ed ce a
as uc
las ac Dan
• Coding and unit testing. In cthis ion iedevelopers
op phase,i l create the code and test the components that make up the
ias t.com Mach
system individually.

• Integration and system testing. In this phase, developers integrate the components that they have built and test

https://www.skillpipe.com/#/reader/book/4ed7876c-8864-4cf5-91ee-491726dfe322 2/22
1/9/2020 Module 2: Designing ASP.NET MVC 5 Web Applications

the system as a whole.

• Deployment and maintenance. In this phase, developers and administrators deploy the solution so that users
can start using the software application.

The waterfall model classifies the development project into distinct phases with a clear definition of deliverables for
each phase. The model also emphasizes the importance of testing. However, the customer does not receive any
Es
functional software for review until late in the project. This makes it difficult to deal with changes to the design in
te
do
cu
responseNto beta feedback or manage altered circumstances.
me
oe nto
stá pa
n p rtne perte
Iterative Development erm Model rs ne
itid @ed ce a
as uc
las ac Dan
co ionit iel M
When you use an iterative development pia .c model, you break the project into small parts. For each part, you perform
s s om acha
the activities related to all the stages inof the waterfall do model. The project is built up stage by stage, with thorough
au .
tor
testing at each stage to ensure quality. iza
ció
n.
In an iterative project, you can perform corrective action at the end of each iteration. These corrections might reflect
a better understanding of the business problems, insightful user feedback, or a better understanding of the
technologies that you used to build the solution. Because requirements are added at the end of each iteration,
iterative projects require a great deal of project management effort and frequently feature an overrun of planned
Es
efforts and schedule.
te
do
cu
No me
esModelp nt
Prototyping tán art o pe
pe n e rt
rm rs@ enec
itid ed ea
assuitable
u aD project where you begin with a few or meagerly defined business
The prototyping model is las cacfor ion aniel
requirements. This situation occurs c o i t M customers or stakeholders have only a vague understanding of their
pia when .c the
s s om acha
needs and how to solve them. In thisinapproach, do
developers create a simplified version of the software application,
au .
tor
and then seek feedback from stakeholders. This
iza feedback on the prototype is used to define the detailed
ció
requirements, which developers use in the next iteration n . to build a solution that matches the needs of stakeholders
to better help them perform their jobs.

After two or more iterations, when both stakeholders and developers reach a consensus on the requirements, a
complete solution is built and tested. The prototyping model, however, can lead to a poorly-designed application
because at noEs stage in the project is there a clear focus on the overall architecture.
te
do
cu
No me
e nt
Agile Softwares p art o pe Model
tán Development
pe n e rt
rm rs@ enec
itid ed ea
as uc
The waterfall model, iterative ac Dan model, and prototyping model are based on the premise that business
las development
co do ionot
n iel
requirements and other factors pia it.cchange M from the beginning to the end of the project. In reality, this
s s om acha
assumption is often invalid. Agile software in do
au development . is a methodology designed to integrate changing
tor
circumstances and requirements throughout izathe development process. Agile projects are characterized by:
ció
n.
• Incremental development. Software is developed in rapid cycles that build on earlier cycles. Each iteration is
thoroughly tested.

• Emphasis on people and interactions. Developers write code based on what people do in their role, rather than
Es
what the development tools are good at.
te
do
cu
No on working me
• Emphasis es ntsoftware. Instead of writing detailed design documents for stakeholders, developers write
tán p art o pe
solutions that pe n
stakeholders
e rt can evaluate at each iteration to validate if it solves a requirement.
rm rs@ enec
itid ed ea
as uc
• Close collaboration with ac DaDevelopers
lacustomers. discuss with customers and stakeholders on a day-to-day basis
sc ion niel
to check requirements. o p i t . co M
ias m ach

https://www.skillpipe.com/#/reader/book/4ed7876c-8864-4cf5-91ee-491726dfe322 3/22
1/9/2020 Module 2: Designing ASP.NET MVC 5 Web Applications

Extreme Programming

Extreme programming evolved from agile software development. In extreme programming, the preliminary design
phase is reduced to a minimum and developers focus on solving a few critical tasks. As soon as these critical tasks
are finalized, developers test the simplified solution and obtain feedback from stakeholders. This feedback helps
developers identify the detailed requirements, which evolve over the project life cycle.

Extreme programming defines a user story for every user role. A user story describes all the interactions that a user
Es
with a specific trole
e d might perform with the completed application. The collection of all the user stories for all user
oc
roles describes um
the entire
No en application.
es t
tán p art o pe
pe ne rte
rm rsdevelopers
@ ne
In extreme programming, itid ed ce a often work in pairs. One developer writes the code and the other developer
as uc Dasimple solutions and adheres to best practices. Test-driven development is
reviews the code to ensurelasthat aitcuses n
co ionit iel M
a core practice in extreme programming. pia .co
ss m acha
in do
au .
tor
iza
Additional Reading: For more information ció
n. about the extreme programming model, go to
http://go.microsoft.com/fwlink/?LinkID=288945&clcid=0x409.

Test Driven Development

Es
te
do
In test-driven development (TDD), developers write test code as their first task in a given iteration. For example, if
cu
N
you want to m e
o ewrite a componentnto that stores credit card details, you begin by writing tests that such a component
stá pa
would pass. These n p may rtn bepwhether
ert it checks the number formats correctly, whether it writes strings to a database
erm ers@ ene
table correctly, or whether
itid it calls
ed c
banking
ea services correctly. After you define the tests, you write the component to
as uc D
pass those tests. las a c a n
co ionit iel M
pia .co
ss m acha
in do
In subsequent iterations, the credit card autests remain . in place. This ensures that if you break the credit card
tor
functionality, perhaps by refactoring code or by i za cióadding a new constructor, you find this out quickly because the tests
n.
fail.

In Microsoft Visual Studio 2017, you can define a test project, within the same solution as the main project, to store
and run unit tests. After you write the tests, you can run them singly or in groups after every code change. Because
MVC projects have the model, view, and controller code in separate files, it is easy to create unit tests for all
Es
te
aspects of application behavior. This is a major advantage of MVC over Web Pages and Web Forms.
do
cu
No m en
es pa to
t
Unified Modeling á rtn
n p Language pe
r
erm ers@ tene
itid ed ce a
as u Da
The Unified Modeling Language las ca(UML) c n an industry standard notation to record the design of any application that
is
co ionit iel M
p . c
uses object-oriented technology. UML i a s s ismnot aacdevelopment
o ha model. Rather, UML diagrams are often used for
in do
planning and documenting application aarchitecture
uto .
and components, across all project development methodologies.
riz
When you use UML to design and record an acapplication, you create a range of diagrams with standard shapes and
ión
connectors. These diagrams can be divided into .three classes:

• Behavior diagrams. These diagrams depict the behavior of users, applications, and application components.

• Interaction diagrams. These diagrams are a subset of behavior diagrams that focus on the interactions between
E
objects. ste d
oc
No um
en
• Structureesdiagrams.
tán p to
art These pe diagrams depict the elements of an application that are independent of time. This
ne rtethrough the lifetime of the application.
means they dopenot
rm change
r s ne
itid @ed ce a
as uc
las ac Dan
co ionit iel M
pia .co
s m ach
Question: What aspects of agile software development and extreme programming might be of concern to
customers? What aspects might reassure them?

https://www.skillpipe.com/#/reader/book/4ed7876c-8864-4cf5-91ee-491726dfe322 4/22
1/9/2020 Module 2: Designing ASP.NET MVC 5 Web Applications

Gathering Requirements

Es
te
do
cu
No me
es nt
tán part o pe
pe n e rt
rm rs@ enec
itid ed ea
as u
las caci Dani
co on e
pia it.co l Mac
ss m ha
in do
au .
tor
iza
ció
n.

Es
te
do
cu
No me
es nt
tán part o pe
n
When a project ispecommissioned,
e rt
rm rs@ enecyou need a vision of the solution. The vision can often be vague and require in-
itid you
depth investigation before ed caneadda details and ensure that all stakeholders’ requirements are covered by the
as u
las caci Dani
web application that you build. coThese on requirements
e can be of two types:
pia it.co l Mac
ss m ha
in do
au .
• Functional requirements. These requirements tor describe how the application behaves and responds to users.
iza
ció
Functional requirements are often called behavioral n. requirements. They include:

o User interface requirements. These requirements describe how the user interacts with an application.

o Usage requirements. These requirements describe what a user can do with the application.

o Business Es requirements. These requirements describe how the application will fulfill business functions.
te
do
cu
N me
• Technicalo e requirements. nto These requirements describe technical features of the application and relate to
stá pa pe
n p rtnor
availability, security,
erm ersperformance.
rte These requirements are sometimes called non-functional or non-behavioral
@ ne
requirements. i tid ed c e
as u a
las caci Dani
co on e
pia it.co l Mac
ss m ha
in do
You usually gather requirements by interviewing a u .
stakeholders such as users, administrators, other developers,
tor
iza
board members, budget holders, and team managers. ció Each of these groups will have a different set of priorities
n.
that the application needs to fulfill.

Usage Scenarios and Use Cases

Es
A common method by which you can build a set of user interface requirements, business requirements, and usage
te
d o
requirements is to askcu users what they will do with the web application that you build. You can record these actions
No me
as usage scenarios
es and ntuse cases.
tán p art o pe
pe n e rt
rm rs@ enec
itid ea
ed real-world
A usage scenario is a specificas u example, with names and suggested input values, of an interaction
las caci Dani
between the application and acouser.onThe e
following is a simple example:
pia it.co l Mac
s m h
1. Roger Lengel clicks the Add Photo link on the main site menu.

https://www.skillpipe.com/#/reader/book/4ed7876c-8864-4cf5-91ee-491726dfe322 5/22
1/9/2020 Module 2: Designing ASP.NET MVC 5 Web Applications

2. Roger provides the input, RogerL, in the User name box and the password in the Password box to
authenticate on the site.

3. Roger types the title, Sunset, for the photo.

4. Roger browses to the JPEG file for his new photo.

5. Roger clicks the Upload button.

6. The web Es application stores the new photo and displays the photo gallery to Roger.
te
do
cu
No me
es nt
tán part o pe
pe n e rte
A use case is similar rm to arsusage
@ nescenario, but is more generalized. Use cases do not include user names or input
itid ed ce a
values. They describe multiplea sl u ca D
as paths cio ofanan interaction, which depends on what the user provides as input or other
values. The following is a simple nit iel M
co example:
pia .c
s s om acha
in do
au .
tor
1. The user clicks the Add Photo link onizathe main site menu.
ció
n.
2. If the user is anonymous, the logon page is shown and the user provides credentials.

3. If the credentials are correct, the CreatePhoto view is displayed.

4. The user types a title.

Es
te
do
5. The user specifies
cu
me
the photo file to upload.
No
es n t
t n part o pe
6. The useráoptionally
pe ne typesrt a description for the photo.
rm rs@ enec
itid ed ea
7. The user clicks theasUpload u
las cacbutton. Da
n
co ionit iel M
pia .co ac
8. The web application stores the s s newmphoto hand
ad displays the photo gallery to the user.
in o.
au
tor
iza
ció
n.

Note: Similar to verbal descriptions, you can use UML Use Case diagrams to record the use cases for
your web application.

By analyzingEusage
ste scenarios and use cases, you can identify functional requirements of all types. For example,
do
from the Npreceding usecum case, you can identify the following user interface requirement: The webpage that enables
oe en
users to createstá a new
pa photo to must include Title and Description text boxes, a file input control for the photo file, and
n p rtne perte
e
an Upload button tormsaversthe photo.
ne
itid @ed ce a
as uc
las ac Dan
c ion iel
Agile Requirements Modeling op i
ias t.com Mach
sin ad
au o.
tor
In a traditional waterfall model or iterative development iza model, developers and analysts investigate and record the
ció
precise and detailed functional and technical requirements n . at an early stage of the project, which do not change
later. By contrast, in an agile development model-based project, developers recognize that requirements can
change at any time during development. Requirements analysis is therefore characterized as follows:

• Initial requirement modeling. In the initial design phase, developers identify and record a few broad use cases in
E
an informalstmanner
ed without full details.
oc
No u m en
• Just-in-time
es modeling. t Before writing code that implements a use case, a developer discusses it with the
tán part o pe
relevant users.peAt ne point,
this rte the developer adds full details to the use case. In an agile development project,
rm r s ne
itid @ed ce a
developers talk to users as and ucother Dstakeholders at all times, and not just at the beginning and end of the project.
las ac an
co ionit iel M
pia . ctest
om isaachtest that the application must pass for all stakeholders to accept and
• Acceptance testing. An acceptance s
sign off the application. When you identify a functional requirement, you can also specify a corresponding
acceptance test that must be run to ensure that the requirements are met.

https://www.skillpipe.com/#/reader/book/4ed7876c-8864-4cf5-91ee-491726dfe322 6/22
1/9/2020 Module 2: Designing ASP.NET MVC 5 Web Applications

User Stories in Extreme Programming

In extreme programming projects, developers perform even less functional requirement analysis at the beginning of
the project, compared with other development models. They create user stories, instead of use cases or user
scenarios. A user story is a very broad example of an interaction between the application and a user, and it is often
stated in a single sentence as the following example illustrates:
Es
te
do
cu
• UsersNcan upload m
photos
en and give new photos a title and a description.
oe to
stá pa p
n p rtne er
erm rs@ tene
itid ed ce a
as uc Da
User stories contain just the ac details
lasminimal n to enable developers to estimate the effort involved in developing it.
co ionit iel M
Extreme programmers discuss peach .co story
ias user ac with stakeholders just before they write code to implement each
sin m ha
do
user story. au .
tor
iza
ció
n
Question: If a customer asks you to ensure 95%. availability, is this a functional requirement or a technical
requirement?

Planning the Database Design

Es
te
do
cu
No me
es nt
tán part o pe
pe n e rt
rm rs@ enec
itid ed ea
as u
las caci Dani
co on e
pia it.co l Mac
ss m ha
in do
au .
tor
iza
ció
n.

Es
te
do
cu
No me
es nt
tán p art o pe
pe n e rt
rm rs@ enec
itid ed ea
as u
las caci Dani
co on e
pia it.co l Mac
ss m ha
in do
au .
tor
iza
ció
n.
When you have a good understanding of the functional requirements and technical requirements of the proposed
web application, you can start designing the physical implementation of the application. One of the most important
physical objects to plan for is one or more databases. Although not all web applications use databases for
information storage, they are an underlying object for a majority of sites and you will use them in most of your
projects. Es
te
do
cu
No me
Logical Modeling
es nt
tán p art o pe
pe n e rt
rm rs@ enec
itid ed e
You can begin your dataasdesign u at aahigh level by creating UML Domain Model diagrams and Logical Data Model
las caci Dani
(LDM) diagrams. co on e
pia it.co l Mac
s m h
A domain model diagram, also known as a conceptual data model, shows the high-level conceptual objects that
your web application manages. For example, in an e-commerce web application, the domain model includes the
https://www.skillpipe.com/#/reader/book/4ed7876c-8864-4cf5-91ee-491726dfe322 7/22
1/9/2020 Module 2: Designing ASP.NET MVC 5 Web Applications

concepts of customers, shopping carts, and products. The domain model does not include details of the properties
each concept has, but shows the relationships between concepts. Use the domain model to record your initial
conversations with stakeholders.

In essence, an LDM is a domain model diagram with extra details added. You can use LDM diagrams to fill in more
details, such as properties and data types, for the concepts that you defined in the domain model. Note that the
objects in the LDM do not correspond to tables in the database. For example, the shopping cart object may display
data from both the customer database and product database tables.
Es
te
do
cu
PhysicalNDatabase me
Structure
oe nto
stá pa
n p rtne perte
erm rs@ ne
You should consider the ed cedatabase
itid following aD
objects in your project plan:
as uc
las a c a n
co ionit iel M
pia . c om acobjects
• Tables. These are the fundamental s s storage ha in a database. When you define a table, you need to specify
in do
the columns that each table has. For aueach column, . you must define a data type such as integer, string, usually
tor
iza
the nvarchar type in SQL Server, or date cand
ión time. You should also define the primary key for the table—the
.
value of this column uniquely identifies each record and is essential for defining the relationships with records in
other tables.

• Views. These are common presentations of data in tables and are based on queries. For example, a view can
join two tables, such as a products table and a stock levels table.
Es
te
do
• Stored procedures. cu These are common sequences of database operations that you define in the database.
No me
es
Some operations ntcomplex
tán paarertn
op
ert
and might involve a complex transformation of the data. You can define a stored
p e e
erm rs@suchnea complex routine.
procedure to implement
itid ed ce a
as u Da
• Security. You need to consider las cachow nie web application will authenticate with the database server and how you
co ionit the
pia .co l Mac
will authorize access to each database ss m table.ha
in do
au .
tor
iza
ció
n.
In UML, a physical data model is a diagram that depicts tables, columns, data types and relationships between
tables.

Working with Database Administrators

Es
te
do
Sometimes, the developer
cu
me
team has full control over the database that underlies the web application. This happens,
No
n
for example,eswhen pthe organization
t is small or when the web application has a separate database server with no
tán art o pe
business-critical pdata. ne rte in larger organizations or in projects where the database stores critical business
erm However,
rs ne
information, there may itidbe @ ed ce a team of database administrators (DBAs). These DBAs are usually highly
as a dedicated
uc
l s ac Dan
skilled in database design aand ion ie
coadministration, and their job is to ensure data integrity based on the organization’s
pia it.co l Mac
data storage policy. ss m ha
in do
au .
tor
iza
If your project database is administered by the cióDBA team, it is essential to communicate well with them. You need
n.
to consult with DBAs for their requirements. They frequently impose a list of technical requirements that other
stakeholders may not understand. As you build and deploy the web application, DBAs are responsible for creating
databases on the right servers or clusters and assigning permissions. DBAs are critical contributors in delivering
the web application.
Es
te
Database Design do in Agile Development and Extreme Programming
cu
No me
es nt
tán p art o pe
n
pe and eextreme rt
Agile development rm rs@ eneprogramming are characterized by a relatively small amount of initial planning and
i tid
documentation, and acknowledge ed cethat a requirements are likely to change throughout the development project. If you
as u
las caci Dani
are working by using these development
co on methodologies,
e you will only create domain models during the initial
pia it.co l Mac
planning phase of your project. You s do not
m develop
h LDMs or physical data models until you write code that
implements the functional requirements. During the development phase, you will discuss requirements with users
and DBAs and create LDMs and physical data models just before you write the code.

https://www.skillpipe.com/#/reader/book/4ed7876c-8864-4cf5-91ee-491726dfe322 8/22
1/9/2020 Module 2: Designing ASP.NET MVC 5 Web Applications

In agile development and extreme programming, the database design changes throughout the project until
deployment. Therefore, developers should be able to alter the database whenever necessary without consulting
DBAs or complying with complex data policies. For this reason, you should use a separate database hosted on a
dedicated development server.

In some cases, the development project works with a database that already exists. For example, you may be
developing a web application that presents and edits information from the company employee database on the
intranet. In such cases, the database does not change as the code is developed, but functional and technical
E
requirements smayte still change. You should copy the database to an isolated development database server to
do
ensure that your cu
developing code does not erroneously modify business-critical data.
No me
es nto
tán p ar pe
pe tners rten
Question: You wantmto r e a shopping cart in your web application. How many logical data models are
itidimplement
@
ed ce a
a u
required? How many database sl ac Dare
as ctables an required?
co ionit iel M
pia .c
s s om acha
in do
Planning for Distributed Applications au
tor
.
iza
ció
n.

Es
te
do
cu
No me
es nt
tán part o pe
pe n e rt
rm rs@ enec
itid ed ea
as u
las caci Dani
co on e
pia it.co l Mac
ss m ha
in do
au .
tor
iza
ció
n.

Es
te
do
cu
No me
es nt
tán p art o pe
pe n e rt
rm rs@ enec
For small web applicationi tid with ed lesse user
a traffic levels, you can choose to host all the components of your web
as u
las caci Dani
application on a single server.coHowever, on as
e your web application grows, a distributed deployment, in which different
pia it.co l Mac
servers host separate components s sof themapplication,ha is often used. Distributed web applications often use a
in do
layered architecture: a u .
tor
iza
ció
n.
• Presentation layer. Components in this layer implement the user interface and presentation logic. If you are
building an MVC web application, views and controllers make up your presentation layer.

• Business logic layer. Components in this layer implement high-level business objects such as products, or
customers.EsIf you are building an MVC web application, models make up your business logic layer.
te
do
• Data access cu Components in this layer implement database access operations and abstract database
layer.
No me
e nt
s
objects, such p art o pfrom
tán as tables, ert business objects. For example, a product business object may include data from
pe n e en
both the Products rm andrsStockLevels
@ e database tables. If you are building an MVC web application, models often
itid ed ce a
a s
make up both businesslalogiccaand u D
s cio data
an access layers. However, with careful design and coding practices, it is
iel
possible to refactor code tocoseparate n
pia it.cothese M layers.
s m ach
• Database layer. This layer has the database itself.

https://www.skillpipe.com/#/reader/book/4ed7876c-8864-4cf5-91ee-491726dfe322 9/22
1/9/2020 Module 2: Designing ASP.NET MVC 5 Web Applications

If you implement such a layered architecture in your web application, you can host each layer on separate servers.
Often, for example, the presentation layer is hosted on one or more IIS servers, the business logic and data access
layers are hosted on dedicated middle-tier servers, and the database is hosted on a dedicated SQL Server. This
approach has the following advantages:

• You can specify server hardware that closely matches each role. For example, a server that hosts business logic
components requires good memory and processing resources.

Es
• You can dedicate multiple servers to each role to ensure that a single server failure does not cause an
te
do
interruption c
in service.
um
No en
es t
tán p art o pe
• Only the web pservers n rt be on the perimeter network. Both middle-tier servers and database servers can be
erm rmust e s@ enec
itid
protected by two firewalls du e adirect access from the Internet.
ewithout
as
las caci Dani
co on el
pia it.co layersM
• Alternatively, you can host middle-tier ss m achand ad
databases on a cloud service, such as Windows Azure.
in o
au .
tor
iza
ció
n.
Communication Between Layers

When a single server hosts all the components of a web application, the presentation, business logic, and data
access components run in a single process in the web server memory. Communication between components is not
an issue. However,
Es when you run different layers on different servers, you must consider two factors:
te
do
cu
No each layer me
• How does es ntexchange information and messages?
tán part o pe
pe n e rte
mi rs@
• How does each rserver
ne
authenticate
tid ed ce a and secure communications with other servers?
as uc
las ac Dan
co ionit iel M
pia .c
s s om acha
in do
The communication of information andasecurity uto .
is performed in different ways between the various layers:
riz
ac
ión
.
• Between the browser and presentation layer web server. In any web application, the web browser, where the
presentation layer runs, communicates with the web server by using HTTP. If authentication is required, it is
often performed by exchanging plain text credentials. You can also use Secure Sockets Layer (SSL) to encrypt
this sensitive communication.
Es
• Between the teweb server and the middle-tier server. The communication and security mechanisms used for
do
cu
communication
No me
between the web server and the middle-tier server depends on the technology that you use to
es nto
tán
build the business p arlogic p
components:
e
pe tners rten
rm e
itid @ed ce a
o Web services: If you as implement
uc business objects and data access classes as web services, the presentation
las ac Dan
layer components communicate c i o n iel the web services by using HTTP. You can perform authentication by
op i with
ias t.com Mach
using the Kerberos protocol that sin is a part of adWindows Integrated Authentication or by using plain text
au o.
encrypted with SSL. t o riz
ac
ión
.
o Windows Communication Foundation (WCF) services: If you implement business objects and data access
classes as WCF services, you can choose between two hosting mechanisms. You can host the WCF
services within IIS, in which case, HTTP is the transport mechanism and SSL is the security mechanism. You
can also host the WCF services within a Windows Process Activation Service (WAS), in which case, you can
use TCP,
Es Microsoft Message Queuing (MSMQ), or named pipes as the transport mechanism.
te
do
cu
No middle-tier
• Between meserver and database. The middle-tier server sends T-SQL queries to the database server,
es nto
tán p art against
pe the database by using the required credentials that are often included in the
which authenticates n
pe ers rten
r m @ e
connection string. itid ed ce a
as uc
las ac Dan
co ionit iel M
pia .co
s m ach
Note: Web services and WCF services are covered in detail in Course 20487C: Developing Windows
Azure and Web Services.
https://www.skillpipe.com/#/reader/book/4ed7876c-8864-4cf5-91ee-491726dfe322 10/22
1/9/2020 Module 2: Designing ASP.NET MVC 5 Web Applications

Question: What are the advantages of writing middle-tier components as WCF services and not web services?

Planning State Management

Es
te
do
cu
No me
es nt
tán part o pe
pe n e rt
rm rs@ enec
itid ed ea
as u
las caci Dani
co on e
pia it.co l Mac
ss m ha
in do
au .
tor
iza
ció
n.

Es
te
do
cu
No me
es nt
tán part o pe
pe n e rt
rm rs@ enec
itid ed ea
as u
las caci Dani
co on e
pia it.co l Mac
ss m ha
in do
In application development, the application a uto state refers . to the values and information that are maintained across
riz
multiple operations. Hypertext Transfer Protocol a ció (HTTP) is fundamentally a stateless protocol, which indicates that
n.
it has no mechanism to retain state information across multiple page requests. However, there are many scenarios,
such as the following, which require state to be preserved:

• User preferences. Some websites enable users to specify preferences. For example, a photo sharing web
applicationEsmight enable users to choose a preferred size for photos. If this preference information is lost
te
between pagedorequests,
cu users have to continually reapply the preference.
No me
es n to
pa
tán Some peauthenticate users to provide access to members-only content. If the user identity is
• User identity. r sites
pe tners rten
r m
lost between pageitrequests, @ ec user must re-enter the credentials for every page.
ida ed the ea
sl u c D
as a cio anie
• Shopping carts. If the content c n
op of aitshopping l cart is lost between page requests, the customer cannot buy
ias .com Mach
anything from your web application. sin ad
au o.
tor
iza
ció
n.
In almost all web applications, state storage is a fundamental requirement. ASP.NET provides several locations
where you can store state information, and simple ways to access the state information. However, you must plan
the use of these mechanisms carefully. If you use the wrong location, you may not be able to retrieve a value when
you expect to. Furthermore, poor planning of state management frequently results in poor performance.
Es
te
do
In general, you cu be careful about maintaining large quantities of state data because it either consumes server
should
No me
n
memory, if itesistástored
pa ontothe server, or slows down the transfer of the webpage to the browser, if it is included in a
n p rtne perte
webpage. If you need e r
rm to stores ne values, you can choose between client-side state storage or server-side state
state
itid @ed ce a
storage. as uc
las ac Dan
co ionit iel M
pia .co
s m ach
Client-Side State Storage

https://www.skillpipe.com/#/reader/book/4ed7876c-8864-4cf5-91ee-491726dfe322 11/22
1/9/2020 Module 2: Designing ASP.NET MVC 5 Web Applications

When you store state information on the client, you ensure that server resources are not used. However, you
should consider that all client-side state information must be sent between the web server and the web browser,
and this process can slow down page load time. Use client-side state storage only for small amounts of data:

• Cookies. Cookies are small text files that you can pass to the browser to store information. A cookie can be
stored:

o In the client computer memory, in which case, it preserves information only for a single user session.
Es
te
o On the clientdo computer hard disk drive, in which case, it preserves information across multiple sessions.
cu
No me
es nto
tán can
Most browsers pa store pecookies only up to 4,096 bytes and permit only 20 cookies per website. Therefore,
rtn
pe ers rten
r
cookies can be used mi only @ for esmall
tid ed ce a quantities of data. Also, some users may disable cookies for privacy
as u Dacookies for critical functions.
purposes, so you should lasnotcrely
ac on n
co ionit iel M
pia .co
ss m ach
• Query strings. A query string is the in part of theadURL o. after the question mark and is often used to communicate
au
form values and other data to the server. t ori You can use the query string to preserve a small amount of data from
za
ció
one page request to another. All browsers support n. query strings, but some impose a limit of 2,083 characters on
the URL length. You should not place any sensitive information in query strings because it is visible to the user,
anyone observing the session, or anyone monitoring web traffic.

Es
t
Note: Ine dASP.NET
oc Web Forms applications, View State, Control State, and Hidden Fields can be used to
um
No state information
store en in the rendered HTML that the server sends to the client. These mechanisms are
es to
tán parin
not available MVC p e web applications because they do not use Web Forms controls.
pe tners rten
rm e
itid @ed ce a
as u
las caci Dani
c o e
Server-Side State Storage opi nit.c l Ma
as om ch
sin ad
au o.
tor
State information that is stored on the server iza consumes server resources, so you must be careful not to overuse
ció
server-side state storage or risk poor performance. n.

The following locations store state information in server memory:

• TempData. This is a state storage location that you can use in MVC applications to store values between one
Es
request andteanother.
do You can store values by adding them to the TempData collection. This information is
cu
No for a single
preserved m en request only and is designed to help maintain data across a webpage redirect. For
es pa to
example, yout á tn itpto
n pcan ruse er pass an error message to an error page.
erm ers@ tene
itid e ce
• Application State. This as is adustate aD
las caci storage an location that you can use to store vales for the lifetime of the
ie
co inonapplication
application. The values stored pia i t .c l M state are shared among all users. You can store values by adding
s s om acha
them to the Application collection. in If the web server do or the web application is restarted, the values are
au .
tor
destroyed. The Application_Start() procedure iza in the Global.asax file is an appropriate place to initialize
ci
application state values. Application state isónot n. an appropriate place to store user-specific values, such as
preferences, because if you store a preference in application state, all users share the same preference, instead
of having their own unique value.

• Session state. The Session collection stores information for the lifetime of a single browser session and values
Es are specific to a single user session; they cannot be accessed by other users. By default, if the web
stored here te
do application is restarted, the values are destroyed. However, you can configure ASP.NET to
server or the web cu
No me
store session
es state innta database or state server. If you do this, session state can be preserved across restarts.
tán p art o pe
n
Session state piseravailable
e rfor
te both authenticated users and anonymous users. By default, session state uses
mi rs@ nece
t id e d
cookies to identify users, as but u youacan configure ASP.NET to store session state without using cookies.
las caci Dani
co on e
pia it.co l Mac
s m h

https://www.skillpipe.com/#/reader/book/4ed7876c-8864-4cf5-91ee-491726dfe322 12/22
1/9/2020 Module 2: Designing ASP.NET MVC 5 Web Applications

If you choose to use these server memory locations, ensure that you estimate the total volume of state data that
may be required for all the concurrent users that you expect to manage. Application state values are stored only
once, but session state values are stored once for each concurrent user. Specify server hardware that can easily
manage this load, or move state data into the following server hard disk drive-based locations.

• Profile properties. If your site uses an ASP.NET profile provider, you can store user preferences in profiles.
Profile properties are persisted to the membership database, so they will be kept even if the web application or
web server restarts.
Es
te
do
• Database tables. cuIf your site uses an underlying database, like most sites do, you can store state information in
No me
nto
its tables.esThis
tán ispaartgood peplace to store large volumes of state data that cannot be placed in server memory or on
pe n rte
ers example,
the client computer. rm For @ ne if you want to store a large volume of session-specific state information, you
itid ed ce a
can store a simple ID svalue a u Da
las in ca the Session
c n
collection and use it to query and update a record in the database.
co ionit iel M
pia .c
s s om acha
in do
au .
tor
Remember that state data is only one formizof ac information that an ASP.NET application places in server memory.
ión
For example, caches must share memory with state . data.

Question: You show the visitors of your website a choice of countries. When they pick a state, you want to redirect
them to a page that shows a map of that state. You will not use the name of the chosen country that the user
selected after this. Which location should you use to store the name of the chosen country?
Es
te
do
cu
PlanningNo Globalization me
nt and Localization
es
tán part o pe
pe ne rt
rm rs@ enec
itid ed ea
as u
las caci Dani
co on e
pia it.co l Mac
ss m ha
in do
au .
tor
iza
ció
n.

Es
te
do
cu
No me
es nt
tán p art o pe
pe n e rt
rm rs@ enec
itid ed ea
as u
las caci Dani
co on e
pia it.co l Mac
ss m ha
in do
au .
tor
iza
ció
n.

The Internet is an international network, and unless you are sure that the audience of your web application speaks
a single language,
Es you must ensure that everyone can read your content. You limit the site’s potential audience if
te
you render pagesdoonly
cu in English. The process by which you make a web application available in multiple
N me
languageso is
escalledpglobalization
nt or internationalization. The process by which you make a web application
tán art o pe
available in a specific
pe n
language
e r t and culture is called localization.
rm rs@ enec
itid ed e a
as u
las caci Dani
Managing Browsers for Languages co on and e Regions
pia it.co l Mac
s m h
There is an internationally-recognized set of language codes that specify a culture on the Internet. These codes are
in two parts:
https://www.skillpipe.com/#/reader/book/4ed7876c-8864-4cf5-91ee-491726dfe322 13/22
1/9/2020 Module 2: Designing ASP.NET MVC 5 Web Applications

1. The language. For example, English is “en”, and Russian is “ru”.

2. The region. This specifies regional variations within a language and affects spellings and formats. For
example, in United States English, “Globalize” is correct and dates are written in mm/dd/yy format, whereas in
British English, “Globalise” is correct and dates are written in dd/mm/yy format.

The full language and region code for United States English is “en-US” and the full language and region code
for British English is “en-UK”.
Es
te
do
cu
No me
The preferredes language nthat
t users choose is available as the language code in the HTTP Header of the user’s
tán part o pe
browser. This is thepe value n ers thatrteyou respond to, so as to globalize your site. Alternatively, you can provide a control,
rm @ ne
c
such as a drop-downitlist, du eusers
ida in ewhich a D can choose their preferred language. This is a good example of a user-
sl c a an
preference that you can store a s c in thecionsession i state.
op it.c el Ma
ias om ch
sin ad
au o.
Using Resource Files tor
iza
ció
n.
When the user specifies a preferred language and region, you must respond by rendering pages for that culture.
One method to provide a localized response is to use resource files to insert text in the appropriate language into
the page at run time. A resource file is a simple dictionary of terms in a given language. For each term in the file,
you need to specify a name, a value, and optionally, a comment. The file has an .resx extension. The file name also
includes the Elanguage
ste code that the resources apply to. For example, if you create a resource file for a view called,
Index, which stored do values in Chilean Spanish, you would name the file, Index.es-CL.resx.
cu
No me
es nt
tán part o pe
Resource files can n
pe alsoehave rta neutral culture. This means that the file applies to any region in a given language.
rm rs@ enec
itid
For example the Index.es.resx ed file eapplies
a Spanish terms, regardless of the regional code that has been chosen.
as u
las caci Dani
co on e
pia it.co l Mac
You should also create corresponding s m
sin default resourceha files, without any language code in the file name, such as
do
au .
Index.resx. These files are used when a tpreferred ori language is not specified.
za
ció
n.
When you use resource files to localize a site, each view applies, regardless of the preferred language. You must
insert extra Razor code in the view to take text values from a resource file. This can reduce the readability of view
files because all the rendered text comes from resource files. However, supporting new languages is easier,
because you only need to add a new resource file for each language that can be created by a professional
translator. Es
te
do
cu
No me
Using Separate
es Views nt
tán p art o pe
pe n e rt
rm rs@ enec
itid ed separate,ea
Some developers preferasto use u parallel sets of views for each supported language code. If you use this
las caci Dani
approach, you must insert code co into onthe controllers
e to detect the preferred language that the user has specified.
pia it.co l Mac
Then, you can use this value to render s s the m correct ha view.
in do
au .
tor
iza
When you use separate views to globalize and ciólocalize a site, views are more readable, because most of the text
n.
and labels remain in the view file. However, you must create view files, which requires you or your team members
to be proficient in the target language.

Question: Which language do you consider would be appropriate to specify in the default resource file?
Es
te
do
cu
Lesson No 2: Designing
me
nto
Models, Controllers, and Views
es p
tán ar pe
pe tners rten
rm @ e
Models, controllers, and ed arecethe
itid views a fundamental building blocks of an MVC 5 web application. In a complex site,
as uc
las ac Dan
there may be hundreds of models, co i ieand controllers. You need to manage these objects and plan your
oviews,
n
pia it.co l Mac
application well, so that it is easy to s managem theh organization and internal structure during development. A thorough
plan ensures that you detect any incorrect code and debug problems rapidly.

https://www.skillpipe.com/#/reader/book/4ed7876c-8864-4cf5-91ee-491726dfe322 14/22
1/9/2020 Module 2: Designing ASP.NET MVC 5 Web Applications

Lesson Objectives
After completing this lesson, you will be able to:

• Describe how to design models.

• Describe how to design controllers.

• Describe Ehow to design views.

ste
do
cu
No me
es nt
tán part o pe
Designing Models pe n e rt
rm rs@ enec
itid ed ea
as u
las caci Dani
co on e
pia it.co l Mac
ss m ha
in do
au .
tor
iza
ció
n.

Es
te
do
cu
No me
es nt
tán part o pe
pe n e rt
rm rs@ enec
itid ed ea
as u
las caci Dani
co on e
pia it.co l Mac
ss m ha
in do
au .
tor
iza
ció
n.

E
A fundamentalsteactivity in the MVC design process is designing a model. Each model class within the model
do
c
No a kind ofuobject
represents me that your application manages. You cannot plan for controllers and views until you
nto
understand ethe pa
stá structure and design of the model.
n p rtne perte
erm rs@ ne
itid ed ce a
as and u Da
Identifying Model Classes las caProperties
c n
co ionit iel M
pia .co
ss m ach
The use cases, usage scenarios, or iuser n a storiesathat do you gathered during the analysis phase of the project should
.
uto
enable you to determine the model classeszthat r i ac you need to create. Each model class has a range of properties.
ión
For example, consider the following use case example . shared earlier.

1. The user clicks the Add Photo link on the main site menu.

2. If the user is anonymous, the logon page is shown and the user provides credentials.
Es
te
3. do
If the credentials
cu are correct, the CreatePhoto view is displayed.
No me
es nto
The usertátypes p
4. n p aa rtntitle.pert
erm ers@ ene
itid ed ce a
5. The user specifies athe u
s l photo fileDto upload.
as cacio anie
co nit
p .co l Mac
6. The user optionally types aiadescription
s m forhthe photo.

7. The user clicks the Upload button.

https://www.skillpipe.com/#/reader/book/4ed7876c-8864-4cf5-91ee-491726dfe322 15/22
1/9/2020 Module 2: Designing ASP.NET MVC 5 Web Applications

8. The web application stores the new photo and displays the photo gallery to the user.

This example includes the following objects, each of which requires a model class:

• User. The User model class must include properties to store credentials, such as the user name and the
password.
Es
• Photo. The tPhoto
ed
oc model class must include the Title and Description properties.
No um
en
es t
tán p art o pe
pe n ers rten
rm @ you e
Other use cases similarlyitid help ed ceadd a new model classes or new properties to the User and Photo model classes.
as uc
las ac Dan
co ionit iel M
pia .co ac
Domain Model and Logical Data s Model
sin m Diagrams ha
do
au .
tor
iza
You can use Domain Model diagrams and Logical ció Data Model (LDM) diagrams to analyze the information your
n.
website manages and suggest a physical data model or database design. You can return to these diagrams to plan
model classes. Each object in your Domain Model or LDM diagram should be implemented as an MVC model
class. The Domain Model diagram includes not only the names of those classes, but also the LDM diagram, if you
have created one, with property names and data types.
Es
te
Relationships and do Aggregates
cu
No me
es nt
tán part o pe
When you identify n
pethe model
e rclasses
t that you will implement in your website, you must also consider the
rm rs@ enec
relationships betweenitidthem.
as
eFor
d uc
ea
example, in the use case of the sample Photo Sharing application, each photo is
las one, Da
ac user.
associated with one, and only n
co ionit iel M is known as a one-to-one relationship. Each user, however, can
This
pia .c ac
create multiple photos. This is known s s asoma one-to-many
ha relationship.
in do
au .
tor
iz
Domain Model diagrams and LDM diagramsacinclude ión such relationships as links between objects. Numbers at the
.
ends of each link show whether the relationship is one-to-one, one-to-many, or many-to-many.

Aggregates place further limits on the behavior of model classes and clarify relationships. For example, in a photo
sharing application, a photo is created by a single user. Other users can make multiple comments on each photo. If
a user deletes
Es a photo, all the comments on that photo should also be deleted from the database. However, the
te
user who createddothecu photo should not be deleted with the photo because he or she may add other photos or
N
commentso on meIn this case, comments and photos should be placed in an aggregate, but users should be
es the site.
p
nto
tán
outside the aggregates. art The pephoto is the “root entity” of the aggregate—this means that deleting a photo deletes all
pe n e rt
rm rs@ enec
the associated comments, itid but
ed deleting
e a a comment does not delete the associated photo.
as u
las caci Dani
co on e
pia it.co l Mac
Entity Framework ss m ha
in do
au .
tor
iza
Entity Framework is an Object Relational Mapping ció (ORM) framework for .NET Framework-based applications. An
n.
ORM framework links database tables and views to classes that a developer can program against, by creating
instances or calling methods. Entity Framework has been a part of ADO.NET since .NET Framework 3.5.

When you use Entity Framework in your MVC web application, it links tables and views to the model classes that
you have planned.
Es You do not need to write SQL code to query or update database tables because Entity
te
Framework does dthis
oc for you. Entity Framework is well integrated with the Language Integrated Query (LINQ)
No um
language. en
es t
tán p art o pe
pe ne rt
rm r s@ enec
If you plan to use Entity i ed
tid Framework e afor data access, you should decide on how the database will be created during
as uc Da
the planning phase: las a c n
co ionit iel M
pia .co
s m ach
o Database-First. Use the Entity Framework in the database-first mode when you have a pre-existing database
to work with. This may happen because you already have data from an earlier system or because a DBA has
https://www.skillpipe.com/#/reader/book/4ed7876c-8864-4cf5-91ee-491726dfe322 16/22
1/9/2020 Module 2: Designing ASP.NET MVC 5 Web Applications

designed the database for you. You can also choose this mode if you are familiar with creating databases in a
database administration tool, such as Microsoft SQL Server Management Studio. When you use this mode,
you have to specify the database connection string. Entity Framework connects to the database and
examines the database schema. It creates a set of classes for you to use for data access.

o Model-First. Use Entity Framework in the model-first mode when you do not have a pre-existing database and
prefer to design your model in Visual Studio. You can use the Entity Designer tool to name, configure, and link
your model classes. This creates XML files that Entity Framework uses both to create model classes and to
create E stedatabase with its tables and relationships.
the
do
cu
No me
o Code-First.
es Use nt Framework in the code-first mode when you have no pre-existing database and prefer
Entity
tán part o pe
pe models
to design your n e rt
entirely in C# code. Your code must include DBContext and DBSet objects—these
rm rs@ enec
i t id
correspond to the adatabase e du and e a Dits tables. When you run the application for the first time, Entity Framework
sl
as cacio anie
creates the database for coyou. nit
pia .c l M
s s om acha
in do
au .
tor
iza
Design in Agile and Extreme Programmingción.

Agile and Extreme Programming projects are characterized by short design phases in which data models are not
completed. Instead, a simple design, with little detail, is created and developers fill in details as they build code by
continuously discussing requirements with users and other stakeholders.
Es
te
d
In an MVC project,octhis
um means that you identity the model names and relationships during the design phase. You
No en
es
can record these on to
tán p aart Domain pe Model UML diagram. However, you can leave details such as property names and
ne rte development phase, along with the complete LDM diagrams.
data types to be pfinalized
erm rs@ the in ne
itid ed ce a
as uc
las ac Dan
Entity Framework lets you work co in ithe
on iel or Extreme Programming styles. For example, the framework can
pia it.cAgile
om ach
M
update the database when the model s ad
sin changes. Alternatively, the framework can update the model when the
au o.
database changes. Entity Framework can rperform t o these updates in any Entity Framework mode.
iza
ció
n.
Designing Controllers

Es
te
do
cu
No me
es nt
tán p art o pe
pe n e rt
rm rs@ enec
itid ed ea
as u
las caci Dani
co on e
pia it.co l Mac
ss m ha
in do
au .
tor
iza
ció
n.

Es
te
do
cu
No me
es nt
tán p art o pe
pe n e rt
rm rs@ enec
itid ed ea
as u
las caci Dani
co on e
pia it.co l Mac
s m h
In an ASP.NET MVC web application, controllers are .NET Framework-based classes that inherit from the
System.Web.Mvc.Controller base class. They implement input logic—this means that they receive input from the

https://www.skillpipe.com/#/reader/book/4ed7876c-8864-4cf5-91ee-491726dfe322 17/22
1/9/2020 Module 2: Designing ASP.NET MVC 5 Web Applications

user in the form of HTTP requests and select both the correct model and view to use, to formulate a response.

Identify Controllers and Actions

In an ASP.NET MVC web application, there is usually one controller for each model class. Conventionally, if the
model class is called “Photo”, the controller is called “PhotoController”. If you follow this convention in your design,
you can use the MVC default routing behavior to select the right controller for a request.

Es
te
However, for each do controller there can be many actions—each action is implemented as a method in the controller
cu
N
and usually me
o ereturns a view. nto You often require separate actions for GET and POST HTTP request verbs. Similar to
stá pa
designing a model,n p you rtn canpeidentify the actions to write in each controller by examining the use cases you gathered
e ers rten
during analysis. Forrmexample,
itid @
ed
ec
consider
e a the following use case shared earlier.
as uc Da
las a c n
co ionit iel M
pia . c omon theac main site menu.
1. The user clicks the Add Photo s s link ha
in do
au .
tor
2. If the user is anonymous, the logon page iza is shown and the user provides credentials.
ció
n.
3. If the credentials are correct, the CreatePhoto view is displayed.

4. The user types a title.

5. The user specifies the photo file to upload.

Es
te
do
6. The user optionally
cu
me
types a description for the photo.
No
es n t
t n part o pe
7. The useráclickspe the ne Uploadrt button.
rm rs@ enec
itid ed ea
as storesu Da photo and displays the photo gallery to the user.
8. The web application las cathecio new n
co nit iel M
pia .co
ss m acha
in do
au .
tor
You have already identified Photo and Userizamodel ció classes from this use case. Adhering to the MVC convention,
n .
you should create a PhotoController and a UserController. The use case shows that the following actions are
needed for each controller.

Controller Action Description

Es
Photo te AddPhoto (GET) The AddPhoto action for GET requests creates a new instance of the Photo model
do
cu class, sets default values such as the created date, and passes it to the correct
No me
es nto view.
tán p art pe
n
pe AddPhoto
e r ten
rm rs@ (POST) e The AddPhoto action for POST requests calls the Photo model class methods to
itid ed ce a
as uc D save the photo values to the database and redirects the browser to the
las ac an
co ionit iel M DisplayGallery action.
pia .co a ch
DisplayGallery (GET) ss m aThe
in do DisplayGallery action for GET requests displays all the photos stored in the
au .
database.
tor
iza
ció
User Logon (GET) n.The Logon action for GET requests displays a view that an anonymous user can
enter credentials into.

Logon (POST) The Logon action for POST requests checks user credentials against the
membership database. If the credentials are correct, the Logon action authenticates
and redirects the user to the originally requested page.

Es
te
Design in Agile dand
oc Extreme Programming
No um
en
es t
tán p art o pe
pe ofnemodels,
Similar to the design
r
rt you will only make generalized plans for controllers during the design phase of an
s@ enec
rm
i
Agile Development ortiExtreme
da ea
ed Programming project. Because you have identified the model classes necessary,
sl uc Da
as
you can plan the required controllers. a cio However,
nie you should specify only a few actions at this stage.
co n
pia it.co l Mac
s m h
Designing Views

https://www.skillpipe.com/#/reader/book/4ed7876c-8864-4cf5-91ee-491726dfe322 18/22
1/9/2020 Module 2: Designing ASP.NET MVC 5 Web Applications

Es
te
do
cu
No me
es nt
tán part o pe
pe n e rt
rm rs@ enec
itid ed ea
as u
las caci Dani
co on e
pia it.co l Mac
ss m ha
in do
au .
tor
iza
ció
n.

Es
te
do
The userNinterface cisum a vital component of any system because it is the part that the users, budget holders, and
oe en
stá
other stakeholders psee to interact with. Users are most interested in getting this part of the application right and
and
a
n p rtne perte
frequently have the erm mostrsto sayneabout its design. As a developer, you have a chance to impress your users by
itid @ed ce a
designing and implementing as ausophisticated user interface, which may result in more business.
las caci Dani
co on e
pia it.co l Mac
ss m ha
In an ASP.NET MVC web application, do
in the user interface is created by building views.
au .
tor
iza
ció
Views, Template Views, and Partial Views n.

There is a many-to-one relationship between MVC controllers and views. For example, a controller may use one
view to display a single photo, another view to display several photos, and a third view to enable users to upload
new photos. Each view corresponds to a webpage that the application can display to the user, although it can
Es
display differentte data. For example, the PhotoDetails view can display different photos, depending on the ID
do
parameter that cu
is passed
No me to it.
es nt
tán p art o pe
p n ers rten
As you plan views,eryou mi should @ also e consider parts of the user interface that appear on all pages. For example, the
tid ed ce a
company logo, main site smenu, a u D legal information, and logon controls may need to appear on every page.
las clinks
ac to
ion aniel
You can place these user interface c op components
i
ias t.com Mach in a template view to create a consistent look and feel across
pages. sin ad
au o.
tor
iza
ció
n.
Note: Template views in ASP.NET MVC web applications perform the same role as master pages in
ASP.NET Web Forms applications.

Some user interface components do not appear on all pages, but are re-used on several pages. For example,
Es
comments may tebe displayed in a single photo display, on the gallery, or on other pages. By creating a partial view,
do
you can N cu
create a re-usable user interface element that can appear in many locations in this manner, without
me
oe nto
stá
duplicating code. pa
n p rtne perte
erm rs@ ne
itid ed ce a
Creating Wireframes as la ucac Dan
sc ion iel
op i
ias t.com Mach
A common technique to discuss and plan the user interface for your application is to create wireframe diagrams.
These are simplified layouts that show where the elements will appear on the final webpages. They are intended to

https://www.skillpipe.com/#/reader/book/4ed7876c-8864-4cf5-91ee-491726dfe322 19/22
1/9/2020 Module 2: Designing ASP.NET MVC 5 Web Applications

communicate to users the essential functional parts of the user interface, but do not include graphics, logos, or
colors. It is not necessary to create a wireframe model for every view in your application, but for only the most
important ones.

You can begin a wireframe diagram by sketching it on a whiteboard, in conversation with a user. Many tools are
available to create more formal versions—for example, Microsoft Visio has excellent wireframe drawing capabilities.

Design in Agile and Extreme Programming

Es
te
do
cu
N
You do noto design many me parts of the user interface during the initial phases of Agile Development or Extreme
es nto
t á pa pe you design views and partial views in close consultation with users during the
n p rtneInstead,
Programming projects. r
erm rs@ tene
development phase. This itid ed ceven
applies e a to the template view that displays common components of your user
as uc Da
interface, although it is likely a
las that cthe template
n view is one of the first user interface components that is designed
co ionit iel M
and created. You will create theptemplate ias .comview acduring the early iterations of the development phase of the project.
sin ha
do
au .
tor
iza
Lab: Designing ASP.NET MVC ció 5 Web Applications
n.

Scenario
Your team has chosen ASP.NET MVC 5 as the most appropriate ASP.NET programming model to create the photo
Es
sharing application for the Adventure Works web application. You need to create a detailed project design for the
te
d
application, and haveoc been given a set of functional and technical requirements with other information. You have to
No um
plan: en
es t
tán p art o pe
pe ne rt
rm rs@ enec
itid ed use e ato implement the desired functionality.
• An MVC model that you
as can u
las caci Dani
co on el
i Ma
• One or more controllers andpcontroller ias t.comactions ch that respond to users actions.
sin ad
au o.
tor
• A set of views to implement the user interface. iza
ció
n.
• The locations for hosting and data storage.

Objectives
Es
te
After completing dthis
oc lab, you will be able to:
No um
en
es t
tán p art o pe
• Design an ASP.NET
pe neMVCr5 t web application that meets a set of functional requirements.
rm rs@ enec
itid ed ea
as uc
• Record the design in an ac D
laaccurate, an
sc ion precise,
i
and informative manner.
op it.c el Ma
ias o ch
sin m ad
au o.
tor
Lab Setup i za
ció
n.
Estimated Time: 40 minutes

You will find the high-level steps on the following page: https://github.com/MicrosoftLearning/20486-
DevelopingASPNETMVCWebApplications/blob/master/Instructions/20486C/20486C_MOD02_LAB_MANUAL.
md. Es
te
do
cu
No me
You will findethe ntsteps
stá detailed
pa o on the following page: https://github.com/MicrosoftLearning/20486-
n p rtne perte
DevelopingASPNETMVCWebApplications/blob/master/Instructions/20486C/20486C_MOD02_LAK.md.
erm rs@ ne
itid ed ce a
as u
las caci Dani
c on el
Exercise 1: Planning Model op Classes
i
ias t.com Mach

Scenario
https://www.skillpipe.com/#/reader/book/4ed7876c-8864-4cf5-91ee-491726dfe322 20/22
1/9/2020 Module 2: Designing ASP.NET MVC 5 Web Applications

You need to recommend an MVC model that is required to implement a photo sharing application. You will propose
model classes based on the results of an initial investigation into the requirements.

Exercise 2: Planning Controllers

Scenario

You need to Erecommend

ste a set of MVC controllers that are required to implement a photo sharing application. You
do
will propose controllers
cu based on the results of an initial investigation into the requirements.
No me
es nt
tán part o pe
pe n e Views rte
Exercise 3: Planning rm rs@ ne
itid ed ce a
as uc
las ac Dan
co ionit iel M
pia .c
Scenario s s om acha
in do
au .
tor
You need to recommend a set of MVC views iza that are required to implement a photo sharing application. You will
ció
propose views based on the results of an initial ninvestigation . into the requirement.

Exercise 4: Architecting an MVC Web Application

Es
Scenario te
do
cu
No me
You need toesrecommend nt a web server and database server configuration that is required to implement a photo
tán part o pe
n
pe Youerwill
sharing application. rte
rm s@ proposene details based on the results of an initial investigation into the requirements.
itid ed ce a
as uc
la ac Dan
Review Question(s) s cop ionit. iel M
ias co ac
sin m ha
do
au .
tor
iza
Check Your Knowledge ció
n.

Discovery
What model classes should be created for the photo sharing application based on the initial investigation?

Es
Show solution Reset
te
do
cu
No me
es nt
tán p art o pe
pe n e rt
rm rs@ enec
Check Your Knowledge itid
as
ed
u
ea
las caci Dani
co on e
pia it.co l Mac
ss m ha
Discovery in do
au .
tor
What controllers should be created for the photo i za sharing application based on the initial investigation?
ció
n.
Show solution Reset

Check Your
Es Knowledge
te
do
cu
No me
Discoveryestá nto
pa
n p rtne perte
e m rs@ ne
What views should rbe itcreated ce photo sharing application?
edfor the
ida uc aD
sl a
Show solution Resetas c cio anie
op ni l
ias t.com Mach

Module Review and Takeaways

https://www.skillpipe.com/#/reader/book/4ed7876c-8864-4cf5-91ee-491726dfe322 21/22
1/9/2020 Module 2: Designing ASP.NET MVC 5 Web Applications

In this module, you have seen how teams of developers, software architects, and business analysts collaborate to
design an MVC web application that meets the needs of users. You can gather functional and technical
requirements by talking to stakeholders and creating use cases, usage scenarios, and user stories. The model,
view, controller, and other aspects of the design depend on these requirements. You have also seen how these
design activities are completed in projects that use the agile methodology or extreme programming.

Best Practice: In Agile Development and Extreme Programming projects, developers discuss with users
and stakeholders
Es throughout development to ensure that their code will meet changing requirements.
Even ifteyou
do are not formally using these methodologies, it is good practice to regularly communicate with
cu
users.
No me
es nt
tán part o pe
pe n e rt
rm rs@ enec
itid ed ea
as uc Da
Best Practice: When las you ac design n an ASP.NET MVC web application, start with the model, and then plan
co ionit iel M
controllers, actions, andpiviews.as . c The
o controllers,
ac actions, and views that you create each depend on the
model. sin m ha
do
au .
tor
iza
ció
n.
Common Issues and Troubleshooting Tips

Common Issue Troubleshooting Tip

Es a very detailed project plan, much of your
When you create Please see Student Companion Content for this course.
te
work is wasted whendorequirements
cu change late in the
project. No me
es to n
tán pe pa
rtn
ers rten
pe
rm e
itid @ed ce a
Review Question(s) as uc
las ac Dan
co ionit iel M
pia .c
s s om acha
Check Your Knowledge in
au
do
.
tor
iza
ció
n.
Discovery
You want to support both English and Spanish in your web application. You have both Spanish-speaking and English-
speaking developers and want to ensure that views remain readable as easily as possible. Should you use multiple
view files or multiple resource files to globalize your site?
E
ste
Show solution Reset
do
cu
No me
es nt
tán p art o pe
Real-world Issues pe n rte
rm and
ers Scenarios
ne
itid @ed ce a
as uc Daselect a project methodology, few projects follow a neat plan in real
You should bear in mind that las whenac you n
co ionit iel M
situations. Of the methodologies piadescribed
.co inathis ch module, agile development and extreme programming are the
ss m
most flexible and respond when plans in change inathe do middle of development. However, even with these
au .
tor
methodologies, changing circumstances result i za in wasted development time and your project budget should include
ció
a contingency to cope with such changes. n.

Furthermore, when working with agile development and extreme programming projects, project managers must
take care to avoid project creep or scope-creep. This occurs when people add new requirements when
development takes place. Project creep results in projects that are over-budget and late.
Es
te
do
cu
Tools No me
es nt
tán p art o pe
pe
Microsoft Office Visio: n ers canrte use Visio to create all types of UML software design diagrams, including Domain
rm You ne
itid @ed ce a
Model diagrams and LDMs. as You uc can also use it to create wireframes.
las ac Dan
co ionit iel M
pia .co ac
Visual Studio 2017: You can create s class mdiagrams
h such as LDMs in Visual Studio 2017.

https://www.skillpipe.com/#/reader/book/4ed7876c-8864-4cf5-91ee-491726dfe322 22/22