zoukankan      html  css  js  c++  java
  • 快速入门系列--MVC--06视图

        到了View的呈现板块,感觉ASP.NET MVC的学习也进入了尾声,还是比较开心的,毕竟也有了不小收获。这部分内容相对比较简单,因为之前还专门学习过如何结合HTML5与MVC框架。前文中提到过,ActionResult的执行实际就是View呈现的入口。不同类型的ActionResult比较多,以下做个简要的介绍。

    类型 简介
    EmptyResult 最简单的Result,只是为了符合框架的流程。
    ContentResult 可以设置ContentType为javascript, CSS等,默认将基本类型的返回值转化为ContentResult。
    FileResult 包含FileContentResult, FilePathResult, FileStreamResult
    JavascriptResult 在服务端动态生成javascript并作为请求的相应。
    JsonResult 提供对象和Json字符串的序列化与返序列化
    HttpStatusCodeResult 方便返回Http状态码
    RedirectResult RedirectToRouteResult 前者是我们可以直接重定向到指定的目标地址,后者帮助我们根据注册的路由进行重定向,不提供URL参数,而提供RouteName和RouteValues。类似httpResponse的Redirect/RedirectPermanent,在SEO中,前者会使永久重定向目的地址更新为搜索引擎的索引,后则不会。

        接下来介绍最重要的ViewResult以及VIewEngine的概念。View实现IView接口,其实就是一个Render方法,参数ViewContext除了常见属性外,还有两个与js相关属性(CleintValidationEnabled, UnobstrusiveJavascriptEnabled),特别的是object类型的ViewBag用了[Dynamic]特性。ViewEngine也实现了相应的接口,注意View缓存,SearchedLocations属性包含了所有的查找路径,FindView方法的的返回名称比较奇怪,ViewEngineResult,但实际的意思应该是这个Result包含View和ViewEngine信息。在另一篇管自定义ViewEngine的博文中对这一块进行了更加深入的介绍。

        再则简要的介绍下Razor引擎,我们知道.cshtml文件并不能直接执行,必须先动态编译后才能使用,那么问题来了,编译成什么文件的文件名是什么,所属的程序集为什么?并存放在哪呢?

    文件名为:ASP_Page_views_XXX_ActionXXX_cshtml

    程序集名由代码可知:

    1 public static MvcHtmlString ListViewAssemblies(this HtmlHelper helper)
    2 {
    3 TagBuilder ul = new TagBuilder("ul");
    4 foreach (var assembly in AppDomain.CurrentDomain.GetAssemblies().Where(a => a.FullName.StartsWith("App_Web_")))
    5 {
    6 //omit
    7 }
    8 return new MvcHtmlString(ul.ToString());
    9 }
    View Code

    编译的临时文件的路径为:

    "%WinDir%Microsoft.NETFramework{VersionNo}Temporary ASP.NET Files"

    可以通过如下配置,变更路径:

    1 <system.web>
    2 <compilation tempDirectory="C:XXXXXXXX"/>
    3 </system.web>
    View Code

    补充一个获得编译后类型和程序集的方法,使用BuilderManager类型的静态方法GetCompiledType和GetCompiledAssembly。

        View文件编译生成的类型为WebViewPage<TModel>,也就是说.cshtml编译后的类型均为以上类型。其基类WebPageExecutingBase包含Execute, Write, WriteLiteral等方法。该基类的另一个自雷WebPageRendingBase包含Layout, IsAjax, Server, Session, Profile, Cache等属性,以及输出整个页面的抽象方法ExecutePageHierarchy。

        WebViewPage还有一个直接基类WebPageBase,它实现类抽象方法ExecutePageHierarchy,最终呈现的页面包含3部分内容:布局文件、开始页面View本身。蒋老师提供的一个不错的布局例子代码如下所示:

     1 //布局文件定义
     2 <!DOCTYPE html>
     3 <html>
     4 <head>
     5 <title>@ViewBag.Title</title>
     6 </head>
     7 <body>
     8 @{if (IsSectionDefined("Header"))
     9 {RenderSection("Header");}
    10 else
    11 {<h2>@ViewBag.Title</h2>}
    12 @RenderBody()
    13 @{ if(IsSectionDefined("Footer")){
    14 @RenderSection("Footer");
    15 }
    16 else{<hr/><p>@2012 Xixi. All rights reserved.</p>}
    17 }}
    18 </body>
    19 </html>
    20 
    21 //View的定义
    22 <div>
    23 <p>Bilibili</p>
    24 </div>
    25 @section Header
    26 {<h2>Bili bili</h2>}
    View Code

        看到这个我才真正明白了以前在代码中的RenderBody是如何使用的,布局文件和View是如何结合的。

    细节:(可以考虑插入到原有的文章中,这样比较合理哈)

    Return View("NotIndex");命名视图

    Return View("~/Views/Example/Index.cshtml");

    简单请款下推荐使用Dynamic的ViewBag,复杂推荐强类型的ViewModel,在使用强类型时,为了方便,推荐将其加入配置文件中,如下所示。

    1 <pages pageBaseType="System.Web.Mvc.WebViewPage">
    2 <namespaces>
    3 <add namespace="Sory.Entertainment.WebAPI.Models"/>
    4 </namespaces>
    5 </pages>
    View Code

    此外,比较有意思的是,可以通过Install-Package XXX命令安装自己的程序集。

    视图模型部分推荐大家使用MVVM模式,尽可能的使数据扁平化,便于强类型的数据管理。

    在(设定好Model后)通过基架模板Scaffold template(T4模板)新建视图时,支持Empty、Create、Delete、Details、Edit、List等类型的视图。通过设置RefenceScriptLib添加JQuery(包括非侵入版)验证等相关js。

    Razor引擎简单介绍:

    通过"@"进行代码和标记的转换符,@@表示原有的@,@(表达式)

    表达式 值(只是示例,勿深究)
    @ProductList.Length 3
    @@ @,转义
    Item_@(item.length) Item_3
    @{ xxx } 代码块
    @{ Html.RenderPartial("SomePartial"); } 代码行
    @foreach(var item in items){<span>Item @item.Name</span>} 循环
    @if(showMessage){<text>xxx<text>} 判断
    @* ………………..*@ 注释,这个需要注意哦,不然可能会出错
    @(Html.SomeMethod<Type>) 泛型需要加括号

    所有后台数据的呈现默认使用HTML编码(这个html标记类型为System.Web.IHtmlString),如果遇到特殊字符,如<script>alert('hacked!')<alert>等情况,会编码为&lt;script&gt;….,如果需要原样输出,需要使用@Html.Raw(message)。这样就够了么?不然,在前端如果使用js处理后台数据时,为了防止跨站脚本攻击,还需要使用'@Ajax.JavaScriptStringEncode()'防止XSS攻击。

    布局,使用在Layout页面中使用@RenderBody可以为主体占位,也可以用的@RenderSection("Footer")为Footer占位,这时需要在页面中通过@section Footer{ html内容 }设置,否则会抛出异常,一个比较合理的例子如下。

    1 <footer>
    2 @if(IsSectionDefined("Footer")){RenderSection("Footer");}
    3 Else{<span>Default Footer</span>}
    4 </footer>
    View Code

    此外,还可以使用_ViewStart.cshtml页面设置布局页,它可以递归到相应的子目录中,它先于所有页面的渲染。

    最后一点是,可以通过部分视图的方式,来满足Ajax调用的需要,这个需要时html文件,而仅仅是json要注意。

    1 <script>
    2 $(function()){
    3 $('#partialView').Load('/home/partial');
    4 });
    5 </ script >
    View Code

    注:本文主要供自己学习,不妥之处望见谅。

    参考资料:

    [1]蒋金楠. ASP.NET MVC4框架揭秘[M]. 上海:电子工业出版社, 2012. 390-444

    [2](美)加洛韦. ASP.NET MVC 4高级编程(第4版)[M]. 北京:清华大学出版社, 2012.

  • 相关阅读:
    【转】Android Touch事件传递机制解析
    通过Selector来设置按钮enable/unable状态的样式
    Android中的selector
    Android单元测试
    Android Lint简介
    制作高仿QQ的聊天系统(下)—— Adapter & Activity
    EditText的监听器和自定义回车事件
    监听Listview的滚动状态,是否滚动到了顶部或底部
    制作高仿QQ的聊天系统(上)—— 布局文件 & 减少过度绘制
    数据更新后让ListView自动滚动到底部
  • 原文地址:https://www.cnblogs.com/xiong2ge/p/ASP_NET_MVC_View.html
Copyright © 2011-2022 走看看