您的位置:首页 > 编程语言 > ASP

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

2014-03-09 17:46 423 查看
原文:返璞归真 asp.net mvc (12) - asp.net mvc 4.0 新特性之移动特性[索引页]
[源码下载]

[align=center]返璞归真 asp.net mvc (12) - asp.net mvc 4.0 新特性之移动特性[/align]

作者: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
[源码下载]
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐