Developing for the mobile platform is all the rage right now – and rightfully so! I, for one, am tired of having either an experience that plain does not work on my device or having to zoom in and scroll around just to look up some quick information (time tables for busses are my nemesis). There are a few ways to develop against mobile devices like creating a web application that works in the devices browser, creating a hybrid application using HTML and a framework like PhoneGap, or just go plain native. As ASP.NET developers most likely we’ll want take a look in to the first option, creating a web app that can run in a mobile devices browser. This is a great habit to have because even if you have a native application your users might not be aware and still navigate to your website. Or you might just have a native app for one platform, but not all. Either way, how do we go about developing mobile applications in ASP.NET now that ASP.NET 4.5 is here? Well, this is what this blog post is for!
When creating any kind of web application, whether it is with plain HTML or with a server platform like ASP.NET, I like to say that there are three different approaches when creating applications that fit for mobile devices, one of which is to do nothing at all (boo and hiss!). These three are the following:
There might be some more pros and cons here, but these are some of the items that stick out when taking these three approaches. Although, to be honest, the first option should really be removed :) So, let’s just say these two approaches.
Now, how does ASP.NET help us with all of this? Well, I’m going to focus mostly on the third option, creating mobile-specific pages, as this is really where ASP.NET shines.
There are a couple of ways you can go about using ASP.NET to help improve your ASP.NET Ajax applications when it comes to mobile.
One such item is actually ridiculously easy, and while it might not be completely optimized for mobile it can help out tremendously when dealing with this scenario. Essentially all that you do is check if the current device connecting to your application is a mobile device, and if so you switch master page files to one which contains a more mobile-friendly CSS file. While this might be more of a generalization that all mobile devices are the same, you can still provide some CSS that could help alleviate some of the issues that pop up when using mobile devices with your application.
How is this done? It’s not that bad at all. On the PreInit event of any of your pages you can simply use the following:
protected
void
Page_PreInit(
object
sender, EventArgs e)
{
if
(Request.Browser.IsMobileDevice)
{
MasterPageFile =
"~/Mobile.Master"
;
}
}
Where “~/Mobile.Master” would be the path to the master page file you created.
Notice how I used Request.Browser? There’s actually a ton of useful stuff in there, with IsMobileDevice being one of the bigger ones. You could do Request.Browser.ScreenPixelsWidth and ScreenPixelsHeight for example. Or if you’re interested in the device itself you have MobileDeviceManufacturer (returns the name of the manufacturer of the device) and MobileDeviceModel (returns the name of the model of the device). There’s a lot that you can use to potentially aid the creation of a mobile-specific version of your application without too many changes to your code.
One downside of this though is that you are checking on every page whether or not the browser connecting to it is a mobile one or not. Kind of annoying to put that in several pages, and if you want to put it at a higher level you still requesting this change every time. Additionally, what if you want to show the desktop version to your users? I lost count of the amount of times certain sites don’t offer full functionality in their mobile web page, something was missing, or a features was just plain broken, and I had to switch over to the desktop view and go “manual mode” (zooming and scrolling) to take care of business.
How do we handle this? Well, we will have to work on a session-by-session basis to ensure that this is only taken care of once per instance that a user is connection to our application. This is all handled in our Global.ascx file, and let’s jump in to the Global.ascx.cs file and add a handler to Session_Start:
void
Session_Start(
object
sender, EventArgs e)
{
HttpRequest currentRequest = HttpContext.Current.Request;
if
(currentRequest.Browser.IsMobileDevice)
{
HttpContext.Current.Response.Redirect(
"~/Mobile/"
);
}
}
We grab the current request, check if is a mobile device and then redirect to the Mobile directory. Given the fact that the Mobile directory should contain our mobile site this will guarantee that no matter what URL we utilize the user will always be redirected to our mobile site.
If you want to take this whole thing even further you sure can. You can always look to see if the current page has a mobile equivalent and then redirect to that specific page – all you need to do is look at the current page and use the above redirect statement to a specific page of your choosing.
One note I want to make here too is that the above will always go to the root of the mobile site, so if you don’t want to kick people back to the beginning when they’ve been good boys and girls and bookmarked a page on your mobile site, just check to see if the URL path starts with “/Mobile/” and only redirect if it does not.
Now that we’re putting in some code for mobile devices, how do we test it? Of course you can test it by having a VPN:ed device (if you’re doing this internally) or publish your app to a public staging sever then navigate to the specific URL and test it out in person. However, how many of us have iOS, WP7, Android, WebOS, and Blackberry devices all at once? Not to mention the phone and tablet variation of each!
Luckily WP7 is ridiculously easy for us .NET developers – just download the Windows Phone Developer Tools!
What about others? Well, in certain cases we cannot truly emulate the device on Windows (iPhone and iPad for example) but there are a lot of options out there. Microsoft even has a page which talks about the various device simulators out there so check it out and install the ones you might need :)
While this blog post does not cover everything that you can do to create mobile applications it sure can give you a head start in what direction to think. Mobile devices are becoming more and more important to support, so don’t go with option number one that I listed in the beginning (doing nothing) and start tweaking your page to support these types of devices. While looking at converting your entire application might be a bit daunting, start to think about what mobile users would be most interested in and serve those pages, you can always offer the desktop version for more obscure pages (for now).
So, have you started to mobilize (and not in the sense of moving around ;)) your ASP.NET applications? Feel free to share your experiences in the comment section below.
Carl Bergenhem was the Product Manager for Kendo UI.