Syntax/Sample | Razor | Web Forms Equivalent (or remarks) |
---|---|---|
Code Block | @{ int x = 123; string y = "because."; } | <% int x = 123; string y = "because."; %> |
Expression (Html Encoded) | <span>@model.Message</span> | <span><%: model.Message %></span> |
Expression (Unencoded) | <span> @Html.Raw(model.Message) </span> | <span><%= model.Message %></span> |
Combining Text and markup | @foreach(var item in items) { <span>@item.Prop</span> } | <% foreach(var item in items) { %> <span><%: item.Prop %></span> <% } %> |
Mixing code and Plain text | @if (foo) { <text>Plain Text</text> } | <% if (foo) { %> Plain Text <% } %> |
Using block | @ using (Html.BeginForm()) { <input type="text" value="input here"> } | <% using (Html.BeginForm()) { %> <input type="text" value="input here"> <% } %> |
Mixing code and plain text (alternate) | @if (foo) { @:Plain Text is @bar } | Same as above |
Email Addresses | Hi philha@example.com | Razor recognizes basic email format and is smart enough not to treat the @ as a code delimiter |
Explicit Expression | <span>ISBN@(isbnNumber)</span> | In this case, we need to be explicit about the expression by using parentheses. |
Escaping the @ sign | <span>In Razor, you use the @@foo to display the value of foo</span> | @@ renders a single @ in the response. |
Server side Comment | @* This is a server side multiline comment *@ | <%-- This is a server side multiline comment --%> |
Calling generic method | @(MyClass.MyMethod<AType>()) | Use parentheses to be explicit about what the expression is. |
Creating a Razor Delegate | @{ Func<dynamic, object> b = @<strong>@item</strong>; } @b("Bold this") | Generates a Func<T, HelperResult> that you can call from within Razor. See this blog post for more details. |
Mixing expressions and text | Hello @title. @name. | Hello <%: title %>. <%: name %>. |
NEW IN RAZOR v2.0/ASP.NET MVC 4 | ||
Conditional attributes | <div class="@className"></div> | When className = null <div></div>When className = "" <div class=""></div>When className = "my-class" <div class="my-class"></div> |
Conditional attributes with other literal values | <div class="@className foo bar"> </div> | When className = null <div class="foo bar"></div>Notice the leading space in front of foo is removed. When className = "my-class" <div class="my-class foo bar"> </div> |
Conditional data-* attributes. data-* attributes are always rendered. | <div data-x="@xpos"></div> | When xpos = null or "" <div data-x=""></div>When xpos = "42" <div data-x="42"></div> |
Boolean attributes | <input type="checkbox" checked="@isChecked" /> | When isChecked = true <input type="checkbox" checked="checked" /> When isChecked = false <input type="checkbox" /> |
URL Resolution with tilde | <script src="~/myscript.js"> </script> | When the app is at / <script src="/myscript.js"> </script>When running in a virtual application named MyApp <script src="/MyApp/myscript.js"> </script> |
Sometimes we want to set a different color for alternating rows in a table. Below is an example:
If the row is even, we give it a different background color that is defined in the CSS class 'highlighted'.
0 comments:
Post a Comment