Tutorial by Examples

Razor has its own comment syntax which begins with @* and ends with *@. Inline Comment: <h1>Comments can be @*hi!*@ inline</h1> Multi-line Comment: @* Comments can spread over multiple lines *@ HTML Comment You can also use the normal HTML comment syntax starting with &...

While inside a Razor code block, the browser will only recognize HTML code if the code is escaped. Use @: for a Single line: @foreach(int number in Model.Numbers) { @:<h1>Hello, I am a header!</h1> } Use <text> ... </text> for Multi-line: @{ var number = 1; ...

Razor code can be inserted anywhere within HTML code. Razor code blocks are enclosed in @{ ... }. Inline variable and functions start with @. Code inside the Razor brackets follow the normal C# or VB rules. Single line statement: @{ var firstNumber = 1; } Multi-line code block: @{ var sec...

In many cases, the Razor parser is smart enough to figure out when the @ sign is meant to be used as part of code, as opposed to being part of something like an email address. In the example below, escaping the @ sign is not necessary: <p>Reach out to us at [email protected]</p> Howev...

Using Razor @functions keyword gives the capability of introducing classes and methods for inline use within a Razor file: @functions { string GetCssClass(Status status) { switch (status) { case Status.Success: return "alert-success&qu...

If you need to add an attribute through razor that has a - (hyphen) in the name you cannot simply do @Html.DropDownListFor(m => m.Id, Model.Values, new { @data-placeholder = "whatever" }) it will not compile. data-* attributes are valid and common in html5 for adding extra values t...

Editor templates are a good way to reuse Razor code. You can define editor templates as Razor partial views and then use them in other views. Editor templates usually exist in the Views/Shared/EditorTemplates/ folder, although they can also be saved to the Views/ControllerName/EditorTemplates/ fold...

Send a Razor part to a @helper, for example a HTML div. @helper WrapInBox(Func<Object, HelperResult> content) { <div class="box">@content(null) </div> } //call @WrapInBox(@<div> I'm a inner div </div>)

@Helpers could be shared between views. They should be created in the folder App_Code @helper CreatePrimaryBootstrapButton(string label) { <button type="button" class="btn btn-primary">@label</button> } //call @MenuHelpers.CreatePrimaryBootstrapButton...