Sử dụng GridView trong ASP.NET


Khi bạn có nhu cầu hiển thị dữ liệu dưới dạng bảng gồm nhiều dòng dữ liệu thì GridView chính là lựa chọn phù hợp nhất. Control này cho phép hiển thị nhiều dòng dữ liệu, hỗ trợ phân trang và cho phép định dạng theo ý muốn nội dung trong từng cột.

Trước hết bạn phải hiểu rõ khi nào thì sử dụng GridView. Đó là khi bạn muốn dữ liệu của mình (thuộc dạng danh sách hoặc tập hợp) hiển thị nhiều dòng trong một bảng với tiêu đề bên trên. Ví dụ như trang web sau sử dụng GridView để hiển thị danh sách khách hàng

Để minh họa việc sử dụng GridView, chúng ta sẽ cùng tạo một ứng dụng ASP.NET đơn giản. Cơ sở dữ liệu được sử dụng sẽ là AdventureWorks. Nếu bạn chưa có CSDL này thì có thể tải về tại địa chỉ sau: http://msftdbprodsamples.codeplex.com/

Bây giờ các bạn hãy tạo một trang web ASPX trống hoàn toàn, sau đó kéo thả control GridView trong Toolbox vào giao diện của trang web

image

Nhấn vào mũi tên nhỏ góc trên bên phải của GridView các bạn sẽ có khung nhỏ cho phép chọn nguồn dữ liệu của GridView. Vì hiện tại chúng ta chưa tạo bất cứ các Control để kết nối dữ liệu (như ObjectDataSource, SqlDataSource..) cho nên trong danh sách “Choose Data Source” các bạn chọn “New Data Source”

image

Ở đây, để đơn giản minh họa cho nhân vật chính là “GridView” nên tạm thời chúng ta không cần phải làm phức tạp thêm các nhân vật phụ, các bạn chọn SqlDataSource, sau đó nhấn OK. Hộp thoại tiếp theo yêu cầu bạn chỉ định kết nối đến cơ sở dữ liệu. Như đã nói ở đầu thì chúng ta sẽ sử dụng Cơ sở dữ liệu AdventureWorks. Nếu trong danh sách kết nối mà vẫn chưa có kết nối đến CSDL này thì các bạn phải tạo mới bằng cách nhấn vào nút New Connection (chi tiết của các thao tác này có thể xem thêm tại bài viết giới thiệu về ADO.NET và sau đó là bài về SqlDataSource).

image

image

Ở phần chọn bảng và các cột cần hiển thị thì chúng ta sẽ chọn bảng Customer và chỉ hiển thị một số cột trong bảng này.

image

image

Chạy thử trang web vừa tạo, bạn sẽ có được một bảng dữ liệu gồm tất cả dữ liệu trong database hiện có của bảng Customer.

 image

Phân trang

GridView hỗ trợ sẵn cho các bạn phân trang dữ liệu được hiển thị nhằm tránh tình trạng số dòng hiển thị quá lớn. Để bật tính năng phân trang của GridView, các bạn nhấp mũi tên góc bên phải của GridView và chọn Enable Paging. Lúc này theo mặc định, GridView sẽ hiển thị tối đa 10 dòng cùng lúc và phần footer của GridView sẽ có thêm các liên kết đến những trang tiếp theo của dữ liệu.

image

Nếu như bạn muốn số lượng dòng hiển thị ở mỗi trang nhiều hơn hoặc ít hơn thì bạn có thể chỉnh thuộc tính PageSize trong khung Properties của GridView

image 

Thử chạy lại trang web này, bạn sẽ thấy danh sách hiển thị đã được phân chia thành nhiều trang khác nhau với số trang được hiển thị thành những liên kết ở phía dưới cùng.

image

Sắp xếp

Tính năng này cho phép bạn sắp xếp theo thứ tự các cột. Khi tính năng này được bật, tiêu đề của mỗi cột sẽ có dạng Hyperlink, nếu như bạn nhấn vào tiêu đề của cột nào thì cột đó sẽ được sắp xếp. Bạn cũng bật tính năng này bằng cách chọn Enable Sorting trong khung cửa sổ nhỏ khi nhấn vào mũi tên ở góc trên bên phải của GridView

image

Kết quả xuất ra là một bảng cho phép bạn sắp xếp nội dung của từng cột. Nếu nhấn lần thứ nhất thì nội dung được sắp xếp tăng dần, nhấn lần thứ hai thì sắp xếp giảm dần

image

 

Tạo cột tự định nghĩa

Khi dữ liệu được lấy từ database được đưa lên GridView thì mặc định GridView sẽ sử dụng chủ yếu là các control Label cho việc hiển thị nội dung (một số trường hợp khác thì GridView tự suy ra control phù hợp, ví dụ như các trường boolean trong CSDL sẽ được hiển thị thành các checkbox…). Vậy giả sử bạn muốn nội dung trong một cột nào đó không phải hiển thị theo cách thông thường mà phải hiển thị nội dung theo cách bạn định nghĩa cho nó thông qua mã HTML. Ví dụ, giả sử trong trường hợp này chúng ta muốn tạo ra thêm một cột là “Full Name”, cột này là kết hợp nội dung của hai cột First Name và Last Name. Các bước thực hiện là như sau

– Chọn chức năng Edit Columns trong hộp thoại nhỏ của GridView

image

– Trong hộp thoại mới hiện ra, chọn TemplateField và nhấn Add để thêm một cột do chúng ta tự định nghĩa nội dung hiển thị, chọn Header của cột TemplateField này là “Full Name”, và sau đó nhấn OK

SNAGHTMLc923e8

– Bây giờ là phần quan trọng nhất, bạn phải viết mã ASPX để hiển thị nội dung cho cột này. Các bạn chuyển sang chế độ chỉnh sửa mã ASPX image. Trong chế độ này, các bạn sẽ thấy là GridView của chúng ta được định nghĩa qua thẻ <asp:GridView>, trong thẻ này sẽ có thẻ <Columns> chứa định nghĩa cho tất cả các cột được hiển thị. Lưu ý là vì ở đây chúng ta đã chọn thuộc tính tự động tạo cột (AutoGenerateColumns = true) dựa vào dữ liệu trong database nên các cột này không cần phải định nghĩa trong thẻ <Columns>. Thẻ <Columns> của chúng ta lúc này chỉ chứa duy nhất định nghĩa cho cột FullName mà thôi. Tuy nhiên, như các bạn thấy là thẻ này vẫn chưa có mã ASPX báo nó biết là hiển thị những gì và hiển thị như thế nào

<asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1" 
    AllowPaging="True" AllowSorting="True">
    <Columns>
        <asp:TemplateField HeaderText="FullName"></asp:TemplateField>
    </Columns>
</asp:GridView>

Để hiển thị FirstName và LastName trong cột này thì chúng ta sẽ sử dụng cú pháp sau đây

<asp:TemplateField HeaderText="FullName">
    <ItemTemplate>
        <%# Eval("FirstName") %>,
        <%# Eval("LastName") %>
    </ItemTemplate>
</asp:TemplateField>

Thẻ <ItemTemplate> cho biết rằng nội dung bên trong thẻ này sẽ được hiển thị khi GridView ở chế bộ hiển thị bình thường với dữ liệu ở mỗi dòng (GridView còn có các chế độ như Update, Insert). Cú pháp Eval được sử dụng để lấy dữ liệu của thuộc tính được chỉ định, trong trường hợp này, chúng ta sẽ lấy ra giá trị của thuộc tính FirstName và LastName của mỗi dòng được hiển thị trên GridView. Các bạn có thể xem thêm về Data Binding tại đây: Data Binding trong ASP.NET

Chạy trang web vừa được chỉnh sửa, bạn sẽ có thêm được cột FullName với giá trị là sự kết hợp giữa cột FirstName và cột LastName

image

Có thể nói TemplateField cho bạn khả năng tùy biến cực lớn về cách dữ liệu sẽ hiển thị như thế nào trong mỗi ô của bảng. Bạn có thể thay vì hiển thị dạng Text thì hiển thị dưới dạng ảnh (ví dụ hiển thị Avatar của người dùng), âm thanh, ListBox… Điều đó phụ thuộc vào nhu cầu của bạn.

 

Kết luận: Trên đây là một vài tính năng cơ bản về GridView trong ASP.NET. Ngoài ra, GridView còn khá nhiều tính năng hấp dẫn khác đang chờ đợi bạn tìm hiểu. Ta cũng thấy được rằng GridView rất là thích hợp cho việc hiển thị dữ liệu ở dạng bảng. Tuy nhiên, để hiển thị nhiều dòng dữ liệu với định dạng riêng (khác dạng bảng) thì GridView lại không cho phép chúng ta làm điều đó. May mắn là chúng ta còn có Control khác rất mạnh mẽ phục vụ cho nhu cầu này của chúng ta, đó là Repeater. Hy vọng sẽ có dịp bàn về control này trong thời gian gần nhất. Happy Coding.

Tác giả: xuanchien

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

10 thoughts on “Sử dụng GridView trong ASP.NET”

  1. bạn cho mình hỏi nếu mình sử dụng thêm dropdowlist de chon thì gridview thay đổi.mình làm sao khi chọn thì cái gridview hiện theo.

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