ASP.NET MVC5 Web應(yīng)用程序使用同一個(gè)控制器渲染加載不同的視圖文件實(shí)現(xiàn)的PC版和移動(dòng)版

前言

在如今的移動(dòng)互聯(lián)時(shí)代,我們做Web網(wǎng)頁(yè)程序開(kāi)發(fā)時(shí)會(huì)經(jīng)常遇到兼容PC版和移動(dòng)版這樣的需求。滿足這樣的Web網(wǎng)頁(yè)實(shí)現(xiàn)需求,筆者可以總結(jié)出以下幾種方案:

  • 徹底切分,即:PC版和移動(dòng)版的實(shí)現(xiàn)完全獨(dú)立開(kāi)發(fā)實(shí)現(xiàn),部署的時(shí)候分別用不同的域名;
  • 后端代碼根據(jù)瀏覽器的標(biāo)識(shí)判斷是桌面設(shè)備還是移動(dòng)設(shè)備,然后對(duì)應(yīng)加載不同的模板頁(yè)面進(jìn)行渲染;
  • 前端利用JS或者CSS實(shí)現(xiàn)響應(yīng)式的頁(yè)面布局,目前成熟的前端響應(yīng)式框架Bootstrap即是如此

(如果你還有其他方案,歡迎留言反饋,交流。)

由于是ASP.NET MVC的Web應(yīng)用程序,所以這里將給大家介紹基于第二種方案實(shí)現(xiàn)的[ASP.NET MVC5 Web應(yīng)用程序使用同一個(gè)控制器渲染加載不同的視圖文件實(shí)現(xiàn)的PC版和移動(dòng)版]。

正文

一、 首頁(yè)創(chuàng)建一個(gè)基于.NET Framework 4.5.2的ASP.NET MVC Web應(yīng)用程序項(xiàng)目,待項(xiàng)目初始化完成之后 ,精簡(jiǎn)刪除項(xiàng)目?jī)?nèi)置的程序包,最終的包文件配置(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>

二、 在項(xiàng)目根目錄下創(chuàng)建一個(gè)文件夾,并命名為Util,同時(shí)創(chuàng)建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);
        }
    }
}

創(chuàng)建完成以上cs文件以后,打開(kāi)Global.asax全局文件,修改 Application_Start 方法的代碼為:

protected void Application_Start()
{
   //移動(dòng)設(shè)備顯示模式監(jiān)測(cè)器
   DisplayModeProvider.Instance.Modes.Insert(0, new CustomMobileDisplayMode());

   AreaRegistration.RegisterAllAreas();
   FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
   RouteConfig.RegisterRoutes(RouteTable.Routes);
   BundleConfig.RegisterBundles(BundleTable.Bundles);
}

好了,ASP.NET后端的設(shè)備識(shí)別工作就完成了,接下來(lái)只需要為不同的設(shè)備(PC版和移動(dòng)版)準(zhǔn)備相應(yīng)的視圖模板即可,比如把首頁(yè)的視圖文件分別實(shí)現(xiàn)PC版和移動(dòng)版,則首頁(yè)需要兩個(gè)cshtml視圖文件(Index.cshtml,Index.mobile.cshtml),Index.cshtml對(duì)應(yīng)PC版,Index.mobile.cshtml對(duì)應(yīng)移動(dòng)版,html代碼比較簡(jiǎn)單,就不在這里貼出來(lái)。

到此,ASP.NET MVC5 Web應(yīng)用程序使用同一個(gè)控制器渲染加載不同的視圖文件實(shí)現(xiàn)的PC版和移動(dòng)版的解決方案就完成了。打開(kāi)PC瀏覽和手機(jī)瀏覽器分別查看各自的效果吧。
PC版效果:

ASP.NET MVC5 PC版

移動(dòng)版效果:

ASP.NET MVC5 移動(dòng)版

點(diǎn)擊這里,下載本文示例源碼

本文來(lái)源:圖享網(wǎng)ASP.NET MVC5 Web應(yīng)用程序使用同一個(gè)控制器渲染加載不同的視圖文件實(shí)現(xiàn)的PC版和移動(dòng)版

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容