để kết nối đến cơ sở dữ liệu và hiển thị dữ liệu lên trang web trong asp
TRANSCRIPT
Để kết nối đến cơ sở dữ liệu và hiển thị dữ liệu lên trang web trong ASP.NET, chúng ta có thể sử dụng các control như GridView, DetailsView… Khi sử dụng các Control này, chúng ta cần chỉ định được nguồn dữ liệu sẽ lấy từ đâu. Một trong những cách chỉ định nguồn dữ liệu là sử dụng hai control: ObjectDataSource và SqlDataSource.
Trước hết, các bạn cần biết rằng đây là những control cho phép chúng ta kết nối đến cơ sở dữ liệu thông qua các thẻ đánh dấu chung với các thẻ HTML, tương tự như khi các bạn sử dụng một ASP.NET control.
1. SqlDataSource Đây là control rất đơn giản và dễ sử dụng. Các bạn chỉ cần biết câu lệnh SQL cần thực thi là có thể kết nối được đến cơ sở dữ liệu. Ví dụ sau sử dụng GridView để hiển thị dữ liệu và SqlDataSource để kết nối đến cơ sở dữ liệu. Các bạn có thể kéo control SqlDataSource từ Toolbox hoặc trực tiếp chỉnh sửa phần mã HTML. Khi bạn kéo control đó vào trong trang Web thì các bạn có thể thực hiện cấu hình kết nối đến dữ liệu bằng cách nhấp vào mũi tên phía góc trên phải của Control và chọn Configure Data Source
Một hộp thoại hiện ra yêu cầu chỉ định chuỗi kết nối đến dữ liệu. Nếu như bạn đã có thiết lập các chuỗi kết nối trước đây thông qua tập tin Web.Config thì các bạn chọn ngay trong danh sách các chuỗi kết nối hiện có. Hoặc bạn có thể nhấp chọn “New Connection” để chỉ định một chuỗi kết nối mới. Trong bài Demo này, tôi sẽ sử dụng chuỗi kết nối đến CSDL AdventureWorks
Nhấn Next. Hộp thoại kế tiếp hỏi bạn có muốn lưu lại chuỗi kết nối này trong file Web.Config hay không. Chúng ta đồng ý và tiếp tục nhấn Next. Hộp thoại mới hiện ra cho phép các bạn chọn bảng dữ liệu cần hiển thị hoặc chọn dữ liệu thông quan câu lệnh SQL
Nếu như bạn muốn tự viết các câu lệnh SQL thì các bạn chọn “Specify a custom SQL statement or stored procedure”. Khi nhấn Next, các bạn sẽ có vùng nhập câu lệnh SQL:
Sau đó, một hộp thoại hiện ra cho phép chúng ta thử nghiệm chọn dữ liệu xem câu truy vấn có hoạt động như mong đợi hay không.
Nhấn Finish để kết thúc việc cấu hình dữ liệu cho SqlDataSource. Lúc này, chuyển sang xem mã HTML của trang, chúng ta sẽ thấy nội dung như sau:
01<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SqlDataSourceDemo.aspx.cs" Inherits="TestASPNET.SqlDataSourceDemo" %>
02
03 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
04
05 <html xmlns="http://www.w3.org/1999/xhtml">
06 <head runat="server">
07 <title></title>
08 </head>
09 <body>
10 <form id="form1" runat="server">
11 <div>
12 <asp:SqlDataSource ID="SqlDataSource1" runat="server"13 ConnectionString="<%$
ConnectionStrings:AdventureWorksLT2008ConnectionString %>"
14 SelectCommand="Select * from SalesLT.Product"></asp:SqlDataSource>
15 </div>
16 </form>17 </body>18 </html>
Như vậy, mọi thao tác chúng ta làm trên giao diện đều được chuyển thành mã nhúng chung với mã HTML, Visual Studio đã tự động thêm thẻ <asp:SqlDataSource> vào trang web. Nếu bạn là một người không thích làm việc với giao diện thì hãy lưu nhớ thẻ này (mặc dù Visual Studio đã quá mạnh, hỗ trợ luôn cả Intellisense nên bạn không cần nhớ vẫn không sao ^_^)
Việc thiết lập cấu hình kết nối xem như đã hoàn tất, việc kế tiếp là hiển thị dữ liệu này lên trang web. Trong bài này, chúng ta sẽ sử dụng GridView để hiển thị dữ liệu dưới dạng bảng. Từ ToolBox, kéo thả vào trang control GridView
Theo mặc định thì GridView này chưa được chỉ định nguồn dữ liệu hiển thị. Chúng ta chọn trong phần “Choose Data Source” tên của control SqlDataSource mà ta đã tạo trước đó để cho biết rằng dữ liệu của GridView sẽ được lấy lên thông qua SqlDataSource.
Sau đó, cấu trúc cột của GridView sẽ được thay đổi theo cấu trúc dữ liệu trong Database như hình sau:
Nhấn F5 để chạy trang web, ta được kết quả là:
2. ObjectDataSource
Khác với SqlDataSource khi bạn bắt buộc phải chỉ định câu truy vấn SQL ngay trong control thì ObjectDataSource cho phép bạn sử dụng một phương thức như là bước trung gian truy cập đến dữ liệu. Đây là kiến trúc lập trình khá phổ biến hiện nay khi mà người ta muốn tách biệt thành phần truy cập dữ liệu khỏi thành phần hiển thị nhằm tăng độ linh hoạt cho ứng dụng. Trước hết, chúng ta phải có một phương thức nằm trong một lớp có chức năng lấy dữ liệu từ Database.
Nhấp chuột phải lên Project, chọn Add –> New Item. Tạo một class mới có tên là MyDataSource với nội dung như sau:
01 using System.Data;
02 using System.Data.SqlClient;
03
04 namespace TestASPNET
05 {
06 public class MyDataSource
07 {
08 public static DataTable GetProducts()
09 {
10 SqlConnection connection = new SqlConnection(@"Data Source=.\SqlExpress; Initial Catalog=AdventureWorksLT2008; Integrated Security=True;");
11 SqlDataAdapter da = new SqlDataAdapter("Select * from SalesLT.Product", connection);
12 DataSet ds = new DataSet();
13 da.Fill(ds, "Product");
14 return ds.Tables["Product"];15 }
16 }
17 }
Tên namespace của bạn có thể không giống với ứng dụng này, nhưng điều đó không ảnh hưởng đến chức năng của ứng dụng. Như ta thấy, trong lớp MyDataSource chúng ta có một phương thức tĩnh là GetProducts(). Phương thức này lấy toàn bộ dữ liệu từ bảng Product trong cở sở dữ liệu AdventureWorks và trả về dữ liệu kiểu DataTable. Nếu bạn chưa biết cách thức kết nối và lấy dữ liệu ra như trên thì bạn có thể tham khảo trong bài viết: Tìm hiểu về ADO.NET
Bây giờ, hãy biên dịch ứng dụng này để thông tin về lớp MyDataSource được đưa vào trong Assembly và có thể được truy cập bởi các thành phần ObjectDataSource mà ta sắp sử dụng. Từ ToolBox, các bạn kéo công cụ ObjectDataSource thả vào trong giao diện trang web và thực hiện cấu hình control đó:
Lúc bấy giờ, một hộp thoại sẽ hiện ra yêu cầu bạn chỉ định nơi (hay nói chính xác hơn là lớp) chứa phương thức sẽ lấy dữ liệu. Bạn chọn dòng có tên lớp MyDataSource mà đã được tạo ra trước đó:
Trong hộp thoại kế tiếp, bạn chọn tên của phương thức lấy dữ liệu mà bạn đã viết trước đó. Trong các ứng dụng thực tế thì một lớp có thể chứa nhiều phương thức khác nhau để lấy dữ liệu và ta sẽ phải chọn một phương thức phù hợp. Các phương thức này bắt buộc phải có kiểu dữ liệu trả về là dữ liệu dạng IEnumarable (các dạng dữ liệu kiểu tập hơp mà bạn có thể duyệt và truy xuất đến từng phần tử bên trong) hoặc DataSet
Nhấn Finish để hoàn thành việc cấu hình kết nối đến Database cho control ObjectDataSource. Tiếp đến, để hiển thị dữ liệu lên trang web thì tôi sử dụng GridView và chỉ định nguồn dữ liệu của GridView này là tên của ObjectDataSource đã tạo ra trước đó (tương tự như khi bạn sử dụng SqlDataSource).
Nhấp chuột phải lên tên trang web trong cửa sổ Solution Explorer và chọn View in Browser (phím tắt là Ctrl + Shift + W), chúng ta sẽ có được kết quả tương tự như khi sử dụng
SqlDataSource
Một số lợi ích của ObjectDataSource so với SqlDataSource là:
- Mã nguồn của trang web sẽ gọn hơn nhiều so với việc sử dụng SqlDataSource do không phải chỉ định các câu lệnh SQL dài dòng ngay trong mã HTML
- Kiến trúc ứng dụng sẽ rõ ràng hơn nhờ tách biệt thành phần hiển thị và thành phần truy cập dữ liệu. Nếu như có sự thay đổi về dữ liệu thì chỉ cần sửa trong phương thức lấy dữ liệu mà không cần chỉnh sửa lại giao diện
- Một phương thức truy cập duy nhất có thể được sử dụng bởi nhiều ObjectDataSource khác nhau, từ đó tránh trùng lặp mã nguồn.
Kết luận: Nếu như bạn muốn phát triển một ứng dụng có kiến trúc phân chia thành nhiều lớp khác nhau (ví dụ như mô hình 3-layer) thì ObjectDataSource sẽ là lựa chọn tối ưu. Tuy nhiên, đối với các ứng dụng nhỏ và đơn giản thì SqlDataSource sẽ được sử dụng vì các bạn chỉ cần biết câu lệnh SQL là đủ, không cần phải viết mã C# hoặc VB.NET truy cập đến dữ liệu.