• NancyFX 第六章 视图引擎


        正如其他的Web工具包,Nancy也有视图的概念,用来描述在浏览器上看到的输出

        视图的定义

        你可能没有之前没有接触过“视图”的概念,或是仅仅是从其他工具包例如ASP.NET MVC 中听说过。(其中MVC中“V”代表“View”)

        你是否想过视图到底是什么那?

        根据牛津字典的释义,视图时能够看到的东西,或是在特定情况下看到的东西。

        视图是终端用户在浏览器中看到的东西。根据定义浏览器中可以看到的输出都可以称之为视图。

        至于我们在次的定义的视图应该是一个动态的输出,也就是说不是静态的文件。(比如编辑好的HTML文件或是PDF文件)。实际中,输出的内容应该是混合了静态内容和生成数据的结合体。

        根据这个定义,使用模板页的传统Web应用(webForm)可以称之为视图,也许有人不同意。

       视图引擎

       简单来说,视图引擎就是根据源文件输出视图的动态库。

       回到我们对视图的定义,暂停一下,想想ASP.NET MVC中的视图引擎:Razor.

       有很多视图引擎供你选择,你可以选择适合你的。如果Razor(来自MVC)适合你,你可以在Nancy项目中采用Razor.还有其他的你也许会用到,NHaml,DotLiquid或 MarkDown.

       你可以轻易的采用这几种引擎,只需要通过NuGet安装下就好。剩下的就是定义视图引擎规定的模板文件。

       一般Nancy从Views文件夹中查找视图模板。当然这个也可以改变,之后的章节会在介绍ancy bootstrapper类时详细介绍。

       创建第一个视图

       让我们开始一个全新的Nancy项目,没有验证,没有MVC,不支持 Web Froms,也没有任何的初始文件。

       为了演示,我们采用Nancy的默认视图引擎SSVE(Super Simple View Engine)超级简单视图引擎。

       让我们增加一个简单的路由类:

    namespace nancybook.modules
    {
        public class BaseRoutes : NancyModule
        {
            public BaseRoutes()
            {
                Get[@"/"] = _ => View["firstView/hellonancy"];
             }
        }
    }

       这个路由定义了对 / 目录的请求都会返回 默认文件夹(Views)下的firstview目录中的hellonancy.<ext> 文件。

       在这里<ext> 代表文件的扩展名。

       视图引擎SSVE下,sshtml, .html, 以及 .htm 都是允许的。

       下面是视图模板的代码:

    <!DOCTYPE html>
    <html>
    <head>
    <title>Hello Nancy FX</title>
    </head>
    <body>
    <h1>Hello Nancy FX</h1>
    </body>
    </html>

    下面是解决方案浏览器中看到的样子:

        点击F5,运行项目,你会在浏览器中看到HTML页面展示“Hello Nancy FX”

        稍稍提下静态内容

        此时,你可能在线如何在试图中包含静态文件,比如图片,JS脚本或其他文件。Nancy一般都是用Content文件夹来放置文件,向下面这样是用:

    Response.AsFile("index.html", "text/html");

        那些没有文件夹前缀的都会在首先在Content目录下查找,然后再是这下面的子文件夹。

        当然这个约定也可以在自定义的bootstrapper 中进行修改(后面的章节会介绍)。

        再继续谈我们的视图

        你已经看到了,通过视图引擎仅仅返回静态的内容是非常简单的,但我们不能止步于此。正如我在本章开始时所定义,是用视图并不是为了返回一个页面,它需要把数据和页面进行组合,然后把这两者的融合产物进行输出。

        让我们添加一个类作为视图的数据模型,这个类的名字称为:FirstModel.cs

    using System;
    namespace nancybook
    {
        public class FirstModel
        { 
            public string Name { get; set; }
            public DateTime TimeOfRequest { get; set; }
        }
    }

       还是使用我们之前的路由,添加上面类的一个实例作为页面的数据源:

    using System;
    using Nancy;
    namespace nancybook.modules
    {
        public class BaseRoutes : NancyModule
        {
           public BaseRoutes()
           {
              FirstModel demoModel = new FirstModel
              {
                 Name = "Shawty",
                 TimeOfRequest = DateTime.Now
              };
              Get[@"/"] = _ => View["firstView/hellonancy", demoModel];
           }
         }
    }

        执行后你会发现,这和之前没啥区别,是应为还没对视图进行修改。既然你已经有了数据 demoModel,你需要使用当前视图引擎支持的规则来呈现数据。

        修改hellonancy.html 文件中的HTML代码:

    <!DOCTYPE html>
    <html>
    <head>
    <title>Hello Nancy FX</title>
    </head>
    <body>
    <h1>Hello @Model.Name</h1>
    <h2>The time is @Model.TimeOfRequest</h2>
    </body>
    </html>

        重新构造你的项目,再次执行,浏览器中就能看到不一样的呈现。

       SSVE是一个非常简单的引擎,但多数情况下还是很好用的。在处理的指令上可能不如其他引擎。

       但这不能抹煞它的实用性。

    例如,你可以使用@Each 来对集合进行循环。当使用@Each时,使用@Current 来引用当前的子项,使用@EndEach 来结束循环。

    <!DOCTYPE html>
    <html>
    <head>
    <title>Hello Nancy FX</title>37
    </head>
    <body>
    <!-- If we passed our data in as List<FirstModel> we could do the
    following -->
    @Each.Model
    <h1>Hello @Current.Name</h1>
    @EndEach
    </body>
    </html>

        正如你期望的,这个会展示集合对象中的一连串名字。

     

        总结

  • 相关阅读:
    laravel路由和MVC
    laravel目录介绍
    laravel下载安装
    Mac 程序员的十种武器
    Python中列表的copy方法
    Ubuntu 安装vim失败解决
    Linux userAdd 增加用户如果没有配置文件情况解决
    Ubuntu 软件管理
    awk工具详解
    httpsClient
  • 原文地址:https://www.cnblogs.com/lilunjia/p/6361360.html
Copyright © 2020-2023  润新知