WURFL.NET and ASP.NET MVC 4 Display Modes
Introduction:
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.
Update: 51Degrees.mobi now uses its own mobile device database with its own licensing terms. See this to how to use ASP.NET MVC 4 with 51Degrees.mobi.
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,
DisplayModeProvider.Instance.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.