asp.net-mvc
Brzytwa

Wprowadzenie

Składnia

• @ {...}
• @variableName
• @ (nazwa zmiennej)
• @dla(...){ }
• @ (Wyrażenie jawne)
• @ * komentarze * @

Uwagi

Dodaj Komentarze

Razor ma własną składnię komentarzy, która zaczyna się od @* a kończy na *@ .

Komentarz wewnętrzny:

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

Komentarz wieloliniowy:

@* Comments can spread
   over multiple
   lines *@

Komentarz HTML

Możesz także użyć normalnej składni komentarzy HTML, zaczynając od <!-- i kończąc na --> w widokach Razor. Ale w przeciwieństwie do innych komentarzy, kod Razor wewnątrz komentarza HTML jest nadal wykonywany normalnie.

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

Powyższy przykład generuje następujący wynik HTML:

<!-- Hello World! -->

Komentarze w bloku kodu:

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

Wyświetlaj HTML w bloku kodu Razor

Wewnątrz bloku kodu Razor przeglądarka rozpozna kod HTML tylko wtedy, gdy kod zostanie zmieniony.

Użyj @: dla pojedynczej linii:

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

Użyj <text> ... </text> dla wielu linii:

@{
    var number = 1;

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

Pamiętaj, że Razor, gdy jest w bloku kodu, zrozumie tagi HTML. Dlatego dodawanie znacznika text wokół znaczników HTML jest niepotrzebne (choć nadal poprawne), takie jak:

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

Podstawowa składnia

Kod brzytwy można wstawić w dowolnym miejscu kodu HTML. Bloki kodu brzytwy są zawarte w @{ ... } . Zmienna wbudowana i funkcje zaczynają się od @ . Kod w nawiasach Razor jest zgodny z normalnymi zasadami C # lub VB.

Instrukcja jednowierszowa:

@{ var firstNumber = 1; }

Wielokreskowy blok kodu:

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

Za pomocą zmiennej wbudowanej:

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

Używając bezpośrednio wbudowanej zmiennej :

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

W tym konkretnym przykładzie nie będziemy mogli użyć domyślnej składni, ponieważ [email protected] wygląda jak wiadomość e-mail i jako taka zostanie renderowana przez Razor.

Załącz kod do instrukcji przepływu sterowania:

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

Ta sama składnia byłaby używana dla wszystkich instrukcji, takich jak for , foreach , while , if , switch itp.

Dodawanie kodu wewnątrz kodu:

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

Zauważ, że nie musisz wpisywać @ przy drugim if . Po kodzie możesz po prostu wpisać inny kod za istniejącym kodem.

Jeśli chcesz dodać kod po elemencie HTML trzeba zrobić, aby wpisać @ .

Znak ucieczki @

W wielu przypadkach parser Razor jest wystarczająco inteligentny, aby dowiedzieć się, kiedy znak @ ma być używany jako część kodu, a nie jako część adresu e-mail. W poniższym przykładzie ucieczka przed znakiem @ nie jest konieczna:

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

Jednak w niektórych przypadkach użycie znaku @ jest bardziej niejednoznaczne i musi być jawnie @@ znakiem @@ , jak w poniższym przykładzie:

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

Alternatywnie możemy użyć znaku @ zakodowanego w HTML

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

Twórz wbudowane klasy i metody za pomocą @functions

Użycie słowa kluczowego Razor @functions daje możliwość wprowadzenia klas i metod do bezpośredniego użycia w pliku 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>

To samo można zrobić dla klas:

@functions
{
    class Helpers
    {
        //implementation
    }
}

Dodanie niestandardowego atrybutu z nazwą - (łącznik) w nazwie

Jeśli musisz dodać atrybut za pomocą maszynki do golenia, która ma w nazwie znak (- myślnik), nie możesz tego zrobić

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

to się nie skompiluje. atrybuty data- * są poprawne i wspólne w html5 do dodawania dodatkowych wartości do elementów.

Jednak następujące będą działać

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

ponieważ „_” podczas renderowania jest zastępowane przez „-”.

Działa to dobrze, ponieważ podkreślenia nie są dopuszczalne w nazwach atrybutów w HTML.

Szablony edytora

Szablony edytora są dobrym sposobem na ponowne użycie kodu Razor. Możesz zdefiniować szablony edytora jako częściowe widoki Razor, a następnie użyć ich w innych widokach.

Szablony edytora zwykle istnieją w folderze Views/Shared/EditorTemplates/ , chociaż można je również zapisać w folderze Views/ControllerName/EditorTemplates/ . Nazwa widoku to zazwyczaj nazwa obiektu, dla którego chcesz użyć szablonu, na przykład <type>.cshtml .

Oto prosty szablon edytora dla DateTime:

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

Zapisz plik jako Views / Shared / EditorTemplate / DateTime.cshtml .

Następnie użyj EditorFor aby wywołać ten kod szablonu w innym widoku:

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

Istnieje również atrybut UIHint do określania nazwy pliku:

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

Zdefiniuj ten szablon numeru telefonu w Views / Shared / EditorTemplates / PhoneNumber.cshtml .

Szablony edytora można również zdefiniować dla typów niestandardowych.

Oto niestandardowy typ o nazwie 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; }
}

To jest EditorTemplate dla 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>

Teraz widok dla modelu staje się po prostu:

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

Przekaż zawartość Razor do @helper

Wyślij część Razor do @helper, na przykład div HTML.

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

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

Udostępnij @helpers między widokami

@Helpers mogą być dzielone między widokami.

Powinny zostać utworzone w folderze App_Code

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

//call

@MenuHelpers.CreatePrimaryBootstrapButton("my button")

@Url i @Html nie są domyślnie dostępne w @Helper zdefiniowanym w App_code. Możesz dodać je w następujący sposób (dla każdego pliku .cshtml w folderze 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; }
    }
 }