Tag Archives: MVC 4.0

MVC 4.0: The Role of the View

The views in your ASP.NET MVC application are what a user sees. Views are the window into your application, and so is one of the most important parts of the application…along with all the rest of it!

Views provide one of the biggest reasons to use MVC instead of Web Forms. Unlike Web Forms, you have complete control over the HTML that the application generates. There are no server controls as there are in Web Forms that spew HTML, which you have little control over or that are hard to use with CSS and client-side JavaScript.

Having complete control over HTML sounds great in theory, but it could also mean that you’d have to write a lot more HTML by hand. One of the big selling points of Web Forms is that you can do drag and drop development, using server controls that generate massive amounts of HTML based on the properties you set and the data you bind to the controls.

But MVC has a lot of features built in that make the job of writing HTML and other code simpler and more manageable, while letting you retain control over most of the generated HTML. And when you need complete control, you can bypass the MVC features and write all the beautiful HTML you care to write.

The trick to writing good views in MVC is to keep the view focused on the user interface only. This means that there should be no code that directly reads or writes to a data store, no business rule implementations, nothing that isn’t directly related to interacting with the user. The ideal view should consist of a lot of HTML, maybe some client-side JavaScript (perhaps including Ajax), and a little code that reads data from the model or ViewData for the purpose of displaying data to the user. It might be appropriate to put some logic in a view, but it should only be presentation logic needed to dynamically interact with the user. Anything else you should rip out and put in the controller or model. Make that your solemn goal.

The purest way to think about views is that the controller hands a model to the view, and the view converts it into something that is presented to the user. We’ve found this way of thinking to be a helpful context for understanding what views do and how to create them, as well as where to implement different kinds of logic.

In this chapter, you’ll learn about how views work, how you can add dynamic data to the view, how you can bundle and minify files, a little bit about the view engine that makes it all work, and ways to adhere to MVC’s DRY—Don’t Repeat Yourself—principle by creating reusable controls that you can use in multiple views.

The Figure below shows a graphic view of the interactions of the components of an MVC application. In order to handle a user request, the controller interacts with the model in whatever way is necessary to respond to the request. The controller then selects a view and passes it whatever data the view requires to generate a page. The view engine then reads the view template and dynamically generates the HTML that is sent to the user.

MVC4 Views
The Figure above. Anatomy of an MVC request and response.

In this chapter, you’ll learn some of the many features you can use to build views that provide a robust user interface for your applications. The MVC framework has a rich infrastructure for creating responsive and attractive web sites for your users.

 

ldn-pledgerwoodThis post is an excerpt from the online courseware for our MVC 4.0: Views and Models course written by expert Phil Ledgerwood.

Phil Ledgerwood has been a software developer for fifteen years. He currently works primarily in .NET technologies producing custom software for organizations of all sizes. He has also done extensive training for those same organizations in both technical and business process topics.

MVC Project Template

ASP.NET MVC 4 is available in Visual Studio 2012 without any additional
installs. MVC 4 can easily be used in older versions of Visual Studio, but it
requires a separate installation. In Visual Studio 2012, there are two, basic
Project Templates: ASP.NET MVC 3 Web Application and ASP.NET MVC 4
Web Application. The MVC 3 template is included because of the relative
newness of MVC 4. The templates are available for both Visual Basic and C#;
other than la nguage, the templates are identical. You can access the templates

from the New Project dialog box that opens when you select File|New|Project

from the Visual Studio menu.

When you select the ASP.NET MVC 4 Web Application template, you have
the choice of several, specific project templates. The Internet Application

template creates a basic but fully functional MVC application, complete with a
model, a couple of controllers, and a few views. It uses best practice HTML
with a CSS (Cascading Style Sheet) file to format the views. It also includes
support for forms authentication and authorization, using the built-in features

of ASP.NET. (This is one of many ways that you can see how MVC is built on
top of ASP.NET, rather than being an alternative to it.) This template gives
you the option of creating a test project in addition to the main application
project, so that you can write unit tests.

The Intr anet Application template builds virtually the same project as the

Internet Application template, but uses Windows forms authentication. It also
gives you the option of creating a test project in the solution.

The Empty template sets up the project structure, including folders for models,
views, and controllers, and sets references to use the MVC framework, but no
default con trollers or models. It provides a great starting point for a new

application that you’ll develop from scratch, including building your own CSS
styles for views. If you want to create a unit test project with a project created
from this template, you’ll need to add that manually after you create the empty
web application.

The Basic template is very similar to the Empty template but includes common
Content an d Scripts that are useful to most MVC applications.

The Mobile Application template is almost exactly the same as the Internet
Application template except it incorporates jQuery.mobile to adjust the
application for delivery to mobile devices and does not use the built-in
authentication mechanisms for .NET applications.

The Web API Application is significantly different from the others in the sense
that it isn’t intended to produce a web site. Rather, it sets up a web services
application that runs according to RESTful URLs. The processing model is
very similar, but Web API Applications are used primarily to serve up data to
other applic ations. This template has no visual component to it.

With the exception of the Web API Application, it really doesn’t matter which
template you use. All provide support for MVC applications, and all are much
simpler than starting with a completely blank solution. In the following
sections, you’ll use the Internet Application template in order to explore the
structure of an MVC application.

ldn-pledgerwoodThis post is an excerpt from the online courseware for our MVC 4.0: Views and Models course written by expert Phil Ledgerwood.

Phil Ledgerwood has been a software developer for fifteen years. He currently works primarily in .NET technologies producing custom software for organizations of all sizes. He has also done extensive training for those same organizations in both technical and business process topics.