asp.net-mvc
Rakapparat

Introduktion

Syntax

• @ {...}
• @variableName
• @ (Variabelnamn)
• @för(...){ }
• @ (Explicit Expression)
• @ * kommentarer * @

Anmärkningar

Lägg till kommentarer

Razor har sin egen syntax för kommentarer som börjar med @* och slutar med *@ .

Inline Kommentar:

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

Kommentar med flera linjer:

@* Comments can spread
   over multiple
   lines *@

HTML-kommentar

Du kan också använda den normala HTML-kommentarsyntaxen som börjar med <!-- och slutar med --> i Razor-vyer. Men till skillnad från andra kommentarer körs Razor-koden i en HTML-kommentar fortfarande normalt.

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

Exemplet ovan producerar följande HTML-output:

<!-- Hello World! -->

Kommentarer inom ett kodblock:

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

Visa HTML i Razor-kodblocket

I ett Razor-kodblock känner webbläsaren bara igen HTML-kod om koden undkommit.

Använd @: för en enda rad:

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

Använd <text> ... </text> för flerstreck:

@{
    var number = 1;

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

Observera att Razor, när du är inne i ett kodblock, förstår HTML-taggar. Därför lägger till text är onödiga (även om det fortfarande rätt), såsom tag runt HTML-taggar:

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

Grundläggande syntax

Razor-kod kan sättas in var som helst i HTML-kod. Razor-kodblock ingår i @{ ... } . Inlinevariabel och funktioner börjar med @ . Koden inuti rakknivarna håller de normala C #- eller VB-reglerna.

Uttalande med en rad:

@{ var firstNumber = 1; }

Flerfodigt kodblock:

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

Använda en variabel inline:

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

Använda en variabel inline uttryckligen :

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

För det här exemplet kommer vi inte att kunna använda den implicita syntaxen eftersom [email protected] ser ut som ett e-postmeddelande och kommer att återges som sådant av Razor.

Bifoga koden i kontrollflödesanalyserna:

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

Samma syntax skulle användas för alla uttalanden som for , foreach , while , if , switch etc.

Lägga till kod i koden:

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

Observera att du inte behöver skriva @ vid den andra if . Efter kod kan du bara skriva annan kod bakom den befintliga koden.

Om du vill lägga till koden efter en HTML-element du behöver skriva en @ .

Rymmer @ karaktär

I många fall är Razor-tolkaren tillräckligt smart för att ta reda på när @ -tecknet är tänkt att användas som en del av koden, i motsats till att ingå i något som en e-postadress. I exemplet nedan är det inte nödvändigt att undgå @ -tecknet:

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

I vissa fall är användningen av @ -tecknet emellertid mer tvetydig, och det måste tydligt @@ med @@ , som i exemplet nedan:

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

Alternativt kan vi använda ett HTML-kodat @ -tecken

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

Skapa inline klasser och metoder med @funktioner

Med @functions nyckelordet Razor @functions kan du introducera klasser och metoder för inline användning i en Razor-fil:

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

Detsamma kan göras för klasser:

@functions
{
    class Helpers
    {
        //implementation
    }
}

Lägga till ett anpassat attribut med - (bindestreck) i namn

Om du behöver lägga till ett attribut genom rakkniv som har en - (bindestreck) i namnet kan du inte helt enkelt göra det

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

det kommer inte att sammanställas. data- * attribut är giltiga och vanliga i html5 för att lägga till extra värden till element.

Följande kommer dock att fungera

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

eftersom "_" ersätts med "-" när den återges.

Detta fungerar bra eftersom understreck inte är acceptabla i attributnamn i html.

Editor Mallar

Redaktörsmallar är ett bra sätt att återanvända rakkniv. Du kan definiera redigeringsmallar som Razor-partiella vyer och sedan använda dem i andra vyer.

Redigeringsmallar finns vanligtvis i mappen Views/Shared/EditorTemplates/ mappen, även om de också kan sparas i mappen Views/ControllerName/EditorTemplates/ mapp. Vynens namn är vanligtvis namnet på objektet du vill använda mallen för, till exempel <type>.cshtml .

Här är en enkel redigeringsmall för DateTime:

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

Spara filen som Visningar / Delad / EditorTemplate / DateTime.cshtml .

EditorFor att ringa denna mallkod i en annan vy:

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

Det finns också ett UIHint-attribut för att ange filnamnet:

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

Definiera denna telefonnummermall i Visningar / Delad / EditorTemplates / PhoneNumber.cshtml .

Redigeringsmallar kan också definieras för anpassade typer.

Här är en anpassad typ som heter 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; }
}

Detta är EditorTemplate för 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>

Nu blir View for Model helt enkelt:

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

Skicka Razor-innehåll till en @helper

Skicka en rakknivdel till en @helper, till exempel en HTML-div.

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

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

Dela @helpers över vyer

@ Hjälpare kan delas mellan vyer.

De ska skapas i mappen App_Code

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

//call

@MenuHelpers.CreatePrimaryBootstrapButton("my button")

Globalen @Url och @Html är inte tillgängliga som standard i @Helper definierad i App_code. Du kan lägga till dem enligt följande (för varje .cshtml i mappen 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; }
    }
 }