ASP.NET MVC开发移动网站-入门篇

      最近项目需要开发一套移动版的网站，最开始我想到开发一套WAP版的网站,但是一想现在都是3G的时代了，很多手机屏幕都很大，而且支持无线上网，WAP网站已经不符合现在的趋势了。而且VS2008默认是不带wap项目的开发模板，如果需要用VS2008来开发wap项目，可以从下面的地址来下载模板：http://www.ywle.com/down/ASPNETMobileTemplates.zip。具体的安装和使用可以在网上搜索一下。最终经过查阅资料和博客，我决定采用ASP.NET MVC来开发，视图引擎根据用户访问的手持设备来查找相应的视图。

      首先从codeplex网站下载Mobile Device Browser File，地址：http://mdbf.codeplex.com/。这个文件里包含了很多型号的手机以及每种型号的浏览器支持什么版本的CSS，Javascript等。下载下来以后将它拷贝到ASP.NET MVC项目的App_Browsers文件夹下面。

      然后新建一个类，来继承ASP.NET MVC默认的视图引擎WebFormEngine，重写他的FindView方法，该方法会根据访问的浏览器来选择相应的视图，代码如下：

public class MobileCapableWebFormViewEngine : WebFormViewEngine { private StringDictionary deviceFolders; /// <summary> /// Initializes a new instance of the MobileCapableWebFormViewEngine class. /// </summary> public MobileCapableWebFormViewEngine() { this.deviceFolders = new StringDictionary { { "Pocket IE", "WindowsMobile" }, { "AppleMAC-Safari", "iPhone" } }; } /// <summary> /// Get the "browser/folder" mapping dictionary. /// </summary> public StringDictionary DeviceFolders { get { return this.deviceFolders; } } /// <summary> /// Finds the view. /// </summary> /// <param name="controllerContext">The controller context.</param> /// <param name="viewName">Name of the view.</param> /// <param name="masterName">Name of the master.</param> /// <param name="useCache">if set to true [use cache].</param> /// <returns>The page view.</returns> 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); } /// <summary> /// Get the device folder associated with the name of the browser. /// </summary> /// <param name="browser">Name of the browser.</param> /// <returns>The associated folder name.</returns> private string RetrieveDeviceFolderName(string browser) { if (this.deviceFolders.ContainsKey(browser)) { return this.deviceFolders[browser.Trim()]; } else { return "unknown"; } } }

 

然后再ASP.NET MVC项目里Controller对应的View里新建一个Mobile文件夹，然后新建你想要显示的支持哪种系统的视图，如图：

通过以上的操作就可以使用ASP.NET MVC来开发一个既支持普通WEB访问，又支持移动设备访问的WEB站点，但是还有一个缺点就是上面的操作都是要自己一步一步的来操作，有没有可以省事的方法呢，比如说类似WAP开发一样，有一个这样的开发模板。答案是肯定的，大家可以从微软的网站来下载，地址如下：http://code.msdn.microsoft.com/WebAppToolkitMobile/Release/ProjectReleases.aspx?ReleaseId=3914，不过有点可惜的是这个开发模板只支持ASP.NET MVC 1.0.对于想要使用ASP.NET MVC 2.0的朋友来说，只能使用手动的方式来创建一个支持移动开发的MVC项目了。

       好了，通过以上简单的介绍，大家应该明白如果使用ASP.NET MVC来开发移动网站了，后面几篇我会一步一步的来介绍如何在APS.NET MVC 2.0下开发移动网站。

 

参考资料：

http://www.hanselman.com/blog/MixMobileWebSitesWithASPNETMVCAndTheMobileBrowserDefinitionFile.aspx