Inhaltsverzeichnis
The Super Simple View Engine
Standard variable substitution
Iterators
Conditionals
Implicit Conditionals
HTML Encoding
Partials
Master pages and sections
Anti-forgery token
Path expansion
SSVEModule.cs
Razor View Engine
安装
使用
RazorModule.cs
项目结构
Heim Web-Frontend HTML-Tutorial Nancy 学习-视图引擎 继续跨平台_html/css_WEB-ITnose

Nancy 学习-视图引擎 继续跨平台_html/css_WEB-ITnose

Jun 24, 2016 am 11:28 AM

前面一篇,讲解Nancy的基础,以及Nancy自宿主,现在开始学习视图引擎。

Nancy 目前支持两种 一个是SSVE 一个是Razor。下面我们一起学习。

The Super Simple View Engine

SSVE 全称就是 Super Simple View Engine ,翻译过来也就是 超级简单视图引擎

我们在Nancy 不需单独引用,因为它是默认内置的。该引擎处理任何sshtml,html或htm文件 。

模型可以是标准的类型,或ExpandoObject(或者实现 IDynamicMetaObjectProvider ,或者实现的IDictionary 以访问其属性)。

SSVE是一个基于正则表达式的视图引擎,没有“执行代码”,所以你不能指定自己的代码来执行。内置的语法/命令,你可以使用如下所示。

Standard variable substitution

Replaces with the string representation of the parameter, or the model itself if a parameter is not specified. If the substitution can not be performed, for instance if you specify an invalid model property, it will be substituted with [Err!]

Syntax

@Model[.Parameters]
Nach dem Login kopieren

Example

Hello @Model.Name, your age is @Model.User.Age
Nach dem Login kopieren

Iterators

Enables you to iterate over models that are collection. Iterators cannot be nested

Syntax

@Each[.Parameters]   [@Current[.Parameters]]@EndEach
Nach dem Login kopieren

@Each will implicitly be associated with the model and for each iteration the @Current will represent the current item in the collection. @Current can be used multiple times in the iterator block, and is accessed in the same way as @Model .

Example

@Each.Users   Hello @Current.Name!@EndEach
Nach dem Login kopieren

Conditionals

Parameters must be a boolean (see Implicit Conditionals below). Nesting of @If and @IfNot statements is not supported.

Syntax:

@If[Not].Parameters   [contents]@EndIf
Nach dem Login kopieren

Example

@IfNot.HasUsers   No users found!@EndIf
Nach dem Login kopieren

Implicit Conditionals

If the model has property that implements ICollection then you can use an implicit conditional. The implicit conditional syntax is the same as a normal conditional, but the Parameters part can have a Has -prefix. The conditional will be true if the collection contains items, and false if it does not or if it is null.

Syntax

Has[CollectionPropertyName]
Nach dem Login kopieren

Example

@If.HasUsers   Users found!@EndIf
Nach dem Login kopieren

The above example will expand to "Users found!" if the model has a collection called Users and it contains items; if the collection is empty then the text would not be displayed.

HTML Encoding

Both the @Model and @Current keywords (with or without parameters) can have an optional ! operator, after the @ , to HTML encode the output.

Syntax

@!Model[.Parameter]@!Current[.Parameter]
Nach dem Login kopieren

Example

@!Model.Test@Each   @!Current.Test@EndEach
Nach dem Login kopieren

Partials

Renders a partial view. A property of the current model can be specified to be used as the partial view's model, or it may be omitted to use the current view's model instead. The file extension of the view is optional.

Syntax

@Partial['<view name>'[, Model.Property]]
Nach dem Login kopieren

Example

// Renders the partial view with the same model as the parent@Partial['subview.sshtml'];// Renders the partial view using the User as the model@Partial['subview.sshtml', Model.User];
Nach dem Login kopieren

Master pages and sections

You can put shared layout in a master page and declare content sections that will be populated by the views. It is possible to have nested master pages and you are not obligated to provide content for all of the content sections.

The master pages will have access to the @Model of the view and the file extension is optional when specifying the name of the master to use in your view.

You can use the @Section tag multiple times and is used to both declare a content section, in a master page, and to define the content blocks of a view.

Syntax

@Master['<name>']@Section['<name>']@EndSection
Nach dem Login kopieren

Example

// master.sshtml<html><body>@Section['Content'];</body></html>// index.sshtml@Master['master.sshtml']@Section['Content']   This is content on the index page@EndSection
Nach dem Login kopieren

Anti-forgery token

Renders an anti-forgery token, on the page, in an hidden input to prevent cross-site request forgery attacks. The token will automatically be validated when a new request is posted to the server (assuming CSRF protection hasn’t been turned off).

Syntax

@AntiForgeryToken
Nach dem Login kopieren
Nach dem Login kopieren

Example

@AntiForgeryToken
Nach dem Login kopieren
Nach dem Login kopieren

Path expansion

Expands a relative paths to a fully qualified URL.

Syntax

@Path['<relative-path>']
Nach dem Login kopieren

Example

@Path['~/relative/url/image.png']
Nach dem Login kopieren

Starting from v1.2, SSVE performs automatic path expansion in all HTML attributes (more specifically, in all name="value" pairs, both with single and double quotes around value ) where attribute value starts with ~/ . For example, can be significantly shortened to .

下面来讲解一些常用的命令。

1.Model

2.Each

3.If

4.Partials

5.Master pages and sections

首先创建一个项目。建议创建web空项目 。

我是直接使用上次的项目 http://www.cnblogs.com/linezero/p/5121887.html

先创建一个Module SSVEModule

然后添加Views文件夹 -》然后再在其下添加 SSVE文件夹 -》添加对应的View 页。

这样使项目更加清楚。

1.Model

            Get["/model"] = r =>            {                var model = "我是字符串";                return View["model", model];            };
Nach dem Login kopieren

在SSVE 文件夹下添加一个model.html

<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>    <meta charset="utf-8" />    <title></title></head><body>    @Model</body></html>
Nach dem Login kopieren

然后我们访问页面 访问地址: http://localhost:9000/ssve/model

2.Each

            Get["/each"] = r =>            {                var arr = new int[] { 3, 6, 9, 12, 15, 12, 9, 6, 3 };                return View["each", arr];            };
Nach dem Login kopieren
Nach dem Login kopieren

each.html

<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>    <meta charset="utf-8" />    <title></title></head><body>    @Each        <p>@Current</p>    @EndEach</body></html>
Nach dem Login kopieren

访问地址: http://localhost:9000/ssve/each

3.If

            Get["/if"] = r =>            {                return View["if", new { HasModel = true }];            };
Nach dem Login kopieren

if.html

<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>    <meta charset="utf-8" />    <title></title></head><body>    @If.HasModel    <p>我出现了</p>    @EndIf    @IfNot.HasModel    <p>我没办法出现</p>    @EndIf</body></html>
Nach dem Login kopieren

访问地址: http://localhost:9000/ssve/if

4.Partials

    @Partial['header.html']
Nach dem Login kopieren

在SSVE 下添加header.html 然后在页面添加这句即可。

5.Master pages and sections

master.html

<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>    <meta charset="utf-8" />    <title></title></head><body>    @Partial['header.html']    @Section['Content']</body></html>
Nach dem Login kopieren

使用 master

@Master['master.html']@Section['Content']<p>master partial content 结合</p>    @Model@EndSection
Nach dem Login kopieren

SSVEModule.cs

using Nancy;using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threading.Tasks;namespace NancyDemo{    public class SSVEModule : NancyModule    {        public SSVEModule():base("/ssve")         {            Get["/"] = r =>            {                var os = System.Environment.OSVersion;                return "Hello SSVE
System:" + os.VersionString; }; Get["/model"] = r => { var model = "我是字符串"; return View["model", model]; }; Get["/each"] = r => { var arr = new int[] { 3, 6, 9, 12, 15, 12, 9, 6, 3 }; return View["each", arr]; }; Get["/if"] = r => { return View["if", new { HasModel = true }]; }; } }}
Nach dem Login kopieren

SSVE视图引擎源码:https://github.com/grumpydev/SuperSimpleViewEngine

Razor View Engine

Razor 相信大家都是非常熟悉,所以也就不在这里过多做语法讲解。

主要是讲解在Nancy中使用Razor 视图引擎。

Nancy 的Razor 是自定义实现的,所以与ASP.NET MVC 中的Razor 有所不同。

在Nancy中绑定模型是@Model 不是ASP.NET MVC @model

安装

要在Nancy中使用Razor 需要安装 Nancy.ViewEngines.Razor

Nuget:Install-Package Nancy.Viewengines.Razor

添加Razor以后,会默认在app.config 添加Razor相关配置。

使用

建议大家新建一个空的web项目,这样便于编写视图。

在视图中声明 关键字为: @inherits

@inherits Nancy.ViewEngines.Razor.NancyRazorViewBase

其他语法与ASP.NET MVC Razor相同。

我还是在原项目上进行添加。

先创建一个Module RazorModule

然后添加Views文件夹 -》然后再在其下添加 Razor文件夹 -》添加对应的View 页。以 cshtml结尾的文件,也就是视图文件。

1.Model

            Get["/index"] = r =>            {                var model = "我是 Razor 引擎";                return View["index",model];            };
Nach dem Login kopieren

index.cshtml

@inherits Nancy.ViewEngines.Razor.NancyRazorViewBase<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>    <meta charset="utf-8" />    <title></title></head><body>    @Model</body></html>
Nach dem Login kopieren

访问地址: http://localhost:9000/razor/index

2.each

            Get["/each"] = r =>            {                var arr = new int[] { 3, 6, 9, 12, 15, 12, 9, 6, 3 };                return View["each", arr];            };
Nach dem Login kopieren
Nach dem Login kopieren

虽然Module中的代码与前面相同。但View 就不一样了。

each.cshtml

@inherits Nancy.ViewEngines.Razor.NancyRazorViewBase<dynamic><!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>    <meta charset="utf-8" />    <title></title></head><body>    @foreach (var item in Model)    {        <p>@item</p>    }</body></html>
Nach dem Login kopieren

访问地址: http://localhost:9000/razor/each

RazorModule.cs

using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threading.Tasks;using Nancy;namespace NancyDemo{    public class RazorModule:NancyModule    {        public RazorModule() :base("/razor")        {            Get["/"] = r =>            {                var os = System.Environment.OSVersion;                return "Hello Razor
System:" + os.VersionString; }; Get["/index"] = r => { var model = "我是 Razor 引擎"; return View["index",model]; }; Get["/each"] = r => { var arr = new int[] { 3, 6, 9, 12, 15, 12, 9, 6, 3 }; return View["each", arr]; }; } }}
Nach dem Login kopieren

项目结构

因为我使用的项目是控制台程序,Views 文件夹下的文件必须都要在 属性 选择  始终复制

在linux上运行可以参考上篇文章。

最后留个坑,下一篇:Nancy 学习-进阶部分 继续跨平台。请大家多多支持。

参考链接:

https://github.com/NancyFx/Nancy/wiki/The-Super-Simple-View-Engine

如果你觉得本文对你有帮助,请点击“ 推荐 ”,谢谢。

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Chat -Befehle und wie man sie benutzt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Was ist der Zweck des & lt; Fortschritts & gt; Element? Was ist der Zweck des & lt; Fortschritts & gt; Element? Mar 21, 2025 pm 12:34 PM

Der Artikel erörtert den HTML & lt; Progress & gt; Element, Absicht, Styling und Unterschiede vom & lt; Meter & gt; Element. Das Hauptaugenmerk liegt auf der Verwendung & lt; Fortschritt & gt; Für Aufgabenabschluss und & lt; Meter & gt; für stati

Was ist der Zweck des & lt; datalist & gt; Element? Was ist der Zweck des & lt; datalist & gt; Element? Mar 21, 2025 pm 12:33 PM

Der Artikel erörtert den HTML & lt; Datalist & gt; Element, das die Formulare verbessert, indem automatische Vorschläge bereitgestellt, die Benutzererfahrung verbessert und Fehler reduziert werden.Character Count: 159

Was sind die besten Praktiken für die Kompatibilität des Cross-Browsers in HTML5? Was sind die besten Praktiken für die Kompatibilität des Cross-Browsers in HTML5? Mar 17, 2025 pm 12:20 PM

In Artikel werden Best Practices zur Gewährleistung der HTML5-Cross-Browser-Kompatibilität erörtert und sich auf die Erkennung von Merkmalen, die progressive Verbesserung und die Testmethoden konzentriert.

Was ist der Zweck des & lt; Meter & gt; Element? Was ist der Zweck des & lt; Meter & gt; Element? Mar 21, 2025 pm 12:35 PM

Der Artikel erörtert das HTML & lt; Meter & gt; Element, verwendet zur Anzeige von Skalar- oder Bruchwerten innerhalb eines Bereichs und seine gemeinsamen Anwendungen in der Webentwicklung. Es differenziert & lt; Meter & gt; von & lt; Fortschritt & gt; und Ex

Wie verwende ich HTML5 -Formularvalidierungsattribute, um die Benutzereingabe zu validieren? Wie verwende ich HTML5 -Formularvalidierungsattribute, um die Benutzereingabe zu validieren? Mar 17, 2025 pm 12:27 PM

In dem Artikel werden unter Verwendung von HTML5 -Formularvalidierungsattributen wie Erforderlich, Muster, Min, MAX und Längengrenzen erörtert, um die Benutzereingabe direkt im Browser zu validieren.

Was ist das Ansichtsfenster -Meta -Tag? Warum ist es wichtig für reaktionsschnelles Design? Was ist das Ansichtsfenster -Meta -Tag? Warum ist es wichtig für reaktionsschnelles Design? Mar 20, 2025 pm 05:56 PM

In dem Artikel wird das Ansichtsfenster -Meta -Tag erörtert, das für das reaktionsschnelle Webdesign auf mobilen Geräten unerlässlich ist. Es wird erläutert, wie die ordnungsgemäße Verwendung eine optimale Skalierung von Inhalten und Benutzerinteraktion gewährleistet, während Missbrauch zu Design- und Zugänglichkeitsproblemen führen kann.

Was ist der Zweck des & lt; iframe & gt; Etikett? Was sind die Sicherheitsüberlegungen bei der Verwendung? Was ist der Zweck des & lt; iframe & gt; Etikett? Was sind die Sicherheitsüberlegungen bei der Verwendung? Mar 20, 2025 pm 06:05 PM

Der Artikel erörtert das & lt; iframe & gt; Der Zweck von Tag, externe Inhalte in Webseiten, seine gemeinsamen Verwendungen, Sicherheitsrisiken und Alternativen wie Objekt -Tags und APIs einzubetten.

Ist HTML für Anfänger leicht zu lernen? Ist HTML für Anfänger leicht zu lernen? Apr 07, 2025 am 12:11 AM

HTML ist für Anfänger geeignet, da es einfach und leicht zu lernen ist und schnell Ergebnisse sehen kann. 1) Die Lernkurve von HTML ist glatt und leicht zu beginnen. 2) Beherrschen Sie einfach die grundlegenden Tags, um Webseiten zu erstellen. 3) hohe Flexibilität und kann in Kombination mit CSS und JavaScript verwendet werden. 4) Reiche Lernressourcen und moderne Tools unterstützen den Lernprozess.

See all articles