asp.net-mvc
かみそり

前書き

構文

• @ {...}
• @variableName
• @（variableName）
• @にとって（...）{ }
• @（明示的表現）
• @ *コメント* @

備考

コメントを追加

Razorには、 @*で始まり*@終わる独自のコメント構文があります。

インラインコメント：

<h1>Comments can be @*hi!*@ inline</h1>

複数行コメント：

@* Comments can spread
   over multiple
   lines *@

HTMLコメント

レイザービューで<!--で始まり、 -->で終わる通常のHTMLコメント構文を使用することもできます。しかし、他のコメントとは異なり、HTMLコメント内のRazorコードは引き続き正常に実行されます。

@{
    var hello = "Hello World!"; 
} 
<!-- @hello -->

上記の例では、次のHTML出力が生成されます。

<!-- Hello World! -->

コードブロック内のコメント：

@{
    // This is a comment
    var Input = "test";
}

Razorコードブロック内にHTMLを表示する

コードがエスケープされている場合、Razorコードブロック内では、ブラウザはHTMLコードのみを認識します。

1行に@:使用する：

@foreach(int number in Model.Numbers)
{
    @:<h1>Hello, I am a header!</h1>
}

複数行に<text> ... </text>を使用し<text> ... </text> 。

@{
    var number = 1;

    <text>
        Hello, I am text
        <br / >
        Hello, I am more text!
    </text>
}

Razorはコードブロック内でHTMLタグを理解することに注意してください。したがって、HTMLタグの周囲にtextタグを追加する必要はありません（それでも問題はありません）。

@{
    var number = 1;
    <text>
        <div>
            Hello, I am text
            <br / >
            Hello, I am more text!
        </div>
    </text>
}

基本的な構文

剃刀コードは、HTMLコード内のどこにでも挿入できます。かみそりコードブロックは@{ ... }囲まれてい@{ ... } 。インライン変数と関数は@始まります。かみそり括弧内のコードは、通常のC＃またはVBルールに従います。

一行の声明：

@{ var firstNumber = 1; }

複数行コードブロック：

@{
    var secondNumber = 2;
    var total = firstNumber + secondNumber;
}

インライン変数の使用：

<h1>The total count is @total</h1>

インライン変数を明示的に使用する ：

<h2>Item@(item.Id)</h2>

この特定の例では、 [email protected]は電子メールのように見え、Razorによってレンダリングされるため、暗黙の構文を使用することはできません。

制御フロー文の中にコードを入れてください：

<h1>Start with some HTML code</h1>

@for (int i = 0; i < total; i++){
    Console.Write(i);
}

<p>Mix in some HTML code for fun!</p>
<p>Add a second paragraph.</p>

@if (total > 3)
{
    Console.Write("The total is greater than 3");
}
else
{
    Console.Write("The total is less than 3");
}

for 、 foreach 、 while 、 if 、 switchなどのすべての文で同じ構文が使用されます。

コード内にコードを追加する：

@if (total > 3)
{
    if(total == 10)
    {
        Console.Write("The total is 10")
    }
}

if 2番目に@を入力する必要はありません。コードの後に​​既存のコードの背後に他のコードを入力するだけで済みます。

あなたがHTML要素の後にコードを追加したい場合は次のように入力する必要があります @ 。

@文字をエスケープする

多くの場合、Razorパーサは、電子メールアドレスのようなものの一部ではなく、 @記号がコードの一部として使用されることを意味するように十分スマートです。次の例では、 @記号をエスケープする必要はありません。

<p>Reach out to us at [email protected]</p>

しかし、場合によっては、 @記号の使用がより曖昧で、以下の例のように@@で明示的にエスケープする必要があります。

<p>Join us @@ Stack Overflow!</p>

代わりに、HTMLでエンコードされた@文字を使用することもできます

<p>Join us &#64; Stack Overflow!</p>

@関数を使用したインラインクラスとメソッドの作成

Razor @functionsキーワードを使用すると、Razorファイル内でインラインで使用するためのクラスとメソッドを導入することができます。

@functions
{
    string GetCssClass(Status status)
    {
        switch (status)
        {
            case Status.Success:
                return "alert-success";
            case Status.Info:
                return "alert-info";
            case Status.Warning:
                return "alert-warning";
            case Status.Danger:
            default:
                return "alert-danger";
         }
     }
}


<label class="alert @GetCssClass(status)"></label>

クラスでも同じことができます：

@functions
{
    class Helpers
    {
        //implementation
    }
}

名前に - （ハイフン）を含むカスタム属性を追加する

名前に - （ハイフン）を持つかみそりで属性を追加する必要がある場合は、単に行うことはできません

@Html.DropDownListFor(m => m.Id, Model.Values, new { @data-placeholder = "whatever" })

それはコンパイルされません。 data- *属性は要素に余分な値を追加するためにhtml5で有効で共通です。

しかし、次のように動作します

@Html.DropDownListFor(m => m.Id, Model.Values, new { @data_placeholder = "whatever" })

"_"はレンダリング時に " - "に置き換えられているためです。

htmlの属性名ではアンダースコアが受け入れられないため、これはうまく動作します。

エディタテンプレート

エディタテンプレートは、Razorコードを再利用するための良い方法です。エディタテンプレートをRazorパーシャルビューとして定義し、他のビューで使用することができます。

エディタテンプレートは通常、 Views/Shared/EditorTemplates/フォルダにありますが、 Views/ControllerName/EditorTemplates/フォルダに保存することもできます。ビューの名前は通常、 <type>.cshtmlようにテンプレートを使用するオブジェクトの名前です。

DateTimeの簡単なエディタテンプレートを次に示します。

@model DateTime
<div>
   <span>
      @Html.TextBox("", Model.ToShortDateString(), new { data_date_picker="true" })
   </span>
</div>

ファイルをViews / Shared / EditorTemplate / DateTime.cshtmlとして保存します。

次に、 EditorForを使用してこのテンプレートコードを別のビューで呼び出します。

@Html.EditorFor(m => m.CreatedDate)

ファイル名を指定するUIHint属性もあります。

public class UiHintExampleClass
{
    [UIHint("PhoneNumber")]
    public string Phone { get; set; }
}

この電話番号テンプレートは、 Views / Shared / EditorTemplates / PhoneNumber.cshtmlに定義します。

エディタテンプレートはカスタムタイプに対しても定義できます。

SubModelというカスタムタイプがありSubModel ：

public class SubModel
{
    public Guid Id { get; set;} 
    public string FirstName { get; set; }
    public string LastName { get; set; }
}

public class Model
{
    public Guid Id { get; set; }
    public DateTime Created {get; set; }
    
    public SubModel SubModel{get; set; }
}

これはSubModelのEditorTemplateです：

@model SubModel
<div class="form-group">
    @Html.LabelFor(m => m.FirstName)
    @Html.TextBoxFor(m => m.FirstName)
</div>
<div class="form-group">
    @Html.LabelFor(m => m.LastName)
    @Html.TextBoxFor(m => m.LastName)
</div>

モデルのビューは次のようになります。

@model Model
@Html.EditorFor(m => m.CreatedDate)
@Html.EditorFor(m => m.SubModel, new { @Prefix = "New"}) 
@* the second argument is how you can pass viewdata to your editor template*@

Razorのコンテンツを@helperに渡す

Razorの部分を@helper（HTML divなど）に送信します。

@helper WrapInBox(Func<Object, HelperResult> content)
{
    <div class="box">@content(null) </div>
}

//call 
@WrapInBox(@<div>
                I'm a inner div
            </div>)

ビュー間で@helpersを共有する

@Helpersはビュー間で共有できます。

それらはApp_Codeフォルダに作成する必要があります

@helper CreatePrimaryBootstrapButton(string label)
{
    <button type="button" class="btn btn-primary">@label</button>
}

//call

@MenuHelpers.CreatePrimaryBootstrapButton("my button")

グローバル@Urlと@Htmlは、App_codeで定義された@Helperではデフォルトでは使用できません。次のように追加することができます（App_codeフォルダ内のすべての.cshtml）

@*  Make @Html and @Url available *@
@functions
{
    private new static HtmlHelper<object> Html
    {
        get { return ((WebViewPage)CurrentPage).Html; }
    }

    private static UrlHelper Url
    {
        get { return ((WebViewPage)CurrentPage).Url; }
    }
 }