ASP.NET MVC 4 Mobile 介绍 - 技术翻译 - 开源中国社区
ASP.NET MVC 4 Mobile 介绍
【已翻译100%】
英文原文：
推荐于 5年前 (共 6 段, 翻译完成于 11-27)
参与翻译&(1人)&:
这篇文章我们将介绍&ASP.NET MVC 的移动特性。
现在开始。
Step 1:&创建 ASP.NET MVC 4 Web 应用项目
&翻译得不错哦！
&选择项目模板，然后选择 ASPX 或 Razor 作为视图引擎，这里选择 ASPX。
&翻译得不错哦！
Step 2:&选择项目模板，然后选择 ASPX 或 Razor 作为视图引擎，这里选择 ASPX。
Step 3:&然后编译并在不同设备上运行应用，你将注意到布局是交互的。
Step 4:&没法在不同的设备上进行测试，需要下载&
要获取完整的 Agent Switcher 支持的设备列表，进入 Tools -& Default User Agent -& User Agent Switcher -& Options
&翻译得不错哦！
点击 Options, 然后你将看到所有的选项
点击 Import 并粘贴下面的 xml 文件 URL 地址，然后点击 OK。
你将得到所有的 User Agent Switcher 列表，现在你可以在不同操作系统、设备和浏览器上测试了。
Step 5:&展开 Views 文件夹，如果你选择了 Razor 作为引擎你看到的是 .cshtml 文件，如果选择的是 ASPX ，看到的是 .aspx 文件。
上图是你选择 Razor 或者 ASPX 的区别。
&翻译得不错哦！
Step 6:&现在打开 Scripts 文件夹，你会发现 jquery.mobile-1.0.js 和 jquery.mobile-1.0.min.js.
所使用的 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 中指定
BundleConfig.cs is 代码大概如下：
&翻译得不错哦！
我们的翻译工作遵照 ，如果我们的工作有侵犯到您的权益，请及时联系我们
暂无网友评论巧用section在cshtml写入layout中写入head信息
layout文件中：
&meta charset="utf-8" /&
&title&@ViewBag.Title&/title&
&link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" /&
@RenderSection("head", false)
&cshtml模板文件中：
@section head
&script type="text/javascript""&
&& //Your java script here
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。I've created an MVC 4 using the default template, where @Script.Render(~"bundles/jquery") is called after @RenderBody().
post, this is the recommended execution order to prevent the loading of scripts to block the rendering of the page.
I want to add a small jQuery call in my view, or my RenderBody() section.
It looks like this, at the top of my view:
&script type="text/javascript"&
$(document).ready(function()
$("#eta_table").tablesorter({
headers: {
0: { sorter: false }
However, this will always throw the error Error: '$' is undefined because jQuery isn't loaded until after the RenderBody().
I can't imagine this is a new problem, it seems like a fairly common task...
Any suggestions on how this should be handled?
For reference, here is where the jQuery is loaded:
@Scripts.Render("~/bundles/jquery")
@RenderSection("scripts", required: false)
I ended up moving the script above into my scripts.js file, and loaded it in below jQuery in the layout page, like so:
bundles.Add(new ScriptBundle("~/bundles/custom").Include(
"~/Scripts/Custom/tablesorter.js",
"~/Scripts/Custom/scripts.js"));
And the HTML:
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/custom")
@RenderSection("scripts", required: false)
Except this still seems wrong, as now the scripts are going to have to load for every page that uses the master layout view.
It's working, but, is this the best way?
解决方案 Create a new section MyScripts below all other library scripts
@Scripts.Render("~/bundles/jquery")
@RenderSection("scripts", required: false)
@RenderSection("MyScripts", required: false)
@section MyScripts {
&script type="text/javascript"&
$("#eta_table");
Now your custom page scripts only get loaded once after jQuery is loaded.
本文地址： &
我使用的是默认模板，创建一个MVC 4，其中 @ Script.Render（?“包/ jQuery的”）在被称为@RenderBody（）。按照帖子，这是推荐执行，以prevent脚本的加载阻止的页面的呈现我想在我看来，增加一个小的jQuery呼叫，或者我的 RenderBody（）部分。它看起来像这样，在我的观点的顶部： ＆LT;脚本类型=“文/ JavaScript的”＆GT;$（文件）。就绪（函数（）{
$（“＃eta_table”）。的tablesorter（{
0：{选机：假}
然而，这将总是抛出错误错误：'$'未定义因为jQuery没有加载之后才 RenderBody（）。 我无法想象这是一个新的问题，这似乎是一个相当普遍的任务......在这个应该怎么处理有什么建议？有关参考，这里是jQuery的加载：
@ Scripts.Render（“?/包/ jQuery的”）
@RenderSection（“脚本”，必需：false）＆LT; /身体GT;
修改 我结束了移动上面的脚本到我scripts.js中的文件，并在布局页面加载它下面的jQuery，像这样：
bundles.Add（新ScriptBundle（“?/包/自定义”）。包括（
“?/脚本/自定义/ tablesorter.js”
“?/脚本/自定义/ scripts.js中”））; 和HTML：
@ Scripts.Render（“?/包/ jQuery的”）
@ Scripts.Render（“?/包/自定义”）
@RenderSection（“脚本”，必需：false）＆LT; /身体GT;
除了这似乎仍然错了，因为现在的脚本将不得不加载使用主布局视图每一页。它的工作，但是，这是最好的方法是什么？解决方案 以下的其他库脚本创建一个新的部分MyScripts
@ Scripts.Render（“?/包/ jQuery的”）@RenderSection（“脚本”，必需：false）@RenderSection（“MyScripts”，必需：false）
@section MyScripts {
＆LT;脚本类型=“文/ JavaScript的”＆GT;
$（“＃eta_table”）;
＆LT; / SCRIPT＆GT;} 现在的jQuery后，只得到一次加载自定义页面的脚本被加载。
本文地址： &
扫一扫关注官方微信版权所有，禁止匿名转载；禁止商业使用。
1.这里的&&@{Layout=&文件路径&;}&&代码块指定了整个项目默认所使用的布局文件（如图：）@RenderBody()对于所有的页面默认的情况下都会使用这个布局(WebForm的模板)@RenderBody()相当于一个占位符其他页面的所有内容都会被引擎渲染在这个地方。@RenderSecion()这个占位符表示：在这里会渲染页面里面的一个节（可以是html代码也可以是c#代码和Html的结合体）。&@RenderSection(&scripts&,&required:&false)做一个补充说明，第一个参数指明：在子页面被渲染的节的名称，第二个参数：指定子页面这个节是否是必需的，如果指定了required:但是在子页面没有给这个名称的节的话，编译是通不过的。&Razor语法的分类@using&：&引入命名空间@model&：声明强类型的数据model类型@section&：定义要实现母版页的节的信息@RenderBody（）：当创建基于页面的布局时，视图的内容会和布局页合并，而新创建的视图的内容会通过布局页面的@RenderBody方法呈现在标签之间。@RenderPage&：呈现一个页面。比如网页中固定的头部可以单独放在一个共享视图文件中，然后在布局也免中通过这个方法调用，例如&@RenderPage(&~/Views/Shared/_Header.cshtml&)&@RenderSection：布局页面还有节点（section）的概念，便于局部呈现1.行内(inline)C#(服务器端代码)形式（行内代码）@变量例如：@User.Name，变量或属性结束后，任何形式文本或者标签都自动被解析为html，如遇结束判断有歧义，请加括号如下@(&表达式&)&&例如：@(i&+&1)&或&@(User.Name)&&&&括号里面为：表达式，或者变量@方法调用&&例如：@Html.TextBox(&UserName&).ToString()2.&代码块第一种情况：@{&代码块&}@if&(条件)&{&代码块&}@switch&(条件)&{&分支匹配代码块&}@for&(循环控制)&{&代码块&}@foreach&(循环控制)&{&代码块&}@while&(循环控制)&{&代码块&}@do&{&代码块&}&while&(循环控制)&『&代码块里面的代码要严格按照c#语法来，每行结束必需有分号』第二种情况：(代码块中的文本或者Html客户端标签)单行文本@:行内文本&换行的话自动变成了C#服务器端代码。多行文本&任何标签对&例如：&div&多行文字&/div&任何自闭合标签&例如：&img&多行属性&/&纯文字使用伪标签&text&&例如：&text&多行文字，两侧标签不会被输出&/text&3.其他电子邮箱可以自动识别，例如：被误认为是电子邮箱的请加括号(),例如：123456(@UserName)要输出商标版权等的，请用@字符转义，例如：@@&→会输出单个字符@HtmlHelper和AjaxHelperHtml.BeginForm的两种写法：第一种使用Using语句:using(Html.BeginForm())
&}第二种使用代码块闭合的形式(注意form是代码块形式的不是行内代码：所以结尾必需有分号){Html.BeginForm();}&
{Html.EndForm();}Ajax.BeginForm()的写法只有一种：因为我并没有看到Ajax.EndForm()。呵呵估计是微软的开发团队开发Razor引擎的时候漏掉了using&(Ajax.BeginForm(new&AjaxOptions&{&UpdateTargetId=&&,OnSuccess=&&}))&
}这里要想Ajax的Form有效的话我们必须在view页面引入支持Ajax的Js脚本。如下：Scripts.Render(&~/bundles/jqueryval&)这个是微软的脚本捆绑技术，实际上捆绑的就是（以下的JS代码）不难看到其中就有ajax的Javascript脚本对于AjaxForm的提交参数的指定：当异步请求成功时，会去使用后端返回的内容局部更新UpdateTargetId所指定的客户端的html标签内容，然后调用OnSuccess指定的客户端的JS方法。具体参数说明可以参照MSDN：OnSuccess：对于Razor智能感知的一点补充在微软的cshtml页面，@后面跟一些对象的时候会自动出现智能感知&当我们自定义一个类，让后想让这个类在Razor引擎有只能感知能力的时候。我们可以找到Views/Web.config文件，打开文件我们会发现如下的节点：&system.web.webPages.razor&&&
&&&&host&factoryType=&System.Web.Mvc.MvcWebRazorHostFactory,&System.Web.Mvc,&Version=4.0.0.0,&Culture=neutral,&PublicKeyToken=31BF&&/&&&
&&&pages&pageBaseType=&System.Web.Mvc.WebViewPage&&&&
&&&&&&namespaces&&&
&&&&&&&&add&namespace=&System.Web.Mvc&&/&&&
&&&&&&&&add&namespace=&System.Web.Mvc.Ajax&&/&&&
&&&&&&&&add&namespace=&System.Web.Mvc.Html&&/&&&
&&&&&&&&add&namespace=&System.Web.Optimization&/&&&
&&&&&&&&add&namespace=&System.Web.Routing&&/&&&
&&&&&&/namespaces&&&
&&&&/pages&&&
&&/system.web.webPages.razor&我们只要把我们的类所在的命名空间添加进去就可以了。Razor的一些实用功能（极大的灵活性）Partial&Page&Output&Caching（部分页输出缓存）我们可以使用@Html.Action()来请求一个处理方法，并将放返回的Model或者ViewModel对象渲染到页面。通过使用OutputCache特性，我们实现了对对象的缓存。因此当发生重复请求时，就可以自动输出缓存信息避免频繁查询数据库，减轻服务器负担和提高响应速度
浙ICP备号-1