コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > Nancy Learning-View エンジン継続 Cross-Platform_html/css_WEB-ITnose

Nancy Learning-View エンジン継続 Cross-Platform_html/css_WEB-ITnose

WBOY
リリース： 2016-06-24 11:28:08
オリジナル
1546 人が閲覧しました

前の記事では、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
ログイン後にコピー

Iterators

コレクションであるモデルを反復処理できるようにします

Syntax

@Each[.Parameters]   [@Current[.Parameters]]@EndEach
ログイン後にコピー

@Each は暗黙的にモデルに関連付けられます。反復では、 @Current はコレクション内の現在の項目を表します。 @Current はイテレーター ブロック内で複数回使用でき、 @Model と同じ方法でアクセスできます。 (下記の暗黙的な条件文を参照)

Syntax:

@Each.Users   Hello @Current.Name!@EndEach
ログイン後にコピー

Example

@If[Not].Parameters   [contents]@EndIf
ログイン後にコピー

暗黙的な条件文

モデルに ICollection を実装するプロパティがある場合は、暗黙的な条件文を使用できます。暗黙的な条件構文は通常の条件構文と同じですが、パラメーター部分に Has プレフィックスを付けることができます。コレクションに項目が含まれる場合は条件が true になり、含まれない場合、または null の場合は false になります。 

@IfNot.HasUsers   No users found!@EndIf
ログイン後にコピー

Example

Has[CollectionPropertyName]
ログイン後にコピー

モデルに Users というコレクションがあり、そのコレクションが空の場合、テキストは表示されません

HTML エンコーディング

両方@Model および @Current キーワード (パラメーターの有無にかかわらず) には、 @ の後にオプションの ! 演算子を指定して、出力を HTML エンコードできます。

Partials

プロパティをレンダリングします。現在のモデルの を部分ビューのモデルとして使用するように指定することも、代わりに現在のビューのモデルを使用するために省略することもできます。

構文

@If.HasUsers   Users found!@EndIf
ログイン後にコピー

Example

@!Model[.Parameter]@!Current[.Parameter]
ログイン後にコピー

マスター ページマスター ページに共有レイアウトを配置し、ビューによって設定されるコンテンツ セクションを宣言できます。マスター ページをネストすることができ、すべてのコンテンツ セクションにコンテンツを提供する義務はありません。

マスター ページはビューの @Model にアクセスでき、ビューで使用するマスターの名前を指定するときのファイル拡張子はオプションです

@Section タグは複数回使用でき、両方の宣言に使用されます。

構文

@!Model.Test@Each   @!Current.Test@EndEach
ログイン後にコピー

Example

@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
ログイン後にコピー

v1.2 以降、SSVE は、属性値が ~/ で始まるすべての HTML 属性 (より具体的には、 value を一重引用符と二重引用符で囲んだすべての name="value" ペア) で自動パス拡張を実行します。たとえば、 は に短縮できます。

一般的に使用されるコマンドをいくつか示します。

1.モデル

2.それぞれ

3.If

4.部分

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
ログイン後にコピー

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 }];            };        }    }}
ログイン後にコピー

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];            };
ログイン後にコピー

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

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];            };        }    }}
ログイン後にコピー

项目结构

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

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

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

参考链接：

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

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

関連ラベル：
Nancy 学习-视图引擎 继续跨平台
ソース：php.cn
前の記事：ちょっとしたヒント: 視差スクロール効果を実現するための純粋な CSS_html/css_WEB-ITnose 次の記事：CSS 値 radio-gradient()_html/css_WEB-ITnose
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
3
2268
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
11
2401
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
2016
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1901
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1970
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート