New MVC4 Project Templates

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 the ASP.NET MVC 4 Web Application. Name the project PhotoGallery, select a location (or leave the default) and click OK.
   Note:

    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
   Note:

   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.
     
     Note:

     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.
     
     Note:

     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