Introduction

The five years back, we all are knew that  we able to developed ASP.NET mobile application usign Visual Studio, but microsoft  has been take off those templates from the visual studio in the following versions. But again there is a good news for all that Microsoft has released the much awaited ASP.NET MVC 4.0 developer preview and there are lots of features bundle with it. One of the greatest features is a mobile website. Yes, Now with ASP.NET MVC 4.0 you can create mobile site also. So let’s create a simple application and let’s see how it works.

To create mobile site first you need to click File->New Project->ASP.NET MVC 4.0 Web application. Like following.



Now once you click OK it will open a new another dialog like following where we have to choose the Mobile site.



As you can see in above post I have selected Razor view Once you click it will create a new application like following. As you can see similar structure as normal MVC Application application below.



This view are based on the standard jQuery Mobile. So this can be viewed in any tablet or mobile device. So if you have IPad and IPhone both then it will work on both. You need not to different application for both. see the browser first I have selected standard IPad size of browser.



Now lets see how it look in mobile. So I have made my browser same site as mobile. As you can see its working in both.



If you see the code of view you can see the razor syntax over there. Nothing change in razor syntax. But as you can see in below code you need to use Jquery mobile attributes like data-Role and other stuff which will convert standard HTML into mobile or device compatible website.

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

That's it. It’s very easy you can create mobile compatible site in few hours. Hope you like it.

The usage of mobile phones to access the web is increasing day by day. So, this is now become very important for every public web application to add the support of mobile browsers. ASP.NET MVC 4 makes it very easy for you to make the mobile phone user’s browsing experience as smooth as possible. For example, with Display Modes feature, you can select views depending on the browser(mobile or desktop) capabilities. But, ASP.NET MVC 4 does not include all the information about the capabilities of different mobile or desktop devices that are currently available on the market. For example, it does not tell you about the screen resolution of various mobile or desktop devices. WURFL(Wireless Universal Resource FiLe), is an up-to-date XML configuration file which contains the information about device capabilities. It contains over 7000 unique devices and thousands of firmware variations. WURFL.NET API(the one which is created by ScientiaMobile), currently, is the only .NET standard API for accessing WURLF data. WURFL.NET API contains information about devices in a list of over 500 capabilities. In this article, I will show you how you can use ASP.NET MVC 4  Display Modes feature with WURFL.NET API.

Description:

Firstly, create a new ASP.NET MVC 4 application. Next, open the Package Manager Console and type “Install-Package WURFL_Official_API”. This will add the WURFL.NET API in the application. You can also install the package using “Add Library Package Reference” dialog. Doing this will automatically add a reference to the WURFL.dll in the application. It will also add web_browsers_patch.xml and wurfl-latest.zip data files in App_Data folder. This step will make the WURFL.NET API available to the application.  

Now you need to tell WURFL.NET API about the location of web_browsers_patch.xml and wurfl-latest.zip data files. There are three ways to do this. First way: specify these data files in the web.config file,

        <wurfl>
            <mainFile path=”C:\….\WURFL.NETAndDisplayModes\App_Data\wurfl-latest.zip” />
            <patches>
              <patch path=”C:\….\WURFL.NETAndDisplayModes\App_Data\web_browsers_patch.xml” />
            </patches>
        </wurfl>

Note, you need to specify the complete path of data files. Currently, WURFL.NET API does not support any shortcuts(like, DataDirectory or ~). Next, you need add the following code inside the global.asax.cs file,

        public const String WurflManagerCacheKey = “__WurflManager”;
        protected void Application_Start()
        {
            AreaRegistration.RegisterAllAreas();
            RegisterGlobalFilters(GlobalFilters.Filters);
            RegisterRoutes(RouteTable.Routes);
            LoadWurflData(Context.Cache);
        }
        public static void LoadWurflData(System.Web.Caching.Cache cache)
        {
            var configurer = new ApplicationConfigurer();
            var manager = WURFLManagerBuilder.Build(configurer);
            cache[WurflManagerCacheKey] = manager;
        }

Second way: instead of using web.config file, you can put all your code inside the global.asax.cs file,

        public const String WurflManagerCacheKey = “__WurflManager”;
        public const String WurflDataFilePath = “~/App_Data/wurfl-latest.zip”;
        public const String WurflPatchFilePath = “~/App_Data/web_browsers_patch.xml”;
        protected void Application_Start()
        {
            AreaRegistration.RegisterAllAreas();
            RegisterGlobalFilters(GlobalFilters.Filters);
            RegisterRoutes(RouteTable.Routes);
            LoadWurflData(Context);
        }

        public static void LoadWurflData(HttpContext context)
        {
            var server = context.Server;
            var wurflDataFile = server.MapPath(WurflDataFilePath);
            var wurflPatchFile = server.MapPath(WurflPatchFilePath);
            var configurer = new InMemoryConfigurer()
                    .MainFile(wurflDataFile)
                    .PatchFile(wurflPatchFile);
            var manager = WURFLManagerBuilder.Build(configurer);
            context.Cache[WurflManagerCacheKey] = manager;
        }

Third way is the combination of first and second way. First, you need to add these app settings in web.config file,

        <add key=”WurflDataFilePath” value=”~/App_Data/wurfl-latest.zip” />
        <add key=”WurflPatchFilePath” value=”~/App_Data/web_browsers_patch.xml” />

Next, add the following code inside the global.asax.cs file,

        public const String WurflManagerCacheKey = “__WurflManager”;
        protected void Application_Start()
        {
            AreaRegistration.RegisterAllAreas();
            RegisterGlobalFilters(GlobalFilters.Filters);
            RegisterRoutes(RouteTable.Routes);
            LoadWurflData(Context);
        }
        public static void LoadWurflData(HttpContext context)
        {
            var server = context.Server;
            var appSettings = WebConfigurationManager.AppSettings;
            var wurflDataFile = server.MapPath(appSettings["WurflDataFilePath"]);
            var wurflPatchFile = server.MapPath(appSettings["WurflPatchFilePath"]);
            var configurer = new InMemoryConfigurer()
                    .MainFile(wurflDataFile)
                    .PatchFile(wurflPatchFile);
            var manager = WURFLManagerBuilder.Build(configurer);
            context.Cache[WurflManagerCacheKey] = manager;
        }

Now, WURFL.NET API is initialized. Let’s say you need to show a particular view depending on the device screen resolution. You can do this by adding the following code in Application_Start method, 

        DisplayModes.Modes.Insert(0, new DefaultDisplayMode(“Resolution320By480″)
        {
            ContextCondition = (context =>
            {
                var manager = (context.Cache[WurflManagerCacheKey] as IWURFLManager);
                var cabablities = manager.GetDeviceForRequest(context.Request.UserAgent);
                return cabablities.GetCapability(“resolution_width”) == “320″
                    && cabablities.GetCapability(“resolution_height”) == “480″;
            }
            )
        });

Now, if you make a request which returns the Index view, then ASP.NET MVC framework will look for Index.Resolution320By480.cshtml file for devices with 320X480 resolution and Index.cshtml file for others. Similarly, you can add different display modes in your application depending upon the various capabilities of device. WURFL.NET consists information in a list of over 500 capabilities.

Summary:

Using ASP.NET MVC 4 Display Modes feature, you can select views depending on the browser capabilities. WURFL.NET API provides you a list of over 500 capabilities. Combining both of these features will help you to build an application which support vast amount of devices. In this article, I showed you how you can add WURFL.NET API in your application. I also showed you how you can use WURFL.NET API to find the device capabilities and then use these capabilities in ASP.NET MVC 4 application. Hopefully you will enjoy this article too.