Data Binding trong ASP.NET


Trong bài viết hôm nay, chúng ta sẽ cùng tìm hiểu qua về Data Binding trong ứng dụng ASP.NET. Nói một cách đơn giản, Data Binding là việc đưa dữ liệu hiển thị lên trên trang Web. Sau bài viết này, chúng ta còn sẽ mở rộng ra việc tìm hiểu nhiều control chuyên biệt trong ASP.NET Web Forms nhằm hiển thị dữ liệu theo yêu cầu của ứng dụng.

  1. Cú pháp Data Binding
    Việc gắn dữ liệu vào trang ASP.NET trực tiếp với mã HTML được đánh dấu bắt đầu bằng ký hiệu <%# và kết thúc bằng ký hiệu %>. Ví dụ đơn giản đầu tiên đó là chúng ta sẽ hiển thị ngày tháng hiện tại lên trang bằng cách sử dụng thuộc tính DateTime.Now. Trang web của chúng ta sẽ có mã như sau:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DataBindingDemo.aspx.cs" Inherits="TestASPNET.DataBindingDemo" Trace="false"%>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <strong><em><%# DateTime.Now %></em></strong>
        </div>
        </form>
    </body>
    </html>
    
    

    Các bạn chú ý tại dòng đánh dấu được làm đậm. Ở đây, biểu thức <%# DateTime.Now %> được chèn trực tiếp vào mã HTML của trang ASP.NET, khi server phân tích mã và gặp dòng này thì Server sẽ thực hiện việc đánh giá biểu thức bên trong dấu <%# và %>, sau đó hiển thị biểu thức này như một chuỗi HTML bình thường. Tuy nhiên, có lẽ các bạn sẽ cảm thấy khá ngạc nhiên khi chúng ta chạy trang web thì sẽ nhận được một trang web trống thay vì hiển thị ngày tháng hiện tại

image Nguyên nhân là do mặc dù chúng ta đã chỉ định trong mã đánh dấu là hiển thị biểu thức này, nhưng Server sẽ bỏ qua đoạn <%# %>. Để báo cho Server biết rằng chúng ta có biểu thức Data Binding trên trang web cần phải được đánh giá, chúng ta “bắt buộc” sẽ phải gọi phương thức DataBind() của trang trong tập tin Code-Behind (trong ASP.NET, theo mặc định thì các đoạn code xử lý logic sẽ được tách ra một tập tin riêng biệt gọi là Code-Behind có phần mở rộng là .cs hoặc .vb tùy theo ngôn ngữ, còn phần hiển thị sẽ chứa trong một tập tin khác có phần mở rộng là aspx. Điều này giúp cho việc phát triển một trang web trở nên rõ ràng hơn và dễ quản lý hơn. Trong PHP hoặc JSP, các đoạn code server được nhúng trực tiếp với mã HTML của trang). Chúng ta mở tập tin này ra và thêm vào trong hàm xử lý sự kiện Page_Load như sau:

protected void Page_Load(object sender, EventArgs e)
{
    DataBind();
}

Khi phương thức này được gọi, Server sẽ phân tích đoạn mã đánh dấu của trang ASPX và xử lý các biểu thức Data Binding trên trang web.

Lúc này, sau khi Build lại ứng dụng (nếu như các bạn không thực hiện việc Build lại thì các đoạn mã trong tập tin Code-Behind vẫn chưa được biên dịch, nghĩa là ứng dụng vẫn sử dụng các đoạn mã của lần biên dịch trước đó) và chạy trang Web thì chúng ta sẽ nhận được chuỗi thời gian hiện tại. Nếu như chúng ta View Source của trang web thì ta sẽ thấy rằng biểu thức này đã được thay bằng một chuỗi.

image

Và tất nhiên, mỗi lần Refresh lại trang web thì biểu thức DateTime.Nowđược đánh giá lại và dữ liệu trên trang web cũng được cập nhật.

  • Binding với các thuộc tính (Property)Nếu bạn chưa biết Property là gì, xem bài viết: Property trong C#

    Ví dụ trên mô tả về việc đưa giá trị của thuộc tính nào đó lên trang web một cách vô cùng đơn giản mà không cần phải viết mã trong tập tin Code-Behind. Vì vậy, chúng ta có thể Binding với một thuộc tính bất kỳ miễn sao thuộc tính này chúng ta có thể truy cập được trong ASP.NET. Ví dụ, biểu thức sau cho phép chúng ta hiển thị tên trình duyệt đang được sử dụng, phiên bản trình duyệt và hệ điều hành thông qua thuộc tính của đối tượng Request.Browser có sẵn trong ASP.NET

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DataBindingDemo.aspx.cs" Inherits="TestASPNET.DataBindingDemo" Trace="false"%>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            Tên trình duyệt: <%# Request.Browser.Browser %> <br /> Phiên bản: <%# Request.Browser.MajorVersion %> <br /> Hệ điều hành: <%# Request.Browser.Platform %> <br />
        </div>
        </form>
    </body>
    </html>

    Và tất nhiên, giả sử như trang chúng ta đang phát triển có một thuộc tính (Property) nào đó thì chúng ta hoàn toàn có thể Bind thuộc tính này lên trang ASPX. Ví dụ chúng ta tạo một thuộc tính trong tập tin Code Behind như sau:

    public string MyName
    {
        get { return "Xuan Chien"; }
        set{}
    }

    Thuộc tính này đơn giản trả về chuỗi “Xuan Chien”. Tương tự với các ví dụ trên, chúng ta sẽ sử dụng biểu thức <%# %> để đưa thuộc tính này hiển thị lên trang web. Các bạn thay các biểu thức Data Binding ở trên bằng biểu thức sau:

    <%# MyName %>

    Build lại ứng dụng và chạy trang web, ta sẽ có được dòng chữ “Xuan Chien” hiển thị trên trang đó.

    image

  • Gắn Binding với thuộc tính của các Control

    Không những được dùng để hiển thị trực tiếp trên trang web, chúng ta có thể sử dụng các biểu thức Data Binding này để đưa giá trị cho thuộc tính của các control như TextBox, Label, CheckBox. Ví dụ sau Bind thuộc tính MyName ở trên cho giá trị thuộc tính Text của một TextBox

<asp:TextBox runat=”server” id=”txtName” Text=”<%# MyName %>” />

Khi chạy trang web thì chúng ta nhận được kết quả

image

Lưu ý là lúc này không phải hiển thị trực tiếp dữ liệu lên trang web mà là hiển thị thông qua thuộc tính của một Control. Bằng cách View Source của trang web trên thì ta thấy rõ điều đó, nội dung “Xuan Chien” được hiển thị  thông qua một control HTML là <input>.

  • Binding một phương thức Bên cạnh sử dụng các Properties để Binding, chúng ta còn có thể sử dụng các phương thức trong trang hiện tại để Binding cho các thành phần trên trang web. Trong ví dụ sau, chúng ta viết một phương thức nhận giá trị là một chuỗi và trả về giá trị “Hello “ + chuỗi đó.
    public string SayHello(string name)
    {
        return "Hello " + name;
    }

    Sau khi đã có phương thức trong Code-Behind, chúng ta sẽ Bind phương thức này với Control Label để hiển thị lên phần giao diện. Và chúng ta cũng kết hợp với việc Binding Properties ở trên ngay trong khi gọi phương thức với đối số đầu vào là Properties MyName đã tạo:

    <asp:Label runat=”server” ID=”lblHello” Text='<%# SayHello(MyName) %>’ />

    Kết quả có được là:

    image

Kết luận: Data Binding là một trong những bước cơ bản để làm việc với dữ liệu trong ASP.NET cũng như các ứng dụng trên Windows. Bài hôm nay giới thiệu cho các bạn cách thức Bind những dữ liệu đơn giản từ nội bộ trang Web. Trong những bài sau, chúng ta sẽ tìm hiểu về những Control chuyên dùng để có thể hiển thị dữ liệu lên những giao diện phức tạp như GridView, FormView. Happy day and code well….

Tác giả: xuanchien

Tran Xuan Chien. Japan Advanced Institute of Science and Technology - Japan. Senior Developer - NUS Technology.

8 thoughts on “Data Binding trong ASP.NET”

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