現有ASP.NET MVC框架應用巧妙移植到手機

作者：呂欣譯 2010-05-05 09:00:57

在本篇文章中，我將通過一個簡單的例子來演示，如何將現有ASP.NET MVC框架應用移植到Windows Mobile手機設備上。在過去6個月中，我一直在開發一個生命科學領域的Web應用，根據客戶需求，我們以測試驅動方式引入了ASP.NET MVC框架。

【51CTO獨家特稿】客戶對我們的產品質量非常滿意，因此在該項目完成后又給了我們另外一個訂單，即部署客戶程序到Windows智能手機設備上。但是我們項目團隊成員以前都沒有這種開發經驗。我們的計劃是通過最小限度的修改現有程序代碼，使其可以運行在Windows智能手機上。

移動設備Web應用工具箱（Web Application Toolkit for Mobile Devices）

我們選擇了微軟移動設備Web應用開發工具箱作為解決方案。使用這個免費的工具，可以輕松將基于MVC框架的Web應用擴展到移動設備上。下載地址：http://code.msdn.microsoft.com/WebAppToolkitMobile/Release/ProjectReleases.aspx?ReleaseId=3914

該移動應用開發工具箱所需的環境要求是：

1、安裝微軟.NET Framework 3.5 SP1。

2、Visual Studio 2008專業版或更高版本。你也可以下載免費的微軟Visual Web Developer 2008 Express版。

3、如果你的操作系統是Windows XP，則需要安裝同步軟件Microsoft Active Sync，以實現開發環境和設備模擬器之間的同步。

4、ASP.NET MVC框架，該框架也是免費的，你可以從MSDN或CodePlex上下載。

5、Windows Mobile SDK 6.0或更高版本。默認情況下，該SDK沒有模擬器映像文件，你可從以下地址下載：http://www.microsoft.com/downloads/details.aspx?FamilyID=1A7A6B52-F89E-4354-84CE-5D19C204498A&displaylang=en

在安裝了Web應用開發工具箱后，它將在你指定的位置創建一個名為WebAppToolkitMobile的文件夾。打開WebAppToolkitMobile\VisualStudioTemplates文件夾，雙擊Mobile Web Application.vsi文件，將在Visual Studio 2008中創建一個新Mobile Application模板項目。現在打開你的Visual Studio 2008，并從“我的模板”分類中選擇Mobile Web Application項目模板，并將你的項目命名為“TestMobileWebApplication”。另外根據向導要求增加一個單元測試項目。

圖1

現在如果你看一下解決方案瀏覽器，它將有三個不同的項目。***個項目名為“MobileCapableViewEngie”，它是一個類庫型項目，其輸出為一個主項目引用的程序集(.dll文件)。在運行時中，這個程序集將根據瀏覽器和設備類型來決定展現哪一個視圖。

圖2

舉例來說，如果你想在你的asp.net應用中顯示一個員工列表，而且你也希望為手機應用瀏覽器創建一個相同的列表，那么你需要創建兩個不同的視圖。其中一個視圖供IE瀏覽器使用，而另一個則是為手機網絡瀏覽器所準備。你還可以為手機瀏覽器創建定制化的視圖，因為手機和PDA顯示屏可能非常小。在多數情況下，開發者將為手機應用創建定制化的視圖。MobileCapableViewEngine類的ViewEngineResult函數確定運行時展現哪一個視圖。

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);  
        }

接下來要做的事情是，在Global.asax文件的Application_Start事件中登記所有設備和瀏覽器類型。MobileCapableViewEngine程序集配置了兩個默認設備文件夾映射；一個是針對iPhone，被映射到View\Home\Mobile\iPhone文件夾，另一個是針對Windows手機，被映射到View\Home\Mobile\WindowsMobile文件夾。在RegisterViewEngines函數中添加實例到引擎集合之前，開發者可以通過修改MobileCapableWebFormViewEngine類的DeviceFolders屬性，來實現刪除或增加新文件夾映射。請看以下代碼片段。

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);  
        }

移植現有ASP.NET應用到手機

一旦設備和視圖的登記完成后，拷貝粘貼現有ASP.NET MVC框架應用（你希望移植到手機的項目）到TestMobileWebApplication項目中。反之，你也可以增加MobileCapableViewEngine程序集到你現有MVC項目中，以進行必要的修改。

下面我將用到之前使用MVC框架2.0創建的員工管理應用。這個應用有四個視圖：創建員工、編輯現有員工數據、顯示所有員工數據和顯示特定員工數據。我已經把員工管理應用中所有相關文件拷貝到TestMobileWebApplication項目中，并對RegisterViewEngine函數進行了必要的修改。另外我還針對手機設備創建了新的定制化視圖，并增加了一些針對手機應用的新管理頁面。我還在Content文件夾下創建了分別針對普通瀏覽器和手機瀏覽器的不同CSS文件。而且我對應用程序增加了錯誤處理功能。在增加了所有必需的組件后，如下圖所示。

圖3

在控制類中還需要進行另一處改動，此前對于任何Http請求，你的應用程序代碼需要將其重定向到特定視圖，現在你需要調用MobileCapableViewEngine類的FindView函數，這個函數能夠識別瀏覽器類型，并將你的請求重定向到相應的定制化視圖。51CTO開發頻道也向您推薦《ASP.NET MVC框架視頻教程》，以便于您更好的了解ASP.NET MVC框架。

使用模擬器測試你的應用

Microsoft Mobile SDK 6.0已經安裝了相關模擬器。為了測試你的應用，首先你需要設置設備管理器和模擬器。雙擊設備模擬器管理程序(dvcemumanager.exe)，它的存放路徑為：C:\Program Files\Microsoft Device Emulator\1.0。

圖4

如果你的本地系統是Windows XP，你還需要配置Microsoft Activesync。右鍵點擊Windows任務欄上的Active Sync圖標，并選擇“Open Microsoft ActiveSync”，從文件菜單中選擇連接設置。

參考圖4設置你的ActiveSync連接。然后在設備模擬器管理工具中選擇“Mobile Classic Emulator”并右鍵點擊，選擇連接選項。這樣將會打開Windows Mobile Classic Emulator，***打開可能需要40-45秒時間。右鍵點擊運行的模擬器管理工具映像，并選擇Cradle選項激活ActiveSync，你將會看到一個同步向導界面。