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

來源: 51CTO 發布時間: 2010-07-27 09:06 閱讀: 2446 次推薦: 0 原文鏈接 [收藏]

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

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

移動設備Web應用工具箱（WebApplicationToolkitforMobileDevices）
　　我們選擇了微軟移動設備Web應用開發工具箱作為解決方案。使用這個免費的工具，可以輕松將基于MVC框架的Web應用擴展到移動設備上。

下載地址：
　　http://code.msdn.microsoft.com/WebAppToolkitMobile/Release/ProjectReleases.aspx?ReleaseId=3914
　　該移動應用開發工具箱所需的環境要求是：
　　1、安裝微軟.NETFramework3.5SP1。
　　2、VisualStudio2008專業版或更高版本。你也可以下載免費的微軟VisualWebDeveloper2008Express版。
　　3、如果你的操作系統是WindowsXP，則需要安裝同步軟件MicrosoftActiveSync，以實現開發環境和設備模擬器之間的同步。
　　4、ASP.NETMVC框架，該框架也是免費的，你可以從MSDN或CodePlex上下載。
　　5、WindowsMobileSDK6.0或更高版本。默認情況下，該SDK沒有模擬器映像文件，你可從以下地址下載：
　　http://www.microsoft.com/downloads/details.aspx?FamilyID=1A7A6B52-F89E-4354-84CE-5D19C204498A&displaylang=en

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

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

　　舉例來說，如果你想在你的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屬性，來實現刪除或增加新文件夾映射。請看以下代碼片段。

　publicstaticvoidRegisterViewEngines(ViewEngineCollectionengines)
　　{
　　varengine=newMobileCapableWebFormViewEngine();
　　engine.DeviceFolders.Clear();
　　engine.DeviceFolders.Add("PocketIE","WindowsMobile");
　　engine.DeviceFolders.Add("AppleMAC-Safari","iPhone");
　　engine.DeviceFolders.Add("Safari","iPhone");
　　engines.Clear();
　　engines.Add(engine);
　　}

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

　　在控制類中還需要進行另一處改動，此前對于任何Http請求，你的應用程序代碼需要將其重定向到特定視圖，現在你需要調用MobileCapableViewEngine類的FindView函數，這個函數能夠識別瀏覽器類型，并將你的請求重定向到相應的定制化視圖。
　　使用模擬器測試你的應用
　　MicrosoftMobileSDK6.0已經安裝了相關模擬器。為了測試你的應用，首先你需要設置設備管理器和模擬器。雙擊設備模擬器管理程序(dvcemumanager.exe)，它的存放路徑為：C:\ProgramFiles\MicrosoftDeviceEmulator\1.0。

　　如果你的本地系統是WindowsXP，你還需要配置MicrosoftActivesync。右鍵點擊Windows任務欄上的ActiveSync圖標，并選擇“OpenMicrosoftActiveSync”，從文件菜單中選擇連接設置。參考圖4設置你的ActiveSync連接。然后在設備模擬器管理工具中選擇“MobileClassicEmulator”并右鍵點擊，選擇連接選項。這樣將會打開WindowsMobileClassicEmulator，首次打開可能需要40-45秒時間。右鍵點擊運行的模擬器管理工具映像，并選擇Cradle選項激活ActiveSync，你將會看到一個同步向導界面。