Under the Hood of Display Mode in MVC 4

This post is part of ASP.NET MVC 4 Article Series.

I am little late in publishing this post as I was busy with my 1st codeplex project. Very soon I will post about my 1st codeplex project. Till that, enjoy this MVC 4 series and do let me know your valuable feedback.

In our last post, we have seen how we can use Display Mode feature of MVC 4 to enable browser specific view. In this post we will examine how in built Display Mode works in MVC 4.

We know that we can create view for mobile browser by adding .mobile suffix in view name. For e.g. index.mobile.cshtml. And this mobile view will be automatically rendered in mobile browser and we also know how to add new Display Mode in MVC 4 application but the question is that we have not added any Display Mode for .mobile suffix than also how it is rendered automatically in mobile browser. We will try to debug it in this post.

Get started for the Learn with Fun

• Create a new MVC 4 application.
• Open Global.asax.cs and put break point on Application_Start as displayed in below image.

• Now press F5 and wait till break point hit.
• Now open Immediate Window and type as shown below.

• As you can see the value of System.Web.WebPages.DisplayModes.Modes.Count is 2 which mean there are two in built Display Mode in MVC 4 application. Let take it further to know more about these two in built Display Mode.
• First of all stop debugging by pressing Shift + F5 and import System.Web.WebPages namespace at the top of Global.asax.cs file so we need not to write full qualified name in debugging process.
• Now again press F5 and wait till break point hit.
• Type following in the Immediate Window.

We have tried to create instance of DefaultDisplayMode class and assigned it with Display Mode at 0th position. Examining its DisplayModeId properties, we found that its value is Mobile and hence this Display Mode is responsible for rendering mobile view in mobile browser. Examining ContextCondition properties, we found that it reference the <.cctor>b__b(System.Web.HttpContextBase) method and hence this method is responsible for validating current request context that whether it is from mobile browser or not (We will also dig into this method at later in this post).

Same way let also inspect Display Mode at 1st position just as we inspected of 0th position. Type following in the Immediate Window.

As we can see in Immediate Window that DisplayModeId is set to blank or empty and ContextCondition is set to null which means if all preceding Display Mode’s ContextCondition fail at that time this Display Mode will be taken in consider. So keep patient while adding Display Mode with null ContextCondition and make sure you add it after adding all other Display Mode otherwise succeeding Display Mode will never taken in consideration.

In earlier in this post, while we examined Display Mode at 0th position at that time we noticed that <.cctor>b__b(System.Web.HttpContextBase) method is responsible for validating current request context. To dig more on this method do as follow.

• Open Visual Studio Command Prompt and type ildasm.
• Open System.Web.WebPages.dll and navigate to <.cctor>b__b(System.Web.HttpContextBase) method under System.Web.WebPages.DisplayModes.
• Now double clicking on method name will open a new window.

Examining code in that window you will find that it is detecting mobile browser with System.Web.HttpBrowserCapabilitiesBase::get_IsMobileDevice() which is equivalent to C# Request.Browser.IsMobileDevice.

So in this post, we tried to examine in built Display Mode of MVC 4. Hope this post would be helpful.

Read More

Display Mode in ASP.NET MVC 4

This post is part of ASP.NET MVC 4 Article Series.

In previous post, we learnt how to get started with MVC 4 Mobile Project which target mobile or tablet device. Then after you can host this application to separate sub domain and redirect your mobile or tablet device visitor to that mobile application. In this post, we will learn how to develop a MVC 4 application which target desktop browser as well mobile or tablet device without redirecting to separate mobile application.

MVC 4 introduces a new Display Mode feature which enables us to create different version of view and it will select appropriate view version based on requesting browser. For e.g. if desktop browser is requesting home page then it can render Views\Home\Homepage.cshtml and if the mobile or tablet browser request home page then it can render Views\Home\Homepage.Mobile.cshtml without changing URL of the application.

We can also have different version for layout and partial view. So whenever desktop browser will make request at that time it will use Views\Shared\_Layout.cshtml and if mobile or tablet browser is making request at that time it will use Views\Shared\_Layout.Mobile.cshtml

In addition to layout view, same strategy also applies for partial vie. For e.g. @Html.Partial(“Login”) will render login.cshtml if requesting browser is desktop otherwise it will render login.Mobile.cshtml if request is made by mobile browser.

How Display Mode works

To get started with different view version, you need to register each view version name in Application_Start event of the global.asax.cs. So later on application can select appropriate view version when browser request satisfies certain conditions.

We can register a new display mode or view version with the DefaultDisplayMode class and we need to assign Display Mode name and condition when to apply this Display Mode. For e.g. following code snippet register a display mode “Mobile” which will used whenever any mobile browser make a request.

protected void Application_Start()

{

    System.Func<HttpContextBase, bool> contextCheckDelegate = contextCheck;

    DefaultDisplayMode mobileMode = new DefaultDisplayMode("Mobile");

    mobileMode.ContextCondition = contextCheckDelegate;

    DisplayModes.Modes.Add(mobileMode);

}

public bool contextCheck(HttpContextBase objHttpContextBase)

{

    if(IsMobileBrowser)

        return true;

    else

        return false;

}

In above code, we have seen that ContextCondition properties of DefaultDisplayMode accept a delegate so we can register a more than one Display Mode with the application.

Now have a quick look at sample application for Display Mode.

Sample application with MVC 4 which target desktop as well mobile device

• Create a new MVC 4 application
• Now in the Views\Home folder and Views\Shared add new views (You can even add existing views which we created with Mobile Project Template and then rename it as shown in the following picture. So you do not need bother about layout and designing for Mobile views) as displayed in following picture.

• Now add following code in the Application_Start event of the global.asax.cs (You can download full Regular expression to detect mobile browser from the http://detectmobilebrowsers.com/)

protected void Application_Start()

{

    System.Func<HttpContextBase, bool>; contextCheckDelegate = contextCheck;

    DefaultDisplayMode mobileMode = new DefaultDisplayMode("Mobile");

    mobileMode.ContextCondition = contextCheckDelegate;

    DisplayModes.Modes.Add(mobileMode);

}

public bool contextCheck(HttpContextBase objHttpContextBase)

{

    string strUserAgent = objHttpContextBase.Request.UserAgent;

    Regex strBrowser = new Regex(@"android.+mobile|blackberry|ip(hone|od)", RegexOptions.IgnoreCase | RegexOptions.Multiline);

    if ((strBrowser.IsMatch(strUserAgent)))

    {

        return true;

    }

    return false;

}

• Build the project and views it in browser by pressing Ctrl + F5
• Now open same URL with any mobile emulator or you can even use Mozilla with Mozilla User Agent Switcher Add-ons. I am using User Agent Switcher. Switch user agent to iPhone and now press F5. You will see the mobile index.mobile.cshtml view rendered.

In above scenario, note the address bar of the browser in both case, you will notice that address bar remains same even if it render different view based on requesting browser.

Read More

ASP.NET MVC 4 Mobile Project Template

This post is part of ASP.NET MVC 4 Article Series.

With ASP.NET MVC 4, it’s even easier to setup and carry out a project which target mobile and tablet device. Yes MVC team introduce a new project template with MVC 4 which target mobile and tablet platform. This project template is build on the base of jQuery Mobile. And hence it is also optimized for better experience for touch screen.

To get started with Mobile Project Template in MVC 4

• Create a new ASP.NET MVC 4 Web Application
• Select Mobile Application template when it ask to select project template

As far as the server side code (Controller, Model) is concern, it is same structured as Internet Application template. But responsibility of well rendering and well behavior for touch media is left on jQuery Mobile.

Inspecting Script folder of Internet Application Template and Mobile Project Template, you will find additional jquery.mobile-1.0b2.js file which is core script of jQuery Mobile included in Mobile Project Template of MVC 4.

Internet Application Project

Mobile Project

Another major difference between Internet Application Template and Mobile Project Template is in its view. Inspecting _Layout.cshtml, you will notice some additional script reference and script in Mobile Project which is used by mobile or template device. In addition to script, another major difference in MVC 4 Mobile Project Template View is use of data-role and other attribute which is required for Mobile page structure and it used by mobile device and jQuery Mobile for proper rendering and behavior in touch screen and Smartphone. You can get more information regarding this here.

ASP.NET MVC 4 Mobile Project Template

Hope It would be helpful.

Read More

First look at ASP.NET MVC 4 Templates

This post is part of ASP.NET MVC 4 Article Series.

Updated on 19-Aug-2012:
Updated after MVC 4 RTM and deleted Rich UI section as it is no more part of MVC 4 default template.

With release of ASP.NET MVC 4 Developer Preview, ASP.NET MVC team introduces a new default project template for MVC 4. New template has following improvements.

Cosmetic Improvements
New MVC 4 project template has cosmetic improvements prior to MVC 3 project template. And it will help community to create good looking modern websites with the default template itself without investing more in template designing.

Adaptive Rendering
Along with cosmetic improvements, new MVC 4 template used technique called Adaptive Rendering which will help in proper rendering in desktop browser as well mobile browser also without making any changes. To see Adaptive Rendering in action, resize browser window to be smaller and accordingly MVC 4 template layout will be changed to fit with screen size.

Rich UI
Another major improvement with MVC 4 default project template is use of JavaScript and jQuery plugins to provide rich UI. Click on Register and Login link to see rich UI in action.

Read More

Getting Started With ASP.NET MVC 4

Updated on 19-Aug-2012:
Updated after MVC 4 RTM to include latest download link.

This post is part of ASP.NET MVC 4 Article Series.

In this first post of ASP.NET MVC 4 article series, we will see how and from where we can download and install MVC 4. Following are the different useful links for downloading ASP.NET MVC 4.

ASP.NET MVC 4 NuGet Packages
One good news is that MVC 4 is also available via NuGet. To install MVC 4 via NuGet, type following in the Package Manager Console.

For more detail regarding NuGet package please visit http://www.nuget.org/List/Packages/AspNetMvc

ASP.NET MVC 4 for Visual Studio 2010
If you are using Visual Studio 2010 then you can use MVC 4 with Visual Studio 2010. To install MVC 4 via Web Platform Installer for Visual Studio 2010 please visit following link.
http://www.microsoft.com/web/gallery/install.aspx?appid=MVC4VS2010

Visual Studio Express 2012
You can download Visual Studio Express 2012 for free from here http://www.microsoft.com/web/gallery/install.aspx?appid=VWD11AzurePack

ASP.NET MVC 4 Direct Download Link
For Visual Studio 2010, first you need to install Visual Studio 2010 SP1 KB983509 via http://download.microsoft.com/download/2/3/0/230C4F4A-2D3C-4D3B-B991-2A9133904E35/VS10sp1-KB983509.exe

MVC 4 Direct link for Visual Studio 2010 http://www.microsoft.com/en-us/download/details.aspx?id=30683

MVC 4 Direct link for Visual Studio 2012 http://www.microsoft.com/visualstudio/11/en-us/downloads#vs

Useful links

• http://asp.net/mvc/mvc4 for latest update regarding MVC 4
• http://forums.asp.net/1146.aspx ASP.NET MVC forum

Read More

ASP.NET MVC 4 Article Series

Updated on 19-Aug-2012:
Originally this article series was started after first developer preview version of MVC 4. However I am updating some of the articles to cover new features and changes in MVC 4 RTM.

Well after a long buzz of vNext (ASP.NET 4.5) and MVC 4. Yesterday Microsoft released a developer preview of ASP.NET 4.5 and MVC 4. For a next couple of day I am going to post about cool new features of MVC 4. And accordingly I will update this page with updated MVC 4 post links.

• Getting Started With ASP.NET MVC 4 (15-Sep-2011) Updated on 19-Aug-2012
• First look at ASP.NET MVC 4 Templates (16-Sep-2011) Updated on 19-Aug-2012
• ASP.NET MVC 4 Mobile Project Template (18-Sep-2011)
• Display Mode in ASP.NET MVC 4 (21-Sep-2011)
• Under the Hood of Display Mode in MVC 4 (27-Sep-2011)
• ASP.NET MVC 4 Mobile Features (By Rick Anderson)
• Upgrading an ASP.NET MVC 3 Project to ASP.NET MVC 4 (13-Dec-2011)
• Bundling and Minification in ASP.NET MVC 4 (23-Dec-2011)
• Creating Custom Transform Type for Bundling and Minification in .NET 4.5 & MVC 4 (24-Dec-2011)
• ASP.NET MVC 4 Beta Overview (17-Feb-2012)
• ASP .NET Web API in ASP .NET MVC 4 Beta (29-Feb-2012)
• OData service with ASP .NET Web API (22-Mar-2012)
• MVC 4: facebook twitter login with oAuth (19-Aug-2012)
• ASP.NET 4.5, MVC 4: Customize oAuth Login UI (03-Sep-2012)

Hope it would be helpful.

Read More

Articles featured on official ASP.NET website home page

Last Updated On : 22-Mar-2013
This page keep track of article featured on www.asp.net home page. My first article was featured in August 2011. Starting from August 2011, There are total 12 articles featured till March 2013. Apart from these, there are 14 articles featured under Articles Of The Day section which is not listed here. Thanks to all reader of dotnetExprtGuide.com.

Very soon we hope to start article series on new release of Visual Studio and ASP.NET. So stay connected. You can also connect us through following social media.

        

• 31-Aug-2011: Validate uploaded image content in ASP.NET
• 25-Sep-2011: ASP.NET MVC 4 Article Series Also available on MSDN
• 23-Dec-2011: Creating Custom Transform Type for Bundling and Minification in .NET 4.5
• 09-Apr-2012: ASP.NET + IIS + DNS Records = Sub Domain on the fly
• 25-Jun-2012: Cascading drop down with knockoutjs and ASP.NET MVC
• 21-Aug-2012: MVC 4: facebook twitter login with oAuth
• 08-Oct-2012: ASP.NET & MVC 4: Cookieless domain for bundling and static resources
• 23-Oct-2012: ASP.NET 4.5 & MVC 4: Revisiting IBundleTransform
• 12-Nov-2012: ASP.NET MVC Bundling: Auto sync JavaScript model with MVC model
• 23-Nov-2012: ASP.NET web optimization framework with MVC 3 & ASP.NET 4.0 web form
• 31-Dec-2012: ASP.NET MVC Value Provider for encrypted query string
• 19-Mar-2013: ASP.NET 4.5 Model Binding: Creating Custom Value Provider

19-Mar-2013	31-Dec-2012
23-Nov-2012	12-Nov-2012
23-Oct-2012	08-Oct-2012
21-Aug-2012	25-Jun-2012
09-Apr-2012	23-Dec-2011
25-Sep-2011	31-Aug-2011

You can also connect us through following social media.
        

---

Read More