asp.net-mvc
Le rasoir

Introduction

Syntaxe

• @ {...}
• @Nom de variable
• @(Nom de variable)
• @pour(...){ }
• @ (Expression explicite)
• @* commentaires *@

Remarques

Ajoutez des commentaires

Razor a sa propre syntaxe de commentaire qui commence par @* et se termine par *@ .

Commentaire en ligne:

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

Commentaire multiligne:

@* Comments can spread
   over multiple
   lines *@

Commentaire HTML

Vous pouvez également utiliser la syntaxe de commentaire HTML normale commençant par <!-- et se terminant par --> dans les vues de rasoir. Mais contrairement aux autres commentaires, le code Razor dans un commentaire HTML est toujours exécuté normalement.

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

L'exemple ci-dessus produit la sortie HTML suivante:

<!-- Hello World! -->

Commentaires dans un bloc de code:

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

Afficher le code HTML dans le bloc de code Razor

Dans un bloc de code Razor, le navigateur reconnaît uniquement le code HTML si le code est échappé.

Utilisez @: pour une ligne simple:

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

Utilisez <text> ... </text> pour Multi-line:

@{
    var number = 1;

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

Notez que Razor, à l'intérieur d'un bloc de code, comprendra les balises HTML. Par conséquent, l'ajout de la balise de text autour des balises HTML est inutile (mais toujours correct), par exemple:

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

Syntaxe de base

Le code rasoir peut être inséré n'importe où dans le code HTML. Les blocs de code de rasoir sont placés dans @{ ... } . La variable en ligne et les fonctions commencent par @ . Code à l'intérieur des parenthèses de rasoir suivent les règles normales de C # ou de VB.

Déclaration de ligne unique:

@{ var firstNumber = 1; }

Bloc de code multiligne:

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

En utilisant une variable inline:

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

Utiliser une variable en ligne explicitement :

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

Pour cet exemple particulier, nous ne pourrons pas utiliser la syntaxe implicite car [email protected] ressemble à un email et sera rendu comme tel par Razor.

Placez le code à l'intérieur des instructions du flux de contrôle:

<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");
}

Cette même syntaxe serait utilisée pour toutes les instructions telles que for , foreach , while , if , switch , etc.

Ajouter du code à l'intérieur du code:

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

Notez que vous n'avez pas besoin de taper le @ à la seconde if . Après le code, vous pouvez simplement taper un autre code derrière le code existant.

Si vous voulez ajouter du code après un élément HTML que vous avez besoin de taper un @ .

Évasion @ caractère

Dans de nombreux cas, l'analyseur Razor est suffisamment intelligent pour déterminer si le signe @ est destiné à être utilisé dans le cadre du code, au lieu de faire partie d'une adresse électronique. Dans l'exemple ci-dessous, échapper au signe @ n'est pas nécessaire:

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

Cependant, dans certains cas, l'utilisation du signe @ est plus ambiguë et doit être explicitement échappée avec @@ , comme dans l'exemple ci-dessous:

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

Alternativement, nous pouvons utiliser un caractère HTML encodé @

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

Créer des classes et des méthodes en ligne à l'aide des fonctions @

L' @functions mot clé Razor @functions permet d'introduire des classes et des méthodes pour une utilisation en ligne dans un fichier 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>

La même chose peut être faite pour les classes:

@functions
{
    class Helpers
    {
        //implementation
    }
}

Ajout d'un attribut personnalisé avec - (trait d'union) dans le nom

Si vous avez besoin d'ajouter un attribut par le biais d'un rasoir comportant un - (trait d'union) dans le nom que vous ne pouvez pas faire simplement

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

il ne compilera pas. Les attributs data- * sont valides et courants dans html5 pour ajouter des valeurs supplémentaires aux éléments.

Cependant, les éléments suivants fonctionneront

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

puisque "_" est remplacé par "-" lors du rendu.

Cela fonctionne bien car les traits de soulignement ne sont pas acceptables dans les noms d'attribut en HTML.

Modèles de l'éditeur

Les modèles d'éditeur sont un bon moyen de réutiliser le code Razor. Vous pouvez définir des modèles d'éditeur en tant que vues partielles Razor, puis les utiliser dans d'autres vues.

Les modèles d'éditeur existent généralement dans le dossier Views/Shared/EditorTemplates/ , bien qu'ils puissent également être enregistrés dans le dossier Views/ControllerName/EditorTemplates/ . Le nom de la vue est généralement le nom de l'objet pour <type>.cshtml vous souhaitez utiliser le modèle, comme <type>.cshtml .

Voici un template d'éditeur simple pour DateTime:

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

Enregistrez le fichier sous le nom Views / Shared / EditorTemplate / DateTime.cshtml .

Ensuite, utilisez EditorFor pour appeler ce code de modèle dans une autre vue:

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

Il existe également un attribut UIHint pour spécifier le nom du fichier:

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

Définissez ce modèle de numéro de téléphone dans Views / Shared / EditorTemplates / PhoneNumber.cshtml .

Les modèles d'éditeur peuvent également être définis pour les types personnalisés.

Voici un type personnalisé appelé 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; }
}

Ceci est le EditorTemplate pour SubModel:

@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>

Maintenant, la vue pour le modèle devient simplement:

@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*@

Transmettre le contenu du rasoir à un @helper

Envoyer une partie Razor à un @helper, par exemple un div HTML.

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

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

Partager @helpers entre les vues

@Helpers pourrait être partagé entre les vues.

Ils doivent être créés dans le dossier App_Code

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

//call

@MenuHelpers.CreatePrimaryBootstrapButton("my button")

Les globals @Url et @Html ne sont pas disponibles par défaut dans le @Helper défini dans App_code. Vous pouvez les ajouter comme suit (pour chaque fichier .cshtml dans votre dossier App_code)

@*  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; }
    }
 }