asp.net-mvc
Maquinilla de afeitar

Introducción

Sintaxis

• @ {...}
• @nombre de la variable
• @(nombre de la variable)
• @para(...){ }
• @ (Expresión explícita)
• @ * comentarios * @

Observaciones

Añadir comentarios

Razor tiene su propia sintaxis de comentario que comienza con @* y termina con *@ .

Comentario en línea:

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

Comentario multilínea:

@* Comments can spread
   over multiple
   lines *@

Comentario HTML

También puede usar la sintaxis de comentario HTML normal comenzando con <!-- y terminando con --> en las vistas de Razor. Pero a diferencia de otros comentarios, el código Razor dentro de un comentario HTML todavía se ejecuta normalmente.

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

El ejemplo anterior produce el siguiente resultado HTML:

<!-- Hello World! -->

Comentarios dentro de un bloque de código:

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

Mostrar HTML dentro del bloque de código Razor

Mientras se encuentre dentro de un bloque de código de Razor, el navegador solo reconocerá el código HTML si se escapa el código.

Use @: para una sola línea:

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

Utilice <text> ... </text> para multilínea:

@{
    var number = 1;

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

Tenga en cuenta que Razor, cuando está dentro de un bloque de código, entenderá las etiquetas HTML. Por lo tanto, agregar la etiqueta de text alrededor de las etiquetas HTML es innecesario (aunque sigue siendo correcto), como por ejemplo:

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

Sintaxis basica

El código Razor se puede insertar en cualquier lugar dentro del código HTML. Los bloques de código de la maquinilla de afeitar están incluidos en @{ ... } . Las variables y funciones en línea comienzan con @ . El código dentro de los soportes de Razor sigue las reglas normales de C # o VB.

Declaración de una sola línea:

@{ var firstNumber = 1; }

Bloque de código multilínea:

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

Usando una variable en línea:

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

Usando una variable en línea explícitamente :

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

Para este ejemplo en particular, no podremos usar la sintaxis implícita porque [email protected] parece un correo electrónico y Razor lo procesará como tal.

Adjuntar código dentro de las declaraciones de flujo de control:

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

Esta misma sintaxis se usaría para todas las declaraciones como for , foreach , while , if , switch , etc.

Agregando código dentro del código:

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

Tenga en cuenta que no necesita escribir la @ en el segundo if . Después del código, simplemente puede escribir otro código detrás del código existente.

Si desea agregar código después de un elemento HTML , debe escribir a @ .

Escapando a @ personaje

En muchos casos, el analizador Razor es lo suficientemente inteligente como para determinar cuándo el signo @ debe utilizarse como parte del código, en lugar de ser parte de algo como una dirección de correo electrónico. En el siguiente ejemplo, no es necesario escapar del signo @ :

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

Sin embargo, en algunos casos, el uso del signo @ es más ambiguo, y debe evitarse explícitamente con @@ , como se muestra en el siguiente ejemplo:

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

Alternativamente, podemos usar un carácter @ codificado en HTML

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

Crear clases y métodos en línea usando funciones @

El uso de la palabra clave Razor @functions brinda la capacidad de introducir clases y métodos para el uso en línea dentro de un archivo 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>

Lo mismo se puede hacer para las clases:

@functions
{
    class Helpers
    {
        //implementation
    }
}

Agregando un atributo personalizado con - (guión) en el nombre

Si necesita agregar un atributo a través de la maquinilla de afeitar que tiene un - (guión) en el nombre, simplemente no puede hacer

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

no compilará Los atributos de data- * son válidos y comunes en html5 para agregar valores extra a los elementos.

Sin embargo lo siguiente funcionará

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

ya que "_" se reemplaza con "-" cuando se procesa.

Esto funciona bien ya que los guiones bajos no son aceptables en los nombres de atributos en html.

Plantillas de editor

Las plantillas de editor son una buena manera de reutilizar el código Razor. Puede definir plantillas de editor como vistas parciales de Razor y luego usarlas en otras vistas.

Las plantillas de editor generalmente existen en la carpeta Views/Shared/EditorTemplates/ , aunque también se pueden guardar en la carpeta Views/ControllerName/EditorTemplates/ . El nombre de la vista suele ser el nombre del objeto para el que desea utilizar la plantilla, como <type>.cshtml .

Aquí hay una plantilla de editor simple para DateTime:

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

Guarde el archivo como Views / Shared / EditorTemplate / DateTime.cshtml .

Luego, use EditorFor para llamar a este código de plantilla en otra vista:

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

También hay un atributo UIHint para especificar el nombre del archivo:

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

Defina esta plantilla de número de teléfono en Views / Shared / EditorTemplates / PhoneNumber.cshtml .

Las plantillas de editor también se pueden definir para tipos personalizados.

Aquí hay un tipo personalizado llamado 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; }
}

Este es el EditorTemplate para 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>

Ahora, la vista para el modelo simplemente se convierte en:

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

Pase el contenido de Razor a un @helper

Envía una parte de Razor a un @helper, por ejemplo, un div HTML.

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

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

Compartir @helpers a través de vistas

@Ayudantes podrían ser compartidos entre vistas.

Deben ser creados en la carpeta App_Code

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

//call

@MenuHelpers.CreatePrimaryBootstrapButton("my button")

Los globales @Url y @Html no están disponibles de forma predeterminada en @Helper definido en App_code. Puede agregarlos de la siguiente manera (para cada .cshtml en su carpeta 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; }
    }
 }