asp.net-mvc
бритва

Вступление

Синтаксис

• @ {...}
• @variableName
• @ (ИмяПеременный)
• @за(...){ }
• @ (Явное выражение)
• @* Комментарии *@

замечания

Добавить комментарий

У Razor есть свой собственный синтаксис комментариев, который начинается с @* и заканчивается на *@ .

Встроенный комментарий:

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

Многострочный комментарий:

@* Comments can spread
   over multiple
   lines *@

Комментарий HTML

Вы также можете использовать стандартный синтаксис комментариев HTML, начиная с <!-- и заканчивая --> в представлениях Razor. Но, в отличие от других комментариев, код Razor внутри комментария HTML все еще выполняется нормально.

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

В приведенном выше примере представлен следующий вывод HTML:

<!-- Hello World! -->

Комментарии в кодовом блоке:

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

Отображать HTML-код в блоке кода Razor

Внутри кода кода Razor браузер распознает только код HTML, если код экранирован.

Используйте @: для одной строки:

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

Используйте <text> ... </text> для нескольких строк:

@{
    var number = 1;

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

Обратите внимание, что Razor, когда внутри блока кода, будет понимать HTML-теги. Поэтому добавление text тега вокруг HTML-тегов не нужно (хотя и по-прежнему корректно), например:

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

Основной синтаксис

Код Razor можно вставлять в любом месте HTML-кода. Блоки кода бритвы заключены в @{ ... } . Встроенная переменная и функции начинаются с @ . Код внутри скобок Razor соответствует нормальным правилам C # или VB.

Одиночная строка:

@{ var firstNumber = 1; }

Многострочный кодовый блок:

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

Использование переменной inline:

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

Использование переменной inline явно :

<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 . После кода вы можете просто ввести другой код за существующим кодом.

Если вы хотите добавить код 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>

Создание встроенных классов и методов с помощью @functions

Использование @functions слова 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 :

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

Это EditorTemplate для 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>

Теперь View for Model просто становится:

@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 можно разделить между представлениями.

Они должны быть созданы в папке App_Code

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

//call

@MenuHelpers.CreatePrimaryBootstrapButton("my button")

@Url и @Html недоступны по умолчанию в @Helper, определенных в App_code. Вы можете добавить их следующим образом (для каждого .cshtml в папке 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; }
    }
 }