現(xiàn)有ASP.NET MVC框架應用巧妙移植到手機
原創(chuàng)【51CTO獨家特稿】客戶對我們的產(chǎn)品質(zhì)量非常滿意，因此在該項目完成后又給了我們另外一個訂單，即部署客戶程序到Windows智能手機設(shè)備上。但是我們項目團隊成員以前都沒有這種開發(fā)經(jīng)驗。我們的計劃是通過最小限度的修改現(xiàn)有程序代碼，使其可以運行在Windows智能手機上。
移動設(shè)備Web應用工具箱（Web Application Toolkit for Mobile Devices）
我們選擇了微軟移動設(shè)備Web應用開發(fā)工具箱作為解決方案。使用這個免費的工具，可以輕松將基于MVC框架的Web應用擴展到移動設(shè)備上。下載地址：http://code.msdn.microsoft.com/WebAppToolkitMobile/Release/ProjectReleases.aspx?ReleaseId=3914
該移動應用開發(fā)工具箱所需的環(huán)境要求是：
1、安裝微軟.NET Framework 3.5 SP1。
2、Visual Studio 2008專業(yè)版或更高版本。你也可以下載免費的微軟Visual Web Developer 2008 Express版。
3、如果你的操作系統(tǒng)是Windows XP，則需要安裝同步軟件Microsoft Active Sync，以實現(xiàn)開發(fā)環(huán)境和設(shè)備模擬器之間的同步。
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應用開發(fā)工具箱后，它將在你指定的位置創(chuàng)建一個名為WebAppToolkitMobile的文件夾。打開WebAppToolkitMobile\VisualStudioTemplates文件夾，雙擊Mobile Web Application.vsi文件，將在Visual Studio 2008中創(chuàng)建一個新Mobile Application模板項目。現(xiàn)在打開你的Visual Studio 2008，并從“我的模板”分類中選擇Mobile Web Application項目模板，并將你的項目命名為“TestMobileWebApplication”。另外根據(jù)向?qū)б笤黾右粋€單元測試項目。
圖1
現(xiàn)在如果你看一下解決方案瀏覽器，它將有三個不同的項目。***個項目名為“MobileCapableViewEngie”，它是一個類庫型項目，其輸出為一個主項目引用的程序集(.dll文件)。在運行時中，這個程序集將根據(jù)瀏覽器和設(shè)備類型來決定展現(xiàn)哪一個視圖。
圖2
舉例來說，如果你想在你的asp.net應用中顯示一個員工列表，而且你也希望為手機應用瀏覽器創(chuàng)建一個相同的列表，那么你需要創(chuàng)建兩個不同的視圖。其中一個視圖供IE瀏覽器使用，而另一個則是為手機網(wǎng)絡(luò)瀏覽器所準備。你還可以為手機瀏覽器創(chuàng)建定制化的視圖，因為手機和PDA顯示屏可能非常小。在多數(shù)情況下，開發(fā)者將為手機應用創(chuàng)建定制化的視圖。MobileCapableViewEngine類的ViewEngineResult函數(shù)確定運行時展現(xiàn)哪一個視圖。
- 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事件中登記所有設(shè)備和瀏覽器類型。MobileCapableViewEngine程序集配置了兩個默認設(shè)備文件夾映射；一個是針對iPhone，被映射到View\Home\Mobile\iPhone文件夾，另一個是針對Windows手機，被映射到View\Home\Mobile\WindowsMobile文件夾。在RegisterViewEngines函數(shù)中添加實例到引擎集合之前，開發(fā)者可以通過修改MobileCapableWebFormViewEngine類的DeviceFolders屬性，來實現(xiàn)刪除或增加新文件夾映射。請看以下代碼片段。
- 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);
- }
移植現(xiàn)有ASP.NET應用到手機
一旦設(shè)備和視圖的登記完成后，拷貝粘貼現(xiàn)有ASP.NET MVC框架應用（你希望移植到手機的項目）到TestMobileWebApplication項目中。反之，你也可以增加MobileCapableViewEngine程序集到你現(xiàn)有MVC項目中，以進行必要的修改。
下面我將用到之前使用MVC框架2.0創(chuàng)建的員工管理應用。這個應用有四個視圖：創(chuàng)建員工、編輯現(xiàn)有員工數(shù)據(jù)、顯示所有員工數(shù)據(jù)和顯示特定員工數(shù)據(jù)。我已經(jīng)把員工管理應用中所有相關(guān)文件拷貝到TestMobileWebApplication項目中，并對RegisterViewEngine函數(shù)進行了必要的修改。另外我還針對手機設(shè)備創(chuàng)建了新的定制化視圖，并增加了一些針對手機應用的新管理頁面。我還在Content文件夾下創(chuàng)建了分別針對普通瀏覽器和手機瀏覽器的不同CSS文件。而且我對應用程序增加了錯誤處理功能。在增加了所有必需的組件后，如下圖所示。
圖3
在控制類中還需要進行另一處改動，此前對于任何Http請求，你的應用程序代碼需要將其重定向到特定視圖，現(xiàn)在你需要調(diào)用MobileCapableViewEngine類的FindView函數(shù)，這個函數(shù)能夠識別瀏覽器類型，并將你的請求重定向到相應的定制化視圖。51CTO開發(fā)頻道也向您推薦《ASP.NET MVC框架視頻教程》，以便于您更好的了解ASP.NET MVC框架。
使用模擬器測試你的應用
Microsoft Mobile SDK 6.0已經(jīng)安裝了相關(guān)模擬器。為了測試你的應用，首先你需要設(shè)置設(shè)備管理器和模擬器。雙擊設(shè)備模擬器管理程序(dvcemumanager.exe)，它的存放路徑為：C:\Program Files\Microsoft Device Emulator\1.0。
圖4
如果你的本地系統(tǒng)是Windows XP，你還需要配置Microsoft Activesync。右鍵點擊Windows任務(wù)欄上的Active Sync圖標，并選擇“Open Microsoft ActiveSync”，從文件菜單中選擇連接設(shè)置。
參考圖4設(shè)置你的ActiveSync連接。然后在設(shè)備模擬器管理工具中選擇“Mobile Classic Emulator”并右鍵點擊，選擇連接選項。這樣將會打開Windows Mobile Classic Emulator，***打開可能需要40-45秒時間。右鍵點擊運行的模擬器管理工具映像，并選擇Cradle選項激活ActiveSync，你將會看到一個同步向?qū)Ы缑妗?/p>
圖5
不要選擇向?qū)е械娜魏芜x項，點擊完成。現(xiàn)在我們已經(jīng)可以在Windows Mobile Emulator中測試應用。該模擬器如下圖所示。
圖6
現(xiàn)在回到Visual Studio編輯器中，按F5執(zhí)行該Web應用。下圖顯示了普通IE瀏覽器中的已有員工列表。
圖7
要想在微軟系統(tǒng)手機瀏覽器中顯示相同的員工列表，我使用了一個定制化視圖，只顯示員工信息的部分內(nèi)容。如下圖所示：
圖8
通過ASP.NET MVC Framework，我們可以靈活的向項目中增加新定制化視圖模板。借助于文本模板轉(zhuǎn)換工具箱（Text Template Transformation Toolkit ），你可以***限度的定制你的ASP.NET MVC現(xiàn)有視圖模板。
原文題目：Extend Your ASP.NET MVC Application to Windows Mobile
【編輯推薦】
- MVC架構(gòu)模式為什么這樣“紅”？
- 專訪微軟MVP衣明志：走進ASP.NET MVC 2框架開發(fā)
- 淺談ASP.NET MVC中TempData的實現(xiàn)機制
- ASP.NET MVC中使用View Model分離領(lǐng)域模型
