Exercise 1: New MVC4 Project Templates

In this exercise, you will explore the enhancements in the ASP.NET MVC4 Project templates. In addition to the Internet Application template, already present in MVC 3, this version now includes a separate template for Mobile applications. First, you will look at some relevant features of each of the templates. Then, you will work on rendering your page properly on the different platforms by using the right approach.

Task 1 – Exploring the Internet Application Template

  1. Open Visual Studio 11.
  2. Select the File | New | Project menu command. In the New Project dialog, select the Visual C#|Web template on the left pane tree, and choose ASP.NET MVC 4 Web Application. Name the project PhotoGallery, select a location (or leave the default) and click OK.

     You will later customize the PhotoGallery MVC 4 solution you are now creating.

    Figure 1

    Creating a new project

  3. In the New ASP.NET MVC 4 Project dialog, select the Internet Application project template and click OK. Make sure you have selected Razor as the view engine.

    Figure 2

    Creating a new MVC4 Internet Application

    Razor syntax has been introduced in ASP.NET MVC 3. Its goal is to minimize the number of characters and keystrokes required in a file, enabling a fast and fluid coding workflow. Razor leverages existing C#/VB (or other) language skills and delivers a template markup syntax that enables an awesome HTML construction workflow.

  4. Press F5 to run the solution and see the renewed templates. You can check out the following features:
    • Modern-style templates

      The templates have been renewed, providing more modern-looking styles.

      Figure 3

      MVC4 restyled templates

      Figure 4

      New Contact page

    • Richer UI with JavaScript

      Another enhancement to default project templates is the use of JavaScript to provide a more interactive JavaScript. The Login and Register links used in the template exemplify how to use the jQuery UI Dialog to display a fancy login screen.

      Figure 5

      Log On dialog

      Figure 6

      Registration dialog

    • Adaptive Rendering

      Check out resizing the browser window and notice how the page layout dynamically adapts to the new window size. These templates use the adaptive rendering technique to render properly in both desktop and mobile platforms without any customization.

      Figure 7

      MVC 4 project template in different browser sizes

  5. Close the browser to stop the debugger and return to Visual Studio.
  6. Now you are able to explore the solution and check out some of the new features introduced by ASP.NET MVC 4 in the project template.

    Figure 8

    The MVC4 Internet Application Project Template

    • HTML 5 Markup

      Browse template views to find out the new theme markup.

      Figure 9

      New template, using Razor and HTML5 markup (About.cshtml).

    • Updated JavaScript libraries

      The MVC4 default template now includes KnockoutJS, a JavaScript MVVM framework that lets you create rich and highly responsive web applications using JavaScript and HTML. Like in MVC3, jQuery and jQuery UI libraries are also included in ASP.NET MVC 4.

      You can get more information about KnockOutJS library in this link: http://learn.knockoutjs.com/.

      Additionally, you can learn about jQuery and jQuery UI in http://docs.jquery.com/.

    • ASP.NET Universal providers included in the solution

      ASP.NET Universal Providers extend Session, Membership, Roles and Profile support to SQL Compact Edition and SQL Azure. By only configuring the right connection string, your application will be able to work with SQL Server (plus Express), SQL Server Compact or SQL Azure.

      ASP.NET Universal Providers Library is also available for MVC3 projects in the NuGet public feed.

      You can learn more about SQL Azure in this link: http://msdn.microsoft.com/en-us/wazplatformtrainingcourse_sqlazure_unit.

      Figure 10

      ASP.NET Universal Providers reference is now included

Task 2 – Exploring the Mobile Application Template

ASP.NET MVC 4 facilitates the development of websites for mobile and tablet browsers. This template has the same application structure as the Internet Application template (notice that the controller code is practically identical), but its style was modified to render properly in touch-based mobile devices.

  1. Select the File | New | Project menu command. In the New Project dialog, select the Visual C#|Web template on the left pane tree, and choose the ASP.NET MVC4 Web Application. Name the project PhotoGallery.Mobile, select a location (or leave the default) and click OK.
  2. In the New ASP.NET MVC 4 Project dialog, select the Mobile Application project template and click OK. Make sure you have selected Razor as the view engine.

    Figure 11

    Creating a new MVC4 Mobile Application

  3. Now you are able to explore the solution and check out some of the new features introduced by the MVC 4 solution template for mobile:
    • jQuery Mobile Library

      The Mobile Application project template includes the jQuery Mobile library, which is an open source library for mobile browser compatibility. jQuery Mobile applies progressive enhancement to mobile browsers that support CSS and JavaScript. Progressive enhancement enables all browsers to display the basic content of a web page, while it only enables the most powerful browsers to display the rich content. The JavaScript and CSS files, included in the jQuery Mobile style, help mobile browsers to fit the content in the screen without making any change in the page markup.

      Figure 12

      jQuery mobile library included in the template

    • HTML5 based markup

      Figure 13

      Mobile application template using HTML5 markup, (LogOn.cshtml and index.cshtml)

  4. Press F5 to run the solution.
  5. Open the Windows Phone 7 Emulator, located in Start Menu | All Programs | Windows Phone SDK 7.1 | Windows Phone Emulator.
  6. In the phone start screen, open Internet Explorer. Check out the URL where the desktop application started and browse to that URL from the phone (e.g. http://localhost:6385/).
  7. Now you are able to enter the login page or check out the about page. Notice that the style of the website is based on the new Metro app for mobile. The ASP.NET MVC 4 project template is correctly displayed on mobile devices, making sure all the elements of the page are visible and enabled. Notice that the links on the header are big enough to be clicked or tapped.

    Figure 14

    Project template pages in a mobile device

  8. The new template also uses the Viewport meta tag. Most mobile browsers define a width for a virtual browser window or “viewport”, which is larger than the actual width of the mobile device. This enables mobile browsers to display the entire web page inside the virtual display. The Viewport meta tag allows web developers to set the width, height and scale of the browser area on mobile devices. The MVC 4 template for Mobile Applications sets the viewport to the device width (“width=device-width”) in the layout template (Views\Shared\_Layout.cshtml), so that all the pages will have their viewport set to the device screen width. Notice that the Viewport tag will not change the default browser view.
  9. Open _Layout.cshtml, located in the Views | Shared folder, and comment the Viewport tag. Run the application, if not already opened, and check out the differences.


    FakePre-a6862d8788c64826a23b4fe83c851d0d-87ff1a51ec3c4156ad688154060921acFakePre-a5110c38d4ec4b9190696ec96a0d4bd9-f7f23566e35c40d8b1cf8bfccb02de1f @* <meta name="viewport" content="width=device-width" /> *@FakePre-b43d866a06304862ae211960161d8573-4758819fddc84fb289620171cee83f8f

    Figure 15

    The site after commenting the viewport meta tag

  10. In Visual Studio, press SHIFT+F5 to stop debugging the application.
  11. Uncomment the viewport tag.


    FakePre-b61067f4b566451c8090a3a51d918606-744395ff2f434ecba8736fe110b638f3FakePre-3bc88d5245304cf5af69cc5832ab8ef6-a4fccc4749d84ad5acc8a9b022a52474 <meta name="viewport" content="width=device-width" /> FakePre-2f64d95903d44dec8265c4b47caf9144-c448feb744bd4b7284b936c0afe00c38

Task 3 – Using Adaptive Rendering

In this task, you will learn another method to render a Web page correctly on mobile devices and Web browsers at the same time without any customization. You have already used Viewport meta tag with a similar purpose. Now you will meet another powerful method: adaptive rendering.

Adaptive rendering is a technique that uses CSS3 media queries to customize the style applied to a page. Media queries define conditions inside a style sheet, grouping CSS styles under a certain condition. Only when the condition is true, the style is applied to the declared objects.

The flexibility provided by the adaptive rendering technique enables any customization for displaying the site on different devices. You can define as many styles as you want on a single style sheet without writing logic code to choose the style. Therefore, it is a very neat way of adapting page styles, as it reduces the amount of duplicated code and logic for rendering purposes. On the other hand, bandwidth consumption would increase, as the size of your CSS files could grow marginally.

By using the adaptive rendering technique, your site will be displayed properly, regardless of the browser. However, you should consider if the bandwidth extra load is a concern.

The basic format of a media query is: @media [Scope: all | handheld | print | projection | screen] ([property:value] and … [property:value])

Examples of media queries:

@media all and (max-width: 1000px) and (min-width: 700px) {}: For all the resolutions between 700px and 1000px.

@media screen and (min-width: 400px) and (max-width: 700px) { … }: Only for screens. The resolution must be between 400 and 700px.

@media handheld and (min-width: 20em), screen and (min-width: 20em) { ... }: For handhelds(mobile and devices) and screens. The minimum width must be greater than 20em.

You can find more information about this on the W3C site.

You will now explore how the adaptive rendering works, improving the readability of the MVC 4 default website template.

  1. Open the PhotoGallery.sln Internet application you have created at Task 1. Press F5 to run the solution.
  2. Resize the browser’s width, setting the windows to half or to less than a quarter of its original size. Notice what happens with the items in the header: Some elements will not appear in the visible area of the header.
  3. Open Site.css file from the Visual Studio Solution explorer, located in Content project folder. Press CTRL+F to open Visual Studio integrated search, and write @media to locate the CSS media query.

    The media query condition defined in this template works in this way: When the browser’s window size is below 850px, the CSS rules applied are the ones defined inside this media block.

    Figure 16

    Locating the media query

  4. Replace the max-width attribute value set in 850px with 10px, in order to disable the adaptive rendering, and press CTRL + S to save the changes. Return to the browser and press CTRL+F5 to refresh the page with the changes you have made. Notice the differences in both pages when adjusting the width of the window.

    Figure 17

    In the left, the page is applying the @media style, in the right, the style is omitted

    Now, let’s check out what happens on mobile devices:

    Figure 18

    In the left, the page is applying the @media style, in the right, the style is omitted

    Although you will notice that the changes when the page is rendered in a Web browser are not very significant, when using a mobile device the differences become more obvious. On the left side of the image, we can see that the custom style improved the readability.

    Adaptive rendering can be used in many more scenarios, making it easier to apply conditional styling to a Web site and solving common style issues with a neat approach.

    The Viewport meta tag and CSS media queries are not specific to ASP.NET MVC 4, so you can take advantage of these features in any web application.

  5. In Visual Studio, press SHIFT+F5 to stop debugging the application.