社区编辑申请
注册/登录
现有ASP.NET MVC框架应用巧妙移植到手机 原创
开发 后端
在本篇文章中,我将通过一个简单的例子来演示,如何将现有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函数确定运行时展现哪一个视图。

  1. public override ViewEngineResult FindView(ControllerContext controllerContext, string viewName, string masterName, bool useCache)  
  2.         {  
  3.             ViewEngineResult result = null;  
  4.             HttpRequestBase request = controllerContext.HttpContext.Request;  
  5.  
  6.             if (request.Browser.IsMobileDevice)  
  7.             {  
  8.                 string mobileViewName = string.Empty;  
  9.  
  10.                 mobileViewName = string.Format(  
  11.                                         CultureInfo.InvariantCulture,  
  12.                                         "Mobile/{0}/{1}",  
  13.                                         this.RetrieveDeviceFolderName(request.Browser.Browser),  
  14.                                         viewName);  
  15.  
  16.                 result = this.ResolveView(controllerContext, mobileViewName, masterName, useCache);  
  17.  
  18.                 if (result == null || result.View == null)  
  19.                 {  
  20.                     mobileViewName = string.Format(  
  21.                                             CultureInfo.InvariantCulture,  
  22.                                             "Mobile/{0}",  
  23.                                             viewName);  
  24.  
  25.                     result = this.ResolveView(controllerContext, mobileViewName, masterName, useCache);  
  26.                 }  
  27.             }  
  28.               
  29.             if (result == null || result.View == null)  
  30.             {  
  31.                 result = this.ResolveView(controllerContext, viewName, masterName, useCache);  
  32.             }  
  33.  
  34.             return result;  
  35.         }  
  36.  
  37.         protected virtual ViewEngineResult ResolveView(ControllerContext controllerContext, string   
  38.         viewName, string masterName, bool useCache)  
  39.         {  
  40.             return base.FindView(controllerContext, viewName, masterName, useCache);  
  41.         } 

接下来要做的事情是,在Global.asax文件的Application_Start事件中登记所有设备和浏览器类型。MobileCapableViewEngine程序集配置了两个默认设备文件夹映射;一个是针对iPhone,被映射到View\Home\Mobile\iPhone文件夹,另一个是针对Windows手机,被映射到View\Home\Mobile\WindowsMobile文件夹。在RegisterViewEngines函数中添加实例到引擎集合之前,开发者可以通过修改MobileCapableWebFormViewEngine类的DeviceFolders属性,来实现删除或增加新文件夹映射。请看以下代码片段。

  1. public static void RegisterViewEngines(ViewEngineCollection engines)  
  2.         {  
  3.             var engine = new MobileCapableWebFormViewEngine();  
  4.             engine.DeviceFolders.Clear();  
  5.             engine.DeviceFolders.Add("Pocket IE""WindowsMobile");  
  6.             engine.DeviceFolders.Add("AppleMAC-Safari""iPhone");  
  7.             engine.DeviceFolders.Add("Safari""iPhone");  
  8.  
  9.             engines.Clear();  
  10.             engines.Add(engine);  
  11.         } 

移植现有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,你将会看到一个同步向导界面。

同步向导界面

图5

不要选择向导中的任何选项,点击完成。现在我们已经可以在Windows Mobile Emulator中测试应用。该模拟器如下图所示。

模拟器

图6

现在回到Visual Studio编辑器中,按F5执行该Web应用。下图显示了普通IE浏览器中的已有员工列表。

回到Visual Studio编辑器

图7

要想在微软系统手机浏览器中显示相同的员工列表,我使用了一个定制化视图,只显示员工信息的部分内容。如下图所示:

定制化视图

图8

通过ASP.NET MVC Framework,我们可以灵活的向项目中增加新定制化视图模板。借助于文本模板转换工具箱(Text Template Transformation Toolkit ),你可以***限度的定制你的ASP.NET MVC现有视图模板。

原文题目:Extend Your ASP.NET MVC Application to Windows Mobile

【编辑推荐】

  1. MVC架构模式为什么这样“红”?
  2. 专访微软MVP衣明志:走进ASP.NET MVC 2框架开发
  3. 浅谈ASP.NET MVC中TempData的实现机制
  4. ASP.NET MVC中使用View Model分离领域模型

 

责任编辑:彭凡 来源: 51CTO
相关推荐

2022-06-24 11:14:00

美团开源

2022-06-27 17:46:53

PythonFlask

2022-05-11 08:23:54

自动化测试软件测试

2022-04-15 14:31:02

鸿蒙操作系统

2022-06-03 09:41:03

DockerKubernetes容器

2022-05-11 15:08:52

驱动开发系统移植

2022-06-26 09:55:00

接口自动化项目

2022-04-02 20:45:04

Hi3516开发板操作系统鸿蒙

2022-06-21 14:10:43

NIST网络安全

2022-06-09 14:40:14

系统移植鸿蒙

2022-04-30 08:43:52

Spring模块化框架

2022-04-27 09:30:01

Python爬虫人工智能

2022-06-21 09:27:01

PythonFlaskREST API

2022-06-07 17:01:31

UI框架前端

2022-05-30 15:21:27

Hi3861TCP通信

2022-05-30 09:32:07

Spring容器

2022-06-08 00:10:33

数据治理框架

2022-06-13 06:33:04

浏览器浏览器插件

2022-05-17 09:00:00

Next.js餐厅网站Cosmic

2022-05-24 13:08:55

GNOMEKDELinux

同话题下的热门内容

源码探秘:Python 中对象是如何被调用的?吐血推荐17个提升开发效率的“轮子”超全!Python 中常见的配置文件写法Pandas 新手容易犯的六个错误Python 中的万能之王 Lambda 函数整理了100个Python精选库,建议收藏!Python进行数据可视化,你会用什么库来做呢?Spring MVC中@InitBinder注解是如何应用的?

编辑推荐

使用Kotlin做开发一个月后的感想面试官问你什么是消息队列?把这篇甩给他!五大自动化测试的Python框架图文详解两种算法:深度优先遍历(DFS)和广度优先遍历(BFS)2018年最流行的十大编程语言,其中包括你用的语言吗?
我收藏的内容
点赞
收藏

51CTO技术栈公众号