Best Practices for ASP.NET MVC: View (Phần 2)


[Bài viết này dựa trên một tài liệu của tác giả Ben Grover (một nhà phát triển cấp cao từ Microsoft). Chúng tôi dự định sẽ đưa những thông tin này vào phần tài liệu MVC 3 trên trang MSDN. Chúng tôi hi vọng được nghe những phản hổi  và mong chờ bất kỳ góp ý nào từ phía các bạn]

Bài viết này giới thiệu một tập các hướng dẫn lập trình nhắm đến các lập trình viên ASP.NET MVC. Tất nhiên, bạn, với tư cách là nhà phát triển sẽ vẫn là người quyết định cuối cùng trong việc chọn hướng dẫn nào phù hợp nhất.

Các khuyến nghị trong việc tạo View

Vai trò chính của một View là trình bày nội dung của Model. View được chọn bởi Controller. Business logic không được bao gồm trong view, vì nó thuộc vai trò của lớp Model. Các kỹ thuật dùng view có thể cực kỳ mềm dẻo. Ví dụ, một view cho một trang web có thể được hiển thị bằng HTML. Một view khác của cùng Model (cùng dữ liệu), có thể được biểu diễn bằng XML và hoạt động như một Web Service.

Nên: HTML phải được viết trong Views và các Partial View (chứ không phải trong controller).

Một trong những ưu điểm lớn nhất của view là tính dễ đọc của các file view template. Với view engine mặc nhiên, ASP.NET cho phép bạn dùng các kiểu file view sau: các trang HTML đầy đủ (.aspx), các phần trang HTML (partial HTML view), và các master page (.master). Một trang master cho phép bạn chỉ ra định dạng tổng thể của view. Các trang master cũng có thể lồng nhau ở một số cấp để tạo ra một cây các kiểu hiển thị khác nhau.

Ví dụ sau cho thấy cách gọi một partial view:

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>
…
    Below is a list of items submitted by <b>
<%= Html.Encode(ViewData["name"]) %></b>.
    <p>

    ...
    <div id="items">
        <% Html.RenderPartial("ItemsByName");%>
    </div>
</asp:content>

File partial view (ItemsByName.ascx) được hiển thị ở đây:

<%@ Control Language="C#"  %>
…
        <% foreach (Seller.Controllers.Items item in (IEnumerable)ViewData.Model)
           { %>
            <tr>
                <td>
                    <%= Html.Encode(item.title)%>
                </td>
                <td>
                    <%= Html.Encode(item.price)%>
                </td>
            </tr>
        <% } %>
        </table>
      <% } %>

Partial view là một cơ chế mở rộng và dùng lại mạnh mẽ. Ví dụ, chúng ta có thể bao gồm cùng một partial view vào trong một trang quản trị, mà không cần viết lại code.

Nên: truy cập dữ liệu trong view dùng ViewData

ASP.NET cung cấp cách cơ chế sau cho phép truy cập dữ liệu từ các trang view:

  • Đối tượng ViewData.Model, được tạo ra bởi phương thức action trong controller bằng cách truyền đối tượng model vào câu lệnh return (return View(myModelObject)).
  • ViewData, cho phép bạn đưa vào bất kỳ loại dữ liệu nào vào trong dictionary trong phương thức action (ViewData[“key”] = value), và sau đó có thể được truy cập từ view.

Bất cứ khi nào có thể, bạn nên ViewData.Model thay vì ViewData bởi nó chặt chẽ về kiểu dữ liệu. Thêm nữa, bạn nên dùng cơ chế truy cập dữ liệu hơn là truy cập trực tiếp đến Request/Session trực tiếp trong view.

Nếu bạn có một đối tượng chứa nhiểu thuộc tính cần được hiển thị, bạn nên dùng ViewData.Model và tạo strongly typed view cho đối tượng đó. Nếu bạn có một trang hiển thị chi tiết người bán (seller), lấy ví dụ, và lớp seller có các thuộc tính name, phone, address, email… khi đó bạn có thế trả về một đối tượng kiểu seller từ controller trước khi hiển thị view. Nếu bạn có các thông tin khác như số trang, tên người dùng, giờ hiện tại, hãy dùng ViewData.

Tránh việc truy cập dữ liệu trong view khi dùng model binding. Nói cách khác, việc truy xuất dữ liệu từ CSDL phải được thực hiện trong controller, sau đó đưa dữ liệu vào các đối tượng ViewData.Model trước khi thực thi view. Nhờ đó các đối tượng này sẽ không phải truy xuất dữ liệu trong quá trình hiển thị view.

Nên: cho phép (tự động sinh) các phép kiểm tra dữ liệu phía client.

Trước đây, các nhà phát triển web thường gặp khó khăn khi đảm bảo tính đồng bộ giữa các phép kiểm tra dữ liệu trên server và client. Bắt đầu từ ASP.NET MVC 2, việc này trở nên khá dễ dàng.

Để thêm việc kiểm tra dữ liệu phía client:

  1. Thêm phép kiểm tra vào lớp model giống như đã nói trong phần “Nên: đặt tất cả các quy tắc xác định giá trị hợp lệ của dữ liệu bên trong model.”
  2. Đảm bảo các file sau có trong thư mục Scripts của project:
    • MicrosoftAjax.js
    • MicrosoftMvcValidation.js
  3. Thêm dòng sau vào trang chứa form cần kiểm tra:
    <script src="<%= Url.Content("~/Scripts/MicrosoftAjax.js") %>" type="text/javascript"></script>
    
    <script src="<%= Url.Content("~/Scripts/MicrosoftMvcValidation.js") %>" type="text/javascript"></script>
  4. Đặt dòng sau vào trước thẻ form:
    <% Html.EnableClientValidation(); %>

Giờ nếu bạn thử sửa một giá trị không khớp với các phép kiểm tra, việc xác thực tính hợp lệ trên client sẽ thất bại và thông báo sẽ được chuyển ngay cho người dùng.

Nên: đưa các ghi chú dạng server-side vào trong template:

Nên dùng ghi chú dạng server-side trong các trang view. Các ghi chú đó sẽ được loại bỏ trước khi server trả về trang HTML.

Dòng sau biểu diễn một ghi chú dạng server-side:

<%– This is a server side template comment –%>

Đừng dùng các ghi chú dạng HTML trong các trang view vì nó sẽ được hiển thị lên trình duyệt ưeb và có thể được xem bởi một người dùng có kinh nghiệm (và có thể nguy hiểm).

Nên: dùng các phương thức mở rộng của HTMLHelper.

Lớp System.Web.Mvc.Html chứa nhiều phương thức mở rộng hữu ích. Các phương thức này bao gồm:

  • Tạo form (BeginForm)
  • Tạo các trường nhập dữ liệu (checkbox, hidden, radio button, textbox)
  • Tạo link (ActionLink)
  • Chống XSS (Encode)

Các phương thức mở rộng này nên được sử dụng càng nhiều càng tốt. Ví dụ, đoạn code sau tạo một link dùng route table để chuyển về action Default trên cùng controller gọi đến view hiện tại:

<%= Html.ActionLink(“Home page”, “Default”) %>

(Có thể xem thêm về các phương thức mở rộng tại đây: https://namdh.wordpress.com/2011/01/19/extension-methods/)

[Bài viết này dựa trên một tài liệu của tác giả Ben Grover (một nhà phát triển cấp cao từ Microsoft). Chúng tôi dự định sẽ đưa những thông tin này vào phần tài liệu MVC 3 trên trang MSDN. Chúng tôi hi vọng được nghe những phản hổi  và mong chờ bất kỳ góp ý nào từ phía các bạn]

Bài viết này giới thiệu một tập các hướng dẫn lập trình nhắm đến các lập trình viên ASP.NET MVC. Tất nhiên, bạn, với tư cách là nhà phát triển sẽ vẫn là người quyết định cuối cùng trong việc chọn hướng dẫn nào phù hợp nhất.

4 thoughts on “Best Practices for ASP.NET MVC: View (Phần 2)

  1. Pingback: Best Practices for ASP.NET MVC: Model (Phần 1) « Đào Hải Nam

  2. Pingback: Best Practices for ASP.NET MVC: Controller (Phần 3) « Đào Hải Nam

  3. Chào anh Nam anh cho em hỏi cái này, em có 1 cái project nhỏ về mvc 3 tình hình là em có 1 cái database trong đó có 1 cái bản Products: Id, Name, Price, Quantity, Description. Trong đó em muốn Descsription hiện được giá trị là dạng html nên em cho nó kiểu dữ liệu là NTEXT, nhưng mà trong app mvc thì nó hiện ra dạng “……” nó có dấu nháy kép nữa, nên nó hiểu đây là dạng text anh chỉ cho em cách giải quyết được không

Gửi phản hồ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