返璞归真 asp.net mvc (12) - asp.net mvc 4.0 新特性之移动特性

简介: 原文:返璞归真 asp.net mvc (12) - asp.net mvc 4.0 新特性之移动特性[索引页][源码下载] 返璞归真 asp.net mvc (12) - asp.net mvc 4.
原文: 返璞归真 asp.net mvc (12) - asp.net mvc 4.0 新特性之移动特性

[索引页]
[源码下载]


返璞归真 asp.net mvc (12) - asp.net mvc 4.0 新特性之移动特性



作者:webabcd


介绍
asp.net mvc 之 asp.net mvc 4.0 新特性之移动特性

  • 为不同的客户端提供不同的视图
  • 手动重写 UserAgent,从而强制使用对应的视图



示例
1、演示如何为不同的客户端提供不同的视图
Global.asax.cs

/*
 * 为了更好地支持移动设备,mvc 4.0 带来了一些新的特性
 * 
 * 本 demo 演示如何方便地为不同客户端提供不同的视图
 */

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Http;
using System.Web.Mvc;
using System.Web.Optimization;
using System.Web.Routing;
using System.Web.WebPages;

namespace MobileFeature
{
    public class MvcApplication : System.Web.HttpApplication
    {
        protected void Application_Start()
        {
            // 为 windows phone 客户端新增加一个名为 wp 的显示模式
            DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("wp")
            {
                // 设置判断 windows phone 客户端的条件
                ContextCondition = (context => context.GetOverriddenUserAgent().IndexOf
                    ("Windows Phone", StringComparison.InvariantCultureIgnoreCase) >= 0)
            });

            /*
             * 显示模式可以方便地为不同客户端提供不同视图
             * 默认 DisplayModeProvider.Instance.Modes 有两种显示模式,分别是 Mobile 和 ""
             * 
             * 以 Home/Index.cshtml 为例
             * 1、windows phone 客户端访问会使用 Index.wp.cshtml 视图
             * 2、其他移动客户端访问会使用 Index.Mobile.cshtml 视图
             * 3、不符合以上两个条件的客户端访问会使用 Index.cshtml 视图
             * 注:找不到对应的视图时,会默认使用 Index.cshtml 视图
             */


            AreaRegistration.RegisterAllAreas();

            WebApiConfig.Register(GlobalConfiguration.Configuration);
            FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
            RouteConfig.RegisterRoutes(RouteTable.Routes);
            BundleConfig.RegisterBundles(BundleTable.Bundles);
        }
    }
}

Index.cshtml

@{
    ViewBag.Title = "主页";
}

<h2>@ViewBag.Message</h2>
<p>
    若要了解有关 ASP.NET MVC 的详细信息,请访问 <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a></p>
<h1>为非移动设备提供的页面</h1>
<ul data-role="listview" data-inset="true">
    <li data-role="list-divider">导航</li>
    <li>@Html.ActionLink("关于", "About", "Home")</li>
    <li>@Html.ActionLink("联系方式", "Contact", "Home")</li>
</ul>
<script type="text/javascript">
    alert("是否是移动设备:@Request.Browser.IsMobileDevice.ToString()");
</script>

Index.wp.cshtml

@{
    ViewBag.Title = "主页";
}

<h2>@ViewBag.Message</h2>
<p>
    若要了解有关 ASP.NET MVC 的详细信息,请访问 <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a></p>
<h1>为 windows phone 提供的页面</h1>
<ul data-role="listview" data-inset="true">
    <li data-role="list-divider">导航</li>
    <li>@Html.ActionLink("关于", "About", "Home")</li>
    <li>@Html.ActionLink("联系方式", "Contact", "Home")</li>
</ul>
<script type="text/javascript">
    alert("是否是移动设备:@Request.Browser.IsMobileDevice.ToString()");
</script>

Index.Mobile.cshtml

@{
    ViewBag.Title = "主页";
}

<h2>@ViewBag.Message</h2>
<p>
    若要了解有关 ASP.NET MVC 的详细信息,请访问 <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a></p>
<h1>为非 windows phone 的移动设备提供的页面</h1>
<ul data-role="listview" data-inset="true">
    <li data-role="list-divider">导航</li>
    <li>@Html.ActionLink("关于", "About", "Home")</li>
    <li>@Html.ActionLink("联系方式", "Contact", "Home")</li>
</ul>
<script type="text/javascript">
    alert("是否是移动设备:@Request.Browser.IsMobileDevice.ToString()");
</script>


2、演示如何手动重写 UserAgent,从而强制使用对应的视图
ViewSwitcherController.cs

/*
 * 演示如何手动重写 UserAgent,从而强制使用对应的视图
 */

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using System.Web.Mvc;
using System.Web.WebPages;

namespace MobileFeature.Controllers
{
    public class ViewSwitcherController : Controller
    {
        public ActionResult SwitchView(bool? mobile)
        {
            mobile = mobile ?? false;

            // 重写 UserAgent
            HttpContext.SetOverriddenBrowser(mobile.Value ? BrowserOverride.Mobile : BrowserOverride.Desktop);
            // HttpContext.SetOverriddenBrowser(string userAgent);

            return View();
        }
    }
}

SwitchView.cshtml

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>非移动设备</title>
</head>
<body>
    <h2>非移动设备</h2>

    <!--判断重写后的 UserAgent-->

    @if (ViewContext.HttpContext.GetOverriddenBrowser().IsMobileDevice)
    {
        // ViewContext.HttpContext.GetOverriddenUserAgent()
        
        @: Displaying mobile view
        @Html.ActionLink("Desktop view", "SwitchView", "ViewSwitcher", new { mobile = false }, null)
    }
    else
    {
        @: Displaying desktop view
        @Html.ActionLink("Mobile view", "SwitchView", "ViewSwitcher", new { mobile = true }, null)
    }
</body>
</html>

SwitchView.Mobile.cshtml

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>移动设备</title>
</head>
<body>
    <h2>移动设备</h2>

    <!--判断重写后的 UserAgent-->

    @if (ViewContext.HttpContext.GetOverriddenBrowser().IsMobileDevice)
    {
        // ViewContext.HttpContext.GetOverriddenUserAgent()
        
        @: Displaying mobile view
        @Html.ActionLink("Desktop view", "SwitchView", "ViewSwitcher", new { mobile = false }, null)
    }
    else
    {
        @: Displaying desktop view
        @Html.ActionLink("Mobile view", "SwitchView", "ViewSwitcher", new { mobile = true }, null)
    }
</body>
</html>



OK
[源码下载]

目录
相关文章
|
24天前
|
开发框架 前端开发 .NET
进入ASP .net mvc的世界
进入ASP .net mvc的世界
24 0
|
24天前
mvc.net分页查询案例——mvc-paper.css
mvc.net分页查询案例——mvc-paper.css
4 0
|
1月前
|
开发框架 中间件 .NET
C# .NET面试系列七:ASP.NET Core
## 第一部分:ASP.NET Core #### 1. 如何在 controller 中注入 service? 在.NET中,在ASP.NET Core应用程序中的Controller中注入服务通常使用<u>依赖注入(Dependency Injection)</u>来实现。以下是一些步骤,说明如何在Controller中注入服务: 1、创建服务 首先,确保你已经在应用程序中注册了服务。这通常在Startup.cs文件的ConfigureServices方法中完成。例如: ```c# services.AddScoped<IMyService, MyService>(); //
59 0
|
1月前
|
开发框架 前端开发 .NET
C# .NET面试系列六:ASP.NET MVC
<h2>ASP.NET MVC #### 1. MVC 中的 TempData\ViewBag\ViewData 区别? 在ASP.NET MVC中,TempData、ViewBag 和 ViewData 都是用于在控制器和视图之间传递数据的机制,但它们有一些区别。 <b>TempData:</b> 1、生命周期 ```c# TempData 的生命周期是短暂的,数据只在当前请求和下一次请求之间有效。一旦数据被读取,它就会被标记为已读,下一次请求时就会被清除。 ``` 2、用途 ```c# 主要用于在两个动作之间传递数据,例如在一个动作中设置 TempData,然后在重定向到另
94 5
|
3月前
|
XML 前端开发 定位技术
C#(NET Core3.1 MVC)生成站点地图(sitemap.xml)
C#(NET Core3.1 MVC)生成站点地图(sitemap.xml)
25 0
|
3月前
|
前端开发
.net core mvc获取IP地址和IP所在地(其实是百度的)
.net core mvc获取IP地址和IP所在地(其实是百度的)
121 0
|
3月前
|
开发框架 前端开发 .NET
ASP.NET CORE 3.1 MVC“指定的网络名不再可用\企图在不存在的网络连接上进行操作”的问题解决过程
ASP.NET CORE 3.1 MVC“指定的网络名不再可用\企图在不存在的网络连接上进行操作”的问题解决过程
38 0
|
8月前
|
存储 开发框架 前端开发
[回馈]ASP.NET Core MVC开发实战之商城系统(五)
经过一段时间的准备,新的一期【ASP.NET Core MVC开发实战之商城系统】已经开始,在之前的文章中,讲解了商城系统的整体功能设计,页面布局设计,环境搭建,系统配置,及首页【商品类型,banner条,友情链接,降价促销,新品爆款】,商品列表页面,商品详情等功能的开发,今天继续讲解购物车功能开发,仅供学习分享使用,如有不足之处,还请指正。
112 0
|
9月前
|
开发框架 前端开发 .NET
[回馈]ASP.NET Core MVC开发实战之商城系统(三)
[回馈]ASP.NET Core MVC开发实战之商城系统(三)
66 0
|
9月前
|
开发框架 前端开发 .NET
[回馈]ASP.NET Core MVC开发实战之商城系统(一)
[回馈]ASP.NET Core MVC开发实战之商城系统(一)
112 0