Mobile enabled web apps with ASP.NET MVC 3
2011-10-30 14:19
441 查看
http://weblogs.asp.net/shijuvarghese/archive/2011/02/25/mobile-enabled-web-apps-with-asp-net-mvc-3-and-jquery-mobile.aspx
http://www.asp.net/mvc/tutorials/aspnet-mvc-4-mobile-features
http://www.asp.net/mobile
Let’s add a new area named Mobile to the ASP.NET MVC app. For adding Area, right click the ASP.NET MVC project and select Area from Add option. Our mobile specific pages using jQuery Mobile will be maintained in the Mobile Area.
ASP.NET MVC Global filter for redirecting mobile visitors to Mobile area
Let’s add an ASP.NET MVC Global filter for redirecting mobile visitors to Mobile area. The below Global filter is taken from the sample app http://aspnetmobilesamples.codeplex.com/ created by the ASP.NET team. The below filer will redirect the Mobile visitors to an ASP.NET MVC Area Mobile.
public class RedirectMobileDevicesToMobileAreaAttribute : AuthorizeAttribute[/b]
{[/b]
protected override bool AuthorizeCore(System.Web.HttpContextBase httpContext)[/b]
{[/b]
// Only redirect on the first request in a session[/b]
if (!httpContext.Session.IsNewSession)[/b]
return true;[/b]
[/b]
// Don't redirect non-mobile browsers[/b]
if (!httpContext.Request.Browser.IsMobileDevice)[/b]
return true;[/b]
[/b]
// Don't redirect requests for the Mobile area[/b]
if (Regex.IsMatch(httpContext.Request.Url.PathAndQuery, "/Mobile($|/)"))[/b]
return true;[/b]
[/b]
return false;[/b]
}[/b]
[/b]
protected override void HandleUnauthorizedRequest(AuthorizationContext filterContext)[/b]
{[/b]
var redirectionRouteValues = GetRedirectionRouteValues(filterContext.RequestContext);[/b]
filterContext.Result = new RedirectToRouteResult(redirectionRouteValues);[/b]
}[/b]
[/b]
// Override this method if you want to customize the controller/action/parameters to which[/b]
// mobile users would be redirected. This lets you redirect users to the mobile equivalent[/b]
// of whatever resource they originally requested.[/b]
protected virtual RouteValueDictionary GetRedirectionRouteValues(RequestContext requestContext)[/b]
{[/b]
return new RouteValueDictionary(new { area = "Mobile", controller = "Home", action = "Index" });[/b]
}[/b]
}[/b]
Let’s add the global filer RedirectMobileDevicesToMobileAreaAttribute to the global filter collection in the Application_Start() of Global.asax.cs file.
GlobalFilters.Filters.Add(new RedirectMobileDevicesToMobileAreaAttribute(), 1);[/b]
Now your mobile visitors will be redirect to the Mobile area. But the browser detection logic in the RedirectMobileDevicesToMobileAreaAttribute filter will not be working in some modern browsers and some conditions. But the good news is that ASP.NET’s browser detection feature is extensible and will be greatly working with the open source framework 51Degrees.mobi. 51Degrees.mobi is a Browser Capabilities Provider that will be working with ASP.NET’s Request.Browser and will provide more accurate and detailed information. For more details visit the documentation page at http://51degrees.codeplex.com/documentation.
Let’s add a reference to 51Degrees.mobi[/b] library using NuGet.
We can easily add the 51Degrees.mobi from NuGet and this will update the web.config for necessary configuartions.
PS:Update the below code in 51Degrees.mobi.config so that we will normal browse mobile page no default.aspx.
<redirect firstRequestOnly="true"
mobileHomePageUrl="/Mobile/Home[/b]"
timeout="20"
devicesFile="~/App_Data/Devices.dat"
mobilePagesRegex="/Mobile/">
</redirect>
Mobile Web App using jQuery Mobile Framework
jQuery Mobile Framework is built on top of jQuery that provides top-of-the-line JavaScript in a unified User Interface that works across the most-used smartphone web browsers and tablet form factors. It provides an easy way to develop user interfaces for mobile web apps. The current version of the framework is jQuery Mobile Alpha 3.
We need to include the following files to use jQuery Mobile.
The jQuery Mobile CSS file (jquery.mobile-1.0a3.min.css)
The jQuery library (jquery-1.6.2.min.js)
The jQuery Mobile library (jquery.mobile-1.0a3.min.js)
Let’s add the required jQuery files directly from jQuery CDN . You can download the files and host them on your own server.
jQuery Mobile page structure
The basic jQuery Mobile page structure is given below
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src=\'#\'" /Scripts/jquery-1.6.2.min.js")" type="text/javascript"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
<script src=\'#\'" //code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Page Title</h1>
</div>
<div data-role="content">
<p>Page content goes here.</p>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
</body>
</html>
The data- attributes are the new feature of HTML5 so that jQuery Mobile will be working on browsers that supporting HTML 5. You can get a detailed browser support details from http://jquerymobile.com/gbs/ . In the Head section we have included the Core jQuery javascript file and jQuery Mobile Library and the core CSS Library for the UI Element Styling. These jQuery files are minified versions and will improve the performance of page load on Mobile Devices.
The jQuery Mobile pages are identified with an element with the data-role="page" attribute inside the <body> tag.
<div data-role="page">
</div>
Within the "page" container, any valid HTML markup can be used, but for typical pages in jQuery Mobile, the immediate children of a "page" are div element with data-roles of "header", "content", and "footer".
<div data-role="page">
<div data-role="header">...</div>
<div data-role="content">...</div>
<div data-role="footer">...</div>
</div>
The div data-role="content" holds the main content of the HTML page and will be used for making user interaction elements. The div data-role="header" is header part of the page and div data-role="footer" is the footer part of the page.
Creating Mobile specific pages in the Mobile Area
Let’s create Layout page for our Mobile area
<!DOCTYPE html>[/b]
<html>[/b]
<head>[/b]
<meta name="viewport" content="width=device-width" />[/b]
<title>@ViewBag.Title</title>[/b]
<script src=\'#\'" /Scripts/jquery-1.6.2.min.js")" type="text/javascript"></script>[/b]
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />[/b]
<script src=\'#\'" //code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js" type="text/javascript"></script>[/b]
</head>[/b]
<body>[/b]
<div data-role="page">[/b]
<div data-role="header">[/b]
<h1>[/b]
Welcome to the Mobile Home Page</h1>[/b]
</div>[/b]
<div data-role="content">[/b]
@RenderBody()[/b]
</div>[/b]
<div data-role="footer">[/b]
<h4>[/b]
Page Footer</h4>[/b]
</div>[/b]
</div>[/b]
</body>[/b]
</html>[/b]
In the Layout page, I have given reference to jQuery Mobile JavaScript files and the CSS file.
Let’s add an Index view page
Index.chtml
@{[/b]
ViewBag.Title = "Index";[/b]
Layout = "~/Areas/Mobile/Views/Shared/ViewPage.cshtml";[/b]
}[/b]
<h2>Article Index</h2>[/b]
Manufacturer: <strong style=" color:#99CC33;">@Request.Browser.MobileDeviceManufacturer</strong><br />[/b]
Model:@Request.Browser.MobileDeviceModel<br />[/b]
Screen Width:@Request.Browser.ScreenPixelsWidth<br />[/b]
Screen Height:@Request.Browser.ScreenPixelsHeight<br />[/b]
@if (Request.Browser.IsMobileDevice == false)[/b]
{[/b]
<p>The requesting device isn't a mobile. The page must have been requested directly.</p>[/b]
<p>Try accessing the web site from a mobile device, or a mobile device emulator. A list of popular mobile emulators can be found [/b]
<a href="http://51degrees.mobi/Support/FAQs/MobileEmulators.aspx" title="Mobile Emulators">here</a></p>[/b]
}[/b]
The below screen shots show the pages rendered in pc browser:
The below screen shots show the pages rendered in mobile browser:
You can download the source code from http://www.kuaipan.cn/index.php?ac=file&oid=4876720616244127
Summary
We have created a single web app for desktop browsers and mobile browsers. If a user access the site from desktop browsers, users will get normal web pages and get mobile specific pages if users access from mobile browsers. If users are accessing the website from mobile devices, we will redirect to a ASP.NET MVC area Mobile. For redirecting to the Mobile area, we have used a Global filer for the redirection logic and used open source framework 51Degrees.mobi for the better support for mobile browser detection. In the Mobile area, we have created the pages using jQuery Mobile and users will get mobile friendly web pages. We can create great mobile web apps using ASP.NET MVC and jQuery Mobile Framework.
http://www.asp.net/mvc/tutorials/aspnet-mvc-4-mobile-features
http://www.asp.net/mobile
Let’s add a new area named Mobile to the ASP.NET MVC app. For adding Area, right click the ASP.NET MVC project and select Area from Add option. Our mobile specific pages using jQuery Mobile will be maintained in the Mobile Area.
ASP.NET MVC Global filter for redirecting mobile visitors to Mobile area
Let’s add an ASP.NET MVC Global filter for redirecting mobile visitors to Mobile area. The below Global filter is taken from the sample app http://aspnetmobilesamples.codeplex.com/ created by the ASP.NET team. The below filer will redirect the Mobile visitors to an ASP.NET MVC Area Mobile.
public class RedirectMobileDevicesToMobileAreaAttribute : AuthorizeAttribute[/b]
{[/b]
protected override bool AuthorizeCore(System.Web.HttpContextBase httpContext)[/b]
{[/b]
// Only redirect on the first request in a session[/b]
if (!httpContext.Session.IsNewSession)[/b]
return true;[/b]
[/b]
// Don't redirect non-mobile browsers[/b]
if (!httpContext.Request.Browser.IsMobileDevice)[/b]
return true;[/b]
[/b]
// Don't redirect requests for the Mobile area[/b]
if (Regex.IsMatch(httpContext.Request.Url.PathAndQuery, "/Mobile($|/)"))[/b]
return true;[/b]
[/b]
return false;[/b]
}[/b]
[/b]
protected override void HandleUnauthorizedRequest(AuthorizationContext filterContext)[/b]
{[/b]
var redirectionRouteValues = GetRedirectionRouteValues(filterContext.RequestContext);[/b]
filterContext.Result = new RedirectToRouteResult(redirectionRouteValues);[/b]
}[/b]
[/b]
// Override this method if you want to customize the controller/action/parameters to which[/b]
// mobile users would be redirected. This lets you redirect users to the mobile equivalent[/b]
// of whatever resource they originally requested.[/b]
protected virtual RouteValueDictionary GetRedirectionRouteValues(RequestContext requestContext)[/b]
{[/b]
return new RouteValueDictionary(new { area = "Mobile", controller = "Home", action = "Index" });[/b]
}[/b]
}[/b]
Let’s add the global filer RedirectMobileDevicesToMobileAreaAttribute to the global filter collection in the Application_Start() of Global.asax.cs file.
GlobalFilters.Filters.Add(new RedirectMobileDevicesToMobileAreaAttribute(), 1);[/b]
Now your mobile visitors will be redirect to the Mobile area. But the browser detection logic in the RedirectMobileDevicesToMobileAreaAttribute filter will not be working in some modern browsers and some conditions. But the good news is that ASP.NET’s browser detection feature is extensible and will be greatly working with the open source framework 51Degrees.mobi. 51Degrees.mobi is a Browser Capabilities Provider that will be working with ASP.NET’s Request.Browser and will provide more accurate and detailed information. For more details visit the documentation page at http://51degrees.codeplex.com/documentation.
Let’s add a reference to 51Degrees.mobi[/b] library using NuGet.
We can easily add the 51Degrees.mobi from NuGet and this will update the web.config for necessary configuartions.
PS:Update the below code in 51Degrees.mobi.config so that we will normal browse mobile page no default.aspx.
<redirect firstRequestOnly="true"
mobileHomePageUrl="/Mobile/Home[/b]"
timeout="20"
devicesFile="~/App_Data/Devices.dat"
mobilePagesRegex="/Mobile/">
</redirect>
Mobile Web App using jQuery Mobile Framework
jQuery Mobile Framework is built on top of jQuery that provides top-of-the-line JavaScript in a unified User Interface that works across the most-used smartphone web browsers and tablet form factors. It provides an easy way to develop user interfaces for mobile web apps. The current version of the framework is jQuery Mobile Alpha 3.
We need to include the following files to use jQuery Mobile.
The jQuery Mobile CSS file (jquery.mobile-1.0a3.min.css)
The jQuery library (jquery-1.6.2.min.js)
The jQuery Mobile library (jquery.mobile-1.0a3.min.js)
Let’s add the required jQuery files directly from jQuery CDN . You can download the files and host them on your own server.
jQuery Mobile page structure
The basic jQuery Mobile page structure is given below
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src=\'#\'" /Scripts/jquery-1.6.2.min.js")" type="text/javascript"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
<script src=\'#\'" //code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Page Title</h1>
</div>
<div data-role="content">
<p>Page content goes here.</p>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
</body>
</html>
The data- attributes are the new feature of HTML5 so that jQuery Mobile will be working on browsers that supporting HTML 5. You can get a detailed browser support details from http://jquerymobile.com/gbs/ . In the Head section we have included the Core jQuery javascript file and jQuery Mobile Library and the core CSS Library for the UI Element Styling. These jQuery files are minified versions and will improve the performance of page load on Mobile Devices.
The jQuery Mobile pages are identified with an element with the data-role="page" attribute inside the <body> tag.
<div data-role="page">
</div>
Within the "page" container, any valid HTML markup can be used, but for typical pages in jQuery Mobile, the immediate children of a "page" are div element with data-roles of "header", "content", and "footer".
<div data-role="page">
<div data-role="header">...</div>
<div data-role="content">...</div>
<div data-role="footer">...</div>
</div>
The div data-role="content" holds the main content of the HTML page and will be used for making user interaction elements. The div data-role="header" is header part of the page and div data-role="footer" is the footer part of the page.
Creating Mobile specific pages in the Mobile Area
Let’s create Layout page for our Mobile area
<!DOCTYPE html>[/b]
<html>[/b]
<head>[/b]
<meta name="viewport" content="width=device-width" />[/b]
<title>@ViewBag.Title</title>[/b]
<script src=\'#\'" /Scripts/jquery-1.6.2.min.js")" type="text/javascript"></script>[/b]
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />[/b]
<script src=\'#\'" //code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js" type="text/javascript"></script>[/b]
</head>[/b]
<body>[/b]
<div data-role="page">[/b]
<div data-role="header">[/b]
<h1>[/b]
Welcome to the Mobile Home Page</h1>[/b]
</div>[/b]
<div data-role="content">[/b]
@RenderBody()[/b]
</div>[/b]
<div data-role="footer">[/b]
<h4>[/b]
Page Footer</h4>[/b]
</div>[/b]
</div>[/b]
</body>[/b]
</html>[/b]
In the Layout page, I have given reference to jQuery Mobile JavaScript files and the CSS file.
Let’s add an Index view page
Index.chtml
@{[/b]
ViewBag.Title = "Index";[/b]
Layout = "~/Areas/Mobile/Views/Shared/ViewPage.cshtml";[/b]
}[/b]
<h2>Article Index</h2>[/b]
Manufacturer: <strong style=" color:#99CC33;">@Request.Browser.MobileDeviceManufacturer</strong><br />[/b]
Model:@Request.Browser.MobileDeviceModel<br />[/b]
Screen Width:@Request.Browser.ScreenPixelsWidth<br />[/b]
Screen Height:@Request.Browser.ScreenPixelsHeight<br />[/b]
@if (Request.Browser.IsMobileDevice == false)[/b]
{[/b]
<p>The requesting device isn't a mobile. The page must have been requested directly.</p>[/b]
<p>Try accessing the web site from a mobile device, or a mobile device emulator. A list of popular mobile emulators can be found [/b]
<a href="http://51degrees.mobi/Support/FAQs/MobileEmulators.aspx" title="Mobile Emulators">here</a></p>[/b]
}[/b]
The below screen shots show the pages rendered in pc browser:
The below screen shots show the pages rendered in mobile browser:
You can download the source code from http://www.kuaipan.cn/index.php?ac=file&oid=4876720616244127
Summary
We have created a single web app for desktop browsers and mobile browsers. If a user access the site from desktop browsers, users will get normal web pages and get mobile specific pages if users access from mobile browsers. If users are accessing the website from mobile devices, we will redirect to a ASP.NET MVC area Mobile. For redirecting to the Mobile area, we have used a Global filer for the redirection logic and used open source framework 51Degrees.mobi for the better support for mobile browser detection. In the Mobile area, we have created the pages using jQuery Mobile and users will get mobile friendly web pages. We can create great mobile web apps using ASP.NET MVC and jQuery Mobile Framework.
相关文章推荐
- ASP.NET MVC with Entity Framework and CSS一书翻译系列文章之第一章:创建基本的MVC Web站点
- Creating a Clean, Minimal-Footprint ASP.NET WebAPI Project with VS 2012 and ASP.NET MVC 4
- EF Database First with ASP.NET MVC: Creating the Web Application and Data Models开发遇到问题的解决办法
- Better, Faster, Easier SSL testing for ASP.NET MVC & WebForms
- Web Services: Building Reusable Web Components with SOAP and ASP.NET(English)
- ASP.NET MVC with Entity Framework and CSS一书翻译系列文章之第六章:管理产品图片——多对多关系(上篇)
- [原创]ASP.NET MVC调用Delphi开发的Web报表打印activex组件
- [转]Using the HTML5 and jQuery UI Datepicker Popup Calendar with ASP.NET MVC - Part 4
- Writing ASP.NET Web Forms with C#
- Asp.net Mvc 未能加载类型“System.Web.Mvc.ViewPage 的解決方法
- (asp.net MVC学习)System.Web.Mvc.HtmlHelper学习及使用
- ASP.NET MVC 4 Web 编程-Chap02 ASP.NET Web Form 开发人员必读
- Working with Roles in ASP.NET MVC 4+
- 使用 ASP.NET MVC 和 Ext JS 构建以数据为中心的 Web 应用程序
- ASP.NET MVC - The view must derive from WebViewPage, or WebViewPage<TModel>
- 如何让asp.net mvc 直接运行mobile页面
- ASP.NET MVC 从零开始 - Web.config
- ASP.NET MVC 5 Web编程5 -- 页面传值的方式
- (asp.net MVC学习)System.Web.Mvc.HtmlHelper学习及使用
- Asp.net MVC SignalR来做实时Web聊天实例代码