前の記事では、Nancy と Nancy セルフホスティングの基本について説明しました。次に、ビュー エンジンの学習を始めましょう。
Nancy は現在、SSVE と Razor の 2 つのタイプをサポートしています。以下一緒に勉強していきましょう。
SSVE の正式名は Super Simple View Engine で、翻訳すると スーパー シンプル ビュー エンジン となります。
デフォルトで組み込まれているため、Nancy で個別に参照する必要はありません。このエンジンは、sshtml、html、または htm ファイルを処理します。
モデルは、標準タイプまたは ExpandoObject (または IDynamicMetaObjectProvider を実装するか、そのプロパティにアクセスするための IDictionary
SSVE は正規表現ベースのビュー エンジンであり、「実行コード」がないため、独自のコードを指定して実行することはできません。使用できる組み込みの構文/コマンドは次のとおりです。
パラメータの文字列表現、またはパラメータが指定されていない場合はモデル自体に置換されます。たとえば、無効なモデル プロパティを指定した場合など、置換が実行されません。 with [Err!]
Syntax
@Model[.Parameters]
Example
Hello @Model.Name, your age is @Model.User.Age
コレクションであるモデルを反復処理できるようにします
Syntax
@Each[.Parameters] [@Current[.Parameters]]@EndEach
@Each は暗黙的にモデルに関連付けられます。反復では、 @Current はコレクション内の現在の項目を表します。 @Current はイテレーター ブロック内で複数回使用でき、 @Model と同じ方法でアクセスできます。 (下記の暗黙的な条件文を参照)
Syntax:
@Each.Users Hello @Current.Name!@EndEach
@If[Not].Parameters [contents]@EndIf
暗黙的な条件文
モデルに ICollection を実装するプロパティがある場合は、暗黙的な条件文を使用できます。暗黙的な条件構文は通常の条件構文と同じですが、パラメーター部分に Has プレフィックスを付けることができます。コレクションに項目が含まれる場合は条件が true になり、含まれない場合、または null の場合は false になります。
@IfNot.HasUsers No users found!@EndIf
Has[CollectionPropertyName]
両方@Model および @Current キーワード (パラメーターの有無にかかわらず) には、 @ の後にオプションの ! 演算子を指定して、出力を HTML エンコードできます。
Partials
プロパティをレンダリングします。現在のモデルの を部分ビューのモデルとして使用するように指定することも、代わりに現在のビューのモデルを使用するために省略することもできます。構文
@If.HasUsers Users found!@EndIf
@!Model[.Parameter]@!Current[.Parameter]
マスター ページはビューの @Model にアクセスでき、ビューで使用するマスターの名前を指定するときのファイル拡張子はオプションです
@Section タグは複数回使用でき、両方の宣言に使用されます。
構文
@!Model.Test@Each @!Current.Test@EndEach
@Partial['<view name>'[, Model.Property]]
偽造防止トークンをページ上の非表示の入力にレンダリングします。クロスサイト リクエスト フォージェリ攻撃を防ぎます。新しいリクエストがサーバーに送信されると、トークンは自動的に検証されます (CSRF 保護がオフになっていないことが前提です)。
構文
// 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];
@Master['<name>']@Section['<name>']@EndSection
一般的に使用されるコマンドをいくつか示します。
1.モデル
2.それぞれ
3.If
5.マスターページとセクション
首先创建一个项目。建议创建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]; };在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>
然后我们访问页面 访问地址： 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]; };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>
访问地址： http://localhost:9000/ssve/each
3.If
Get["/if"] = r => { return View["if", new { HasModel = true }]; };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>
访问地址： http://localhost:9000/ssve/if
4.Partials
@Partial['header.html']
在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>
使用 master
@Master['master.html']@Section['Content']<p>master partial content 结合</p> @Model@EndSection
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 }]; }; } }}SSVE视图引擎源码：https://github.com/grumpydev/SuperSimpleViewEngine
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]; };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>
访问地址： 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]; };虽然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>访问地址： http://localhost:9000/razor/each
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]; }; } }}
因为我使用的项目是控制台程序，Views 文件夹下的文件必须都要在 属性 选择 始终复制 。
在linux上运行可以参考上篇文章。
最后留个坑，下一篇：Nancy 学习-进阶部分 继续跨平台。请大家多多支持。
参考链接：
https://github.com/NancyFx/Nancy/wiki/The-Super-Simple-View-Engine
如果你觉得本文对你有帮助，请点击“ 推荐 ”，谢谢。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
