ASP.NET MVC – Bảng Razor Syntax Reference (gồm Razor v2)

Razor_ASP.NET_.NETFrameworkĐể học nhanh về Razor, cách tốt nhất là có một bảng liệt kê các cú pháp của Razor và so sánh với cú pháp của Aspx. Nhân tiện, ta sẽ tìm hiểu về các đặc điểm mới của Razor version 2.

Giới thiệu

Theo ScottGu, Razor là một view engine:

  • Compact, Expressive, and Fluid: Razor hạn chế số lượng kí tự trong một tập tin, việc gõ code sẽ trở nên nhanh chóng, linh hoạt và rõ ràng. Không giống hầu hết các loại khuôn mẫu cú pháp thường thấy, bạn không cần phải chỉ ra một cách rõ ràng đâu là một khối code server trong một văn bản HTML. Bộ phân tích Razor đủ thông mình để suy ra điều này.
  • Easy to Learn.
  • Is not a new language: Razor chỉ sử dụng cú pháp C#/VB (hoặc các ngôn ngữ khác) kết hợp với HTML.
  • Works with any Text Editor.
  • Has great Intellisense: Visual Studio 2010 và Visual Web Developer 2010 hỗ trợ đầy đủ tính năng intellsense cho Razor.
  • Unit Testable: Razor hỗ trợ khả năng unit test cho các view mà không cần các controller hoặc web-server. Chúng có thể được host bấy kì dự án unit test nào.

Đặc điểm mới của Razor v2

– Tự động phân giải địa chỉ URL với kí tự “~” đứng đầu. Bạn không cần phải dùng helper @Url.Content để làm điều này nữa:

// Razor v1:
<script src="@Url.Content("~/js/scripts.js")"></script>
// Razor v2:
<script src="~/js/scripts.js"></script>

– Các attribute của html nếu được có giá trị là một biến null thì attribute đó sẽ bị loại bỏ. Trong Razor v1 thì attribute đó sẽ có giá trị là chuỗi rỗng.

<input type="text" value="@value">

// will render the following markup with
// Razor v1:
<input type="text" value="">
// Razor v2:
<input type="text">

C# Razor Syntax Quick Reference

Bản gốc: C# Razor Syntax Quick Reference

Syntax/Sample Razor
Code Block
@{ 
  int x = 123; 
  string y = "because.";
}
Expression (Html Encoded)
<span>@model.Message</span>
Expression (Unencoded)
<span>
@Html.Raw(model.Message)
</span>
Combining Text and markup
@foreach(var item in items) {
  <span>@item.Prop</span> 
}
Mixing code and Plain text
@if (foo) {
  <text>Plain Text</text> 
}
Mixing code and plain text (alternate)
@if (foo) {
  @:Plain Text is @bar
}
Email Addresses
Hi philha@example.com
Explicit Expression
<span>ISBN@(isbnNumber)</span>
Escaping the @ sign
<span>In Razor, you use the 
@@foo to display the value 
of foo</span>
Server side Comment
@*
This is a server side 
multiline comment 
*@
Calling generic method
@(MyClass.MyMethod<AType>())
Creating a Razor Delegate
@{
  Func<dynamic, object> b = 
   @<strong>@item</strong>;
}
@b("Bold this")
Mixing expressions and text
Hello @title. @name.

Lưu ý trong rằng ví dụ “mixing expressions and text”, Razor đủ thông minh để hiểu rằng dấu chấm cuối các biến là một kí tự chấm câu (chứ không phải nó đang cố truy xuất đến property/method nào đó).

NEW IN RAZOR v2.0/ASP.NET MVC 4

Syntax/Sample Razor Remark
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>

YinYangIt’s Blog

Advertisements

3 thoughts on “ASP.NET MVC – Bảng Razor Syntax Reference (gồm Razor v2)

  1. anh cho em hỏi là làm chức năng có comment như wordpress hay youtube như thế nào anh?
    Em làm trong cái detail của sản phẩm có form comment rồi button bình luận, nhưng em không biết làm thế nào để từ cái view này tạo ra một cái dòng dữ liệu BinhLuan, rồi liên kết với controller như thế nào ?
    Gặp khó khăn quá mong anh hồi đáp.
    Thanks anh nhiều !

    Phản hồi
  2. Pingback: ASP.NET MVC – Bảng Razor Syntax Reference (gồm Razor v2) | Trần Tri's Blog

Trả lời

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s