Archive

Archive for the ‘MVC 4’ Category

A Glance At ASP.NET MVC 4 Project Templates in Visual Studio 2012

17/08/2012 Leave a comment

Visual studio 2012 and .Net framework 4.5 was released yesterday so it’s a good time to take a look at new MVC framework (MVC 4) included in VS2012. If you are a interested in trying out, you will be able to download Express or  90 days trial version from here.

MVC 4 Projects
MVC 4 Application in Visual Studio 2012 exposes  6 different types of templates (projects) . Please let me to introduce you with them here.

MVC4 Project Types

MVC4 Project Types

Empty Application
Provides the minimum references and resources required to run an Asp.net MVC application.  As you can see  in below,  Models, Controllers, App_Data are completely empty folders.

MVC4 Empty Application Structure

MVC4 Empty Application Structure

App_Start folder which is new in MVC4 contains 3 configuration files. It is including  FilterConfig.cs, RouteConfige.cs and WebApiConfig.cs.  These classes are responsible for application configuration when your application is starting.  In fact, FilterConfig and RoutrConfig are not really new. RegisterGlobalFilters and RegisterRoutes methods have been extracted from MVCApplication class in Global.acax file and put in these separated files.

Refrences folder has been changed as well.  Entity Framework which was included in MVC3 has been vanished. Instead, Json.Net has been added. Also, Http programming has been empowered  by adding System.Net.Http class family. In Addition System.Web.WebPages family has been got richer by adding  System.Web.WebPages.Deployment and System.Web.WebPages.Rezore.

MVC3 Empty Application Structure

MVC3 Empty Application Structure

Views folder  just includes a Web.config file at the time being means _ViewStart.cshtml and Shared folder(including _Layout.cshtml & Error.cshtml) have been disappeared since  MVC3. Content and Scripts folders have been removed as well.

Basic Application
It’s a new project type in MVC 4 and it was not available in MVC3.  I personally think that Basic project is much much closer structurally to Empty project in MVC3. It includes Content and Scripts as well as few more references. Here is a short list of what’s included

Bundling and minimization facilities have been prepared in this template. BundleConfig.cs file has been added to App_Start folder. Additionally, what had been disappeared in Views folder came back to the board. _Layout.cshtml  includes the jQuery bundle as well as the default theme styling.

MVC4 Basic Application Structure

MVC4 Basic Application Structure

Internet Application
Adds tow controllers( Account controller and Home controller)  to the Basic template with implemented actions and views.  Membership management functionality which allows you register, login, change password and so on is implemented in Account controller and Home controller gives you Index, About and Contact actions working with their own related views. Its a template used usually to start a normal web project in action.

MVC4 Internet Application Structure

MVC4 Internet Application Structure

AuthConfig.cs in App_Start  helps you to allow your users log in using their accounts from other sites such as Microsoft, Facebook, and Twitter. Thanks to DotNetOpenAuth class family.  Account views have been empowered by adding few views and partial views to make it easy for you to have an external log in by other sites account in your websites.

Intranet Application
In fact, It’s  the Internet Application except for Membership management.  the Account controller and the web.config has been configured  to use Windows as it’s authentication method.

Mobile Application
Mobile website programming is one of  most important feature in MVC 4 so this template has everything that Internet Application template has, however it  is using  jQuery.mobile instead. In addition,  DotNetOpenAuth references for external log in functionality is removed.

MVC4 Mobile Application Structure

MVC4 Mobile Application Structure

Web API  Application
Its another new Template in VS2012 to make it easy to develop RESTful web services and applications to feed a vast variety rage of clients from desktop browsers to tablet applications. It allows you to expose your data and service to the web directly over  Http for more details visit here. This template includes everything from Basic Template expect Account controller and membership functionality and references However Value controller as a simple API example jumps in.

MVC4 Web API Application Structure

MVC4 Web API Application Structure

MVC 4 in Visual studio 2012 caters a wider range of  project templates which help developer to do their job easier and faster as well as following best practices and keeping development rules.

Thanks to VS2102 development team. Well done guys!

Advertisements

ASP.NET MVC 4, Browser-Specific Views

15/08/2012 1 comment

Introduction

In this post I am going to write about an interesting and powerful feature in ASP.NET MVC 4 , View Overriding or Browser- Specific Views. But, what does it mean?!  It’s a  lovely new feature that lets you to override views ,  layouts and partial views  globally or individually for mobile devices or  a specific  browser such as iPhone’s safari. MVC4 aims at mobiles and tables devices so it’s a good support  to develop a mobile version for  your website or even more such as a  particular version for iPhone or iPad.

Requirement

  1. Visual Studio Express 2010 SP1
  2. ASP.NET MVC 4 RC
  3. Windows 7 Phone Emulator
  4. Apple Safari Browser

Getting Start

Start by running Visual Studio  and select New Project from the Start page. In New Project window, choose ASP.NET MVC4 Web Application.

VS - New Project Window

New Project Window

Keep going by choosing Mobile Application in New ASP.NET MVC 4 Project  window then OK.

New ASP.NET MVC 4 Project

New ASP.NET MVC 4 Project

Visual Studio Creates the project and you are able to run it immediately.

Our Project

You can go around and have a look at other pages (About & Contact)  as well. It looks perfect, doesn’t it? Thanks to jQuery Mobile which is bringing an awesome mobile experience to the website.

As you can see, all tools and facilities have been prepared by MVC 4  to develop a mobile web application with a nice and familiar appearance.

Lets modify the first page (Views/Home/index.cshtml)  as following:

@{
    ViewBag.Title = "Home Page";
 }</pre>
<h2>Welcome,</h2>
<pre>
You are visiting our website on your <strong>Desktop</strong> computer</pre>
<ul data-role="listview" data-inset="true">
	<li data-role="list-divider">Navigation</li>
	<li>@Html.ActionLink("About", "About", "Home")</li>
	<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
<pre>

Now, if you run the project again, the following screen shot will be what you can see

View on desktop

View On Desktop

View Overriding:

To provide a mobile-specific view,  you can copy a view file and add .Mobile to the file name. so copy Views\Home\Index.cshtml to Views\Home\Index.Mobile.cshtml.

Then, please modify Index.Mobile.cshtml file as following:

@{
ViewBag.Title = "Home Page";
 }</pre>
<h2>Welcome,</h2>
<pre>
You are visiting our website on your <strong>Mobile</strong> device</pre>
<ul data-role="listview" data-inset="true">
	<li data-role="list-divider">Navigation</li>
	<li>@Html.ActionLink("About", "About", "Home")</li>
	<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
<pre>

When you are running the project on your  desktop, there is on change but lets to check it on  Windows 7 Phone Emulator .

As you can see, the mobile version of our view (Index.Mobile.cshtml) has been rendered. That means MVC 4 is able to detect the client agent automatically.

Browser-specific View

Are you interested in developing defferent specific views for some specific! clients such as iPhone or iPad!? Not a big deal. Copy the view file and add .iphone or .ipad to the file name. So copy Views\Home\Index.cshtml to Views\Home\Index.iphone.cshtml and do the same for Index.ipad.cshtml. Modify the files to have a proper content as following:

For iPhone in Index.iphone.cshtml file:

@{
ViewBag.Title = "Home Page";
 }</pre>
<h2>Welcome,</h2>
<pre>
You are visiting our website on your <strong>iPhone</strong></></pre>
<ul data-role="listview" data-inset="true">
	<li data-role="list-divider">Navigation</li>
	<li>@Html.ActionLink("About", "About", "Home")</li>
	<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
<pre>

For iPad in Index.ipad.cshtml:

@{
ViewBag.Title = "Home Page";
 }</pre>
<h2>Welcome,</h2>
<pre>
You are visiting our website on your <strong>iPad</strong></pre>
<ul data-role="listview" data-inset="true">
	<li data-role="list-divider">Navigation</li>
	<li>@Html.ActionLink("About", "About", "Home")</li>
	<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
<pre>

In the next step you should modify Global.asax file, so add a new private method and name it registerDisplayMode. Here’s the complete method:

private void registerDisplayMode(string agent, int index = 0)
 {
      DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode(agent)
      {
             ContextCondition = (context => context.GetOverriddenUserAgent().IndexOf
                                   (agent, StringComparison.OrdinalIgnoreCase) >= 0)
      });
 }

Then call this method in Application_Start method as following:

protected void Application_Start()
        {
            AreaRegistration.RegisterAllAreas();

            FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
            RouteConfig.RegisterRoutes(RouteTable.Routes);
            BundleConfig.RegisterBundles(BundleTable.Bundles);

            registerDisplayMode("iPhone", 0);
            registerDisplayMode("iPad", 1);
        }

Also, you have to add following line to the using section of Global.asax

using System.Web.WebPages;

Now, you have registered your new display mode for two individual browser agents (iPhone & iPad) so those will be matched against each incoming request. If the request come form an iPhone or iPad (user agent contains the string “iPhone” or “iPad”), MVC will look for views whose name contains the “iPhone” or “iPad” suffix. You well be able to test it in Apple Safari by changing its agent to iPhone or iPad (more details).

iphone view

iPhone View

iPad View

iPad View

Mvc4 supports you  to switch between different views base on the user agent just with few lines codding and  jQuery Mobile provides a familiar mobile experience  on your website for users.

To be continued …

Source code is available here.

Categories: MVC 4 Tags: