ASP.NET MVC5 Web应用程序使用同一个控制器渲染加载不同的视图文件实现的PC版和移动版

ASP.NET MVC 作者: Rector 2124 次阅读 · 读完约需 3 分钟 1 收藏 收藏本文

郑重申明:本文未经许可,禁止任何形式转载

前言

在如今的移动互联时代,我们做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)如下:

二、 在项目根目录下创建一个文件夹,并命名为Util,同时创建CustomMobiDisplayMode.cs文件,代码如下:

创建完成以上cs文件以后,打开Global.asax全局文件,修改 Application_Start 方法的代码为:

好了,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 PC版

移动版效果:

ASP.NET MVC5 移动版

点击这里,下载本文示例源码

本文永久链接地址:http://codedefault.com/2017/aspdotnet-mvc-desktop-and-mobile-devices-use-the-same-controller-but-different-view-html-file

阅读了该文章的人还浏览了...

本文永久链接码友网 » ASP.NET MVC5 Web应用程序使用同一个控制器渲染加载不同的视图文件实现的PC版和移动版

发布于: 2017-04-10 22:00:28
分享扩散:

发表评论

登录用户才能发表评论, 请 登 录 或者 注册