In this article, I will discuss migration of your existing ASP.NET MVC Framework-based application to Windows Mobile Devices, and I’ll also show you a sample MVC web application migrated to Windows Mobile. For the last 6 months I have worked on a web based application in the life science domain, and as per customer demand we introduced ASP.NET MVC Framework with a test driven approach.
Our customer was very happy about the product quality, and after project completion we got another work order to deploy the customer module to Windows Smart Devices. None of our team members had experience deploying ASP.NET applications to Windows Smart Devices. Our plan was to deploy the existing released codebase to Windows Smart Devices with minimal modification.Web Application Toolkit for Mobile Devices
We identified the Microsoft Web Application Development Toolkit for Mobile Devices as the solution. MVC Framework-based web applications can be easily extended to mobile devices using this tool. It’s also free. You can download the toolkit here.Prerequisites for the mobile application toolkit are:- 1. MS .NET Framework 3.5 with Service Pack 1 installed.
2. Visual Studio 2008 professional version or above. You can also download Microsoft Visual Web Developer 2008 Express Edition, which is free.
3. If your operating system is Windows XP, you need to install Microsoft Active Sync for synchronizing your development environment with device emulator.
4. ASP.NET MVC Framework, this framework is also free and can be downloaded from MSDN or CodePlex.
5. Windows Mobile SDK 6.0 or above. By default the SDK doesn’t have emulator images so you can download from the following path.http://www.microsoft.com/downloads/details.aspx?FamilyID=1A7A6B52-F89E-4354-84CE-5D19C204498A&displaylang=en
![](http://assets.devx.com/articlefigs/44610image02.jpg)
public override ViewEngineResult FindView(ControllerContext controllerContext,
string viewName, string masterName, bool useCache) { ViewEngineResult result = null; HttpRequestBase request = controllerContext.HttpContext.Request; if (request.Browser.IsMobileDevice) { string mobileViewName = string.Empty; mobileViewName = string.Format( CultureInfo.InvariantCulture, "Mobile/{0}/{1}", this.RetrieveDeviceFolderName(request.Browser.Browser), viewName); result = this.ResolveView(controllerContext, mobileViewName, masterName, useCache); if (result == null || result.View == null) { mobileViewName = string.Format( CultureInfo.InvariantCulture, "Mobile/{0}", viewName); result = this.ResolveView(controllerContext, mobileViewName, masterName, useCache); } } if (result == null || result.View == null) { result = this.ResolveView(controllerContext, viewName, masterName, useCache); } return result; } protected virtual ViewEngineResult ResolveView(ControllerContext controllerContext, string viewName, string masterName, bool useCache) { return base.FindView(controllerContext, viewName, masterName, useCache); }
The next thing you need to do is register all you device and browser type in Application_Start event exists in your Global.asax file. The MobileCapableViewEngine assembly configures 2 default device folder mappings; one for iPhone that being mapped with ViewHomeMobileiPhone folder and the other one for Windows Mobile maps to ViewHomeMobileWindowsMobile folder. Developers can remove or add new folder mappings using the DeviceFolders property from the MobileCapableWebFormViewEngine class before adding the instance to the engines collections in the RegisterViewEngines function. See the following code snipped.
public static void RegisterViewEngines(ViewEngineCollection engines) { var engine = new MobileCapableWebFormViewEngine(); engine.DeviceFolders.Clear(); engine.DeviceFolders.Add("Pocket IE", "WindowsMobile"); engine.DeviceFolders.Add("AppleMAC-Safari", "iPhone"); engine.DeviceFolders.Add("Safari", "iPhone"); engines.Clear(); engines.Add(engine); }
Migrating your Existing ASP.NET Application to Mobile Devices
Once your registration with the Devices and Views are complete, copy paste your existing ASP.NET MVC Framework Application (Project you want to Migrate to Mobile) code (Models and Controllers) to TestMobileWebApplication project. You can do the same in the reverse way by adding MobileCapableViewEngine assembly to your existing MVC Project and do the necessary modification. I will refer here the Employee Master Application created earlier using MVC Framework 2.0. This application has 4 views named Create Employee, Edit existing Employee, Show all employee details and Show specific employee details. I have copied all my necessary Employee Master Application files more specifically Models and Controllers to TestMobileWebApplication project and did necessary changes to the RegisterViewEngine function. The next thing I have done has created new customized views for Mobile Application device and added a new Master page for Mobile application. Under the Content folder I have also created separate CSS file for Normal Browser and Mobile Internet Browser. I have also added Error handling functionality to my application. So after adding all the necessary components, the solution explorer will look like as the following screen shot.![](http://assets.devx.com/articlefigs/44610image03.jpg)
Testing Your Application Using Mobile Device Emulators
With Microsoft Mobile SDK version 6.0 the supported emulators are already installed. First you need configure the device manager and emulator to test your application. Double Click the Device emulator manager (dvcemumanager.exe), it can be found in C:Program FilesMicrosoft Device Emulator1.0.![](http://assets.devx.com/articlefigs/44610image06.jpg)