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

Once you install the Web Application Development Toolkit for Mobile, it will create a folder named WebAppToolkitMobile to the location you specified. Open the WebAppToolkitMobileVisualStudioTemplates folder and double click Mobile Web Application.vsi file to create a new Mobile Application template project in Visual Studio 2008. Now open your Visual Studio 2008 and select Mobile Web Application Project Template from ‘My Template’ Category and name you project as ‘TestMobileWebApplication’. Add a unit test project as well when the wizard asks you to do that.Now, if you look at your solution explorer, it will have three different projects. The first project named ‘MobileCapableViewEngine’ is a class library type project so the output is an assembly (.dll file) referred in your main project. In runtime, this assembly determines which view needs to be rendered depending on the browser and device type requested in that view. For example, if you want to show an employee list in your asp.net web application and you want to create the same list for the mobile application browser as well, you need to create two different views. The first one will be supported by Internet Explorer and the second one will supported by a mobile internet browser. You can also create customized views for mobile browser, as mobile and PDA screens can be small. In most of the scenarios, a developer would create customized views for mobile applications. The ViewEngineResult function of MobileCapableViewEngine class determines at runtime which view need to be rendered.

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. Another modification you need to do in the controller class, previously for any Http request your application code used to redirect to the specific view, now you need to call the FindView function of the MobileCapableViewEngine class, this function will identify the browser type and redirect your request to the appropriate customized view designated for that browser only.

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. If your native OS is Windows XP you also need to configure the Microsoft Activesync. Right click on the Active Sync icon found in the Windows taskbar and select “Open Microsoft ActiveSync”. Now from File menu select connection settings. Refer the above Screen shot to configure your ActiveSync Connection. Now from Device emulator manager select ‘Windows Mobile Classic Emulator’ and right click on that. Choose the connect Option. This will open the Windows Mobile Classic Emulator, if you are launching this for the 1st time, it will take 40-45 seconds to appear. Next,right click on the running image of Emulator Manager and select the Cradle option; this will activate Activesync and a Synchronization wizard will appear in your screen. Do not check any option in the Wizard and Finish it. Now we are ready to test the application in Windows Mobile Emulator. Your Windows Mobile Classic Emulator will look like as the following screen shot.Now go back to Visual Studio Editor and Press F5 to execute the web application. The following screen shot shows the exiting employee list in normal Internet Explorer. In my development box IIS is not installed so my application is running under virtual IIS. To show the same employee List in Microsoft Mobile device browser I have used a custom view that doesn’t have all the employee fields listed in normal browser. See the following screen shot.

Conclusion

ASP.NET MVC Framework gives you flexibility to add new Custom View Templates to your project. By using Text Template Transformation Toolkit you can customize your ASP.NET MVC existing view templates to a great extent.