前言
在如今的移动互联时代，我们做Web网页程序开发时会经常遇到兼容PC版和移动版这样的需求。满足这样的Web网页实现需求，笔者可以总结出以下几种方案：
- 彻底切分，即：PC版和移动版的实现完全独立开发实现，部署的时候分别用不同的域名；
- 后端代码根据浏览器的标识判断是桌面设备还是移动设备，然后对应加载不同的模板页面进行渲染；
- 前端利用JS或者CSS实现响应式的页面布局，目前成熟的前端响应式框架Bootstrap即是如此
（如果你还有其他方案，欢迎留言反馈，交流。）
由于是ASP.NET MVC的Web应用程序，所以这里将给大家介绍基于第二种方案实现的[ASP.NET MVC5 Web应用程序使用同一个控制器渲染加载不同的视图文件实现的PC版和移动版]。
正文
一、 首页创建一个基于.NET Framework 4.5.2的ASP.NET MVC Web应用程序项目，待项目初始化完成之后 ，精简删除项目内置的程序包，最终的包文件配置(packages.conifig)如下：
<?xml version="1.0" encoding="utf-8"?>
<packages>
<package id="Antlr" version="3.4.1.9004" targetFramework="net452" />
<package id="bootstrap" version="3.3.7" targetFramework="net452" />
<package id="jQuery" version="1.12.4" targetFramework="net452" />
<package id="Microsoft.AspNet.Mvc" version="5.2.3" targetFramework="net452" />
<package id="Microsoft.AspNet.Razor" version="3.2.3" targetFramework="net452" />
<package id="Microsoft.AspNet.Web.Optimization" version="1.1.3" targetFramework="net452" />
<package id="Microsoft.AspNet.WebPages" version="3.2.3" targetFramework="net452" />
<package id="Microsoft.Web.Infrastructure" version="1.0.0.0" targetFramework="net452" />
<package id="Newtonsoft.Json" version="10.0.2" targetFramework="net452" />
<package id="Respond" version="1.4.2" targetFramework="net452" />
<package id="WebGrease" version="1.6.0" targetFramework="net452" />
</packages>
二、 在项目根目录下创建一个文件夹，并命名为Util，同时创建CustomMobiDisplayMode.cs文件，代码如下：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.WebPages;
namespace DeviceAdapter.Util
{
public class CustomMobiDisplayMode : DefaultDisplayMode
{
private static readonly List<string> _excludedDevices = new List<string> { "Opera Mobi", "Mobile" };
public CustomMobiDisplayMode() : base("Mobile")
{
ContextCondition = (context => IsMobile(context.GetOverriddenUserAgent()));
}
public static bool IsMobile(string useragentString)
{
return _excludedDevices.Select(excluded => useragentString.IndexOf(excluded, StringComparison.InvariantCultureIgnoreCase)).Any(index => index >= 0);
}
}
}
创建完成以上cs文件以后，打开Global.asax全局文件，修改 Application_Start 方法的代码为：
protected void Application_Start()
{
//移动设备显示模式监测器
DisplayModeProvider.Instance.Modes.Insert(0, new CustomMobileDisplayMode());
AreaRegistration.RegisterAllAreas();
FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
RouteConfig.RegisterRoutes(RouteTable.Routes);
BundleConfig.RegisterBundles(BundleTable.Bundles);
}
好了，ASP.NET后端的设备识别工作就完成了，接下来只需要为不同的设备(PC版和移动版)准备相应的视图模板即可，比如把首页的视图文件分别实现PC版和移动版，则首页需要两个cshtml视图文件(Index.cshtml,Index.mobile.cshtml)，Index.cshtml对应PC版，Index.mobile.cshtml对应移动版，html代码比较简单，就不在这里贴出来。
到此，ASP.NET MVC5 Web应用程序使用同一个控制器渲染加载不同的视图文件实现的PC版和移动版的解决方案就完成了。打开PC浏览和手机浏览器分别查看各自的效果吧。
PC版效果：
移动版效果：
点击这里，下载本文示例源码
本文来源：图享网 《ASP.NET MVC5 Web应用程序使用同一个控制器渲染加载不同的视图文件实现的PC版和移动版》
