ASP.NET MVC 4 Mobile 介绍

红薯 发布于 2012/07/12 10:33
阅读 10K+
收藏 5

这篇文章我们将介绍 ASP.NET MVC 的移动特性。

你需要先 安装 ASP.NET MVC 4

现在开始。

Step 1: 创建 ASP.NET MVC 4 Web 应用项目

ASP.NET MVC 4 Mobile

Step 2: 选择项目模板,然后选择 ASPX 或 Razor 作为视图引擎,这里选择 ASPX。

Step 3: 然后编译并在不同设备上运行应用,你将注意到布局是交互的。

Step 4: 没法在不同的设备上进行测试,需要下载 FireFox User Agent Switcher

要获取完整的 Agent Switcher 支持的设备列表,进入 Tools -> Default User Agent -> User Agent Switcher -> Options

ASP.NET MV 4 Mobile User Agent Switcher

点击 Options, 然后你将看到所有的选项

FireFox Agent Switcher

点击 Import 并粘贴下面的 xml 文件 URL 地址,然后点击 OK。

http://techpatterns.com/downloads/firefox/useragentswitcher.xml

你将得到所有的 User Agent Switcher 列表,现在你可以在不同操作系统、设备和浏览器上测试了。

Step 5: 展开 Views 文件夹,如果你选择了 Razor 作为引擎你看到的是 .cshtml 文件,如果选择的是 ASPX ,看到的是 .aspx 文件。

ASP.NET MVC 4 - View Engine Mobile

上图是你选择 Razor 或者 ASPX 的区别。

Step 6: 现在打开 Scripts 文件夹,你会发现 jquery.mobile-1.0.js 和 jquery.mobile-1.0.min.js.

ASP.NET MVC 4 - jQuery Mobile

所使用的 jQuery Mobile 版本是 1.0,目前最新的是 1.0 ,你可自行下载并替换。

Step 7: 打开 _Layout.cshtml 或者 Site.master

<!DOCTYPE html>

<meta charset="utf-8" />

这里用的是 HTML5

下一项需要看的是

<meta name="viewport" content="width=device-width" />

这个节点的意思是让页面自适应屏幕宽度,你也可以设置实际宽度和高度和缩放级别。

初始的缩放级别应该是 1 .

<meta name="viewport" content="width=device-width, initial-scale=1"/>

Step 8: 现在继续看 _Layout.cshtml.

@Styles.Render("~/Content/mobileCss", "~/Content/css")
@Scripts.Render("~/bundles/modernizr")

@Scripts.Render("~/bundles/jquery", "~/bundles/jquerymobile")
@RenderSection("scripts", required: false)

And Site.Master will contain below lines.

<%: Styles.Render("~/Content/mobileCss", "~/Content/css") %>
<%: Scripts.Render("~/bundles/modernizr") %>

<%: Scripts.Render("~/bundles/jquery", "~/bundles/jquerymobile") %>

上面几行加载 css 和 js 文件,这些文件在 BundleConfig.cs 中指定

ASP.NET MVC 4 Mobile BundleConfig

BundleConfig.cs is 代码大概如下:

ASP.NET MVC 4 Structure

完。

英文原文OSCHINA原创翻译

加载中
0
笨蛋EGG
笨蛋EGG
4出了?!是什么版本?!正式版么?我现在有一个正在开发的项目还在用3,不知道怎么升级··
笨蛋EGG
笨蛋EGG
回复 @红薯 : 这个只是beta版本,没意思,不会用在项目上,不过看文中的链接,现在貌似是RC版本了····
红薯
红薯
http://www.oschina.net/news/26013/asp-net-mvc-4
junwong
junwong
打包VS的最新补丁试试
0
笨蛋EGG
笨蛋EGG
的确是RC了··马上装一个·····不过微软现在貌似还没出3to4的升级工具····
0
tonghuazhong
tonghuazhong
RC也差不多了,新的特性基本上都晒出来了
0
Midnight
Midnight

微软不是说了 4RC 可以用于生产吗?

反正我已经升级了, 没问题

0
笨蛋EGG
笨蛋EGG
我嘞个去·····磁盘空间不足,无法安装VS2010 SP1……公司的破电脑········
0
随智阔
随智阔

<%: Styles.Render("~/Content/mobileCss", "~/Content/css") %>
<%: Scripts.Render("~/bundles/modernizr") %>
<%: Scripts.Render("~/bundles/jquery", "~/bundles/jquerymobile") %>

是不是会把一些js或css打包加载到客户端?

0
随智阔
随智阔

引用来自“软件开发专家”的答案

<%: Styles.Render("~/Content/mobileCss", "~/Content/css") %>
<%: Scripts.Render("~/bundles/modernizr") %>
<%: Scripts.Render("~/bundles/jquery", "~/bundles/jquerymobile") %>

是不是会把一些js或css打包加载到客户端?

打包(Bundling)及压缩(Minification)指的是将多个js文件或css文件打包成单一文件并压缩的做法,如此可减少浏览器需下载多个文件案才能完成网页显示的延迟感,同时通过移除JS/CSS文件案中空白、批注及修改JavaScript内部函数、变量名称的压缩手法,能有效缩小文件案体积,提高传输效率,提供使用者更流畅的浏览体验。

在ASP.NET MVC 4中可以使用BundleTable捆绑多个css文件和js文件,以提高网络加载速度和页面解析速度。更为重要的是通过捆绑可以解决IE浏览器的31个CSS文件连接的限制。

返回顶部
顶部