Sử dụng một điều khiển DataList để truy cập một Cơ- 123docz.net

Sử dụng một điều khiển DataList để truy cập một Cơ sở dữ liệu

Trong mục này bạn sẽ học cách sử dụng một điều khiển DataList để truy cập những hàng trong bảng Products.

Mẹo nhỏ

Một DataList cung cấp bạn khá nhiều tính linh hoạt trong việc trình bày những giá trị cột hơn là một DataGrid.

Thực hiện những bước sau đây:

1. Để tạo dự án mới, chọn File ¾ New Project trong VS .NET. Chọn Visual C# Projects từ vùng Project Types trên bên trái của hộp thoại New Project (dự án mới), và chọn ASP .NET Web Application từ vùng Templates (khung mẫu) bên phải. Nhập vào "http: // Localhost/ DataList- WebApplication" trong Location field (trường định vị). Kích OK để tiếp tục. Dự án mới của bạn sẽ chứa một form trống.

2. Tiếp theo, bạn sẽ thêm một đối tượng SqlConnection và một đối tượng SqlDataAdapter vào form của bạn. Chọn bảng Products trong Server Explorer và kéo nó tới form của bạn.

3. Sau khi bạn kéo bảng Products tới form của bạn, VS .NET tạo ra một đối tượng SqlConnection có tên sqlConnection1 và một đối tượng SqlDataAdapter có tên sqlDataAdapter1.

4. Kích đối tượng sqlConnection1 của bạn để trình bày những thuộc tính cho đối tượng này trong cửa sổ những thuộc tính. Để sqlConnection1 có thể truy cập cơ sở dữ liệu, bạn cần đặt mật khẩu cho kết nối. Thêm pwd= sa; tới thuộc tính ConnectionString.

5. Tiếp theo, bạn sẽ sửa đổi phát biểu SELECT _SQL dùng để truy xuất những hàng từ bảng Products. Kích đối tượng sqlDataAdapter1 của bạn để trình bày những thuộc tính cho đối tượng này. Kích biểu

tượng addition ở bên trái thuộc tính SelectCommand để trình bày những thuộc tính động; một trong số những thuộc tính động là thuộc tính CommandText, chứa phát biểu SELECT. Tiếp theo, kích CommandText rồi sau đó kích nút ellipsis để hiển thị Query Builder. Bạn có thể nhập câu lệnh SQL, hay Bạn có thể xây dựng nó theo cách trực quan. Bỏ chọn tất cả những cột trừ ProductID,

ProductName, QuantityPerUnit, and UnitPrice. Kết quả là trong phát biểu SELECT_ SQL sẽ được thiết lập như sau đây:

SELECT ProductID, ProductName, QuantityPerUnit, UnitPrice FROM Products

6. Kích OK để tiếp tục.

7. Tiếp theo, bạn cần tạo một đối tượng Dataset. Kích một vùng trên form của bạn. Tiếp theo, kích liên kết Generate-Dataset ở đáy của cửa sổ những thuộc tính. điều này hiển thị hộp thoại Generate-Dataset (Phát sinh tập dữ liệu). Chọn nút "New radio " và chắc chắn rằng trường bên phải của nút radio này chứa DataSet1. Kích nút Ok để tiếp tục. Điều này thêm một đối tượng Dataset mới có tên dataSet11 vào form của bạn.

8. Tiếp theo, bạn sẽ thêm một điều khiển DataList vào form của bạn. Để làm điều này, chọn DataList từ Toolbox và kéo nó đến form của bạn. Hình 15.16 cho thấy form với DataList mới.

Hình 15.16: Form với một DataList

9. Tiếp theo, bạn sẽ cần đặt thuộc tính DataSource của DataList của bạn tới đối tượng Dataset của bạn được tạo ra trước đó. Điều này gán nguồn dữ liệu cho DataList của bạn và cho phép những hàng từ Dataset sẽ được trình bày trong DataList của bạn. Để gán thuộc tính DataSource, kích đối tượng DataList của bạn và gán thuộc tính DataSource tới dataSet11. Đồng thời, gán thuộc tính DataMember của DataList tới Products; đây là bảng với những hàng được trình bày bởi DataList.

Một DataList sử dụng những khuôn mẫu mà định nghĩa nội dung của nó sẽ được hiển thị như thế nào, và nhiệm vụ kế tiếp của bạn là thiết lập những khuôn mẫu này.

Mẹo nhỏ:

Đó là những khuôn mẫu DataList mà cho bạn tính linh hoạt cho sự sắp đặt những điều khiển trình bày những giá trị cột.

Bạn sẽ soạn thảo khuôn mẫu định nghĩa đầu mục và cuối mục cho DataList, cùng với khuôn mẫu định nghĩa những tiết mục thực tế được trình bày bên trong DataList của bạn:

1. Để soạn thảo khuôn mẫu đầu mục và cuối mục, nhấn phải DataList của bạn và chọn Edit Template ¾ Header And Footer Templates "Những khuôn mẫu đầu mục và cuối mục".

2. Bạn có thể thêm những điều khiển vào những vùng bên trong những vùng HeaderTemplate và

FooterTemplate. Bất kỳ điều khiển nào bạn thêm vào đều sẽ được trình bày tương ứng tại khởi đầu và kết thúc của DataList. Thêm một nhãn ở HeaderTemplate; bạn làm điều này bởi kéo một điều khiển nhãn từ Toolbox đến vùng trống ở dưới HeaderTemplate. Đặt thuộc tính Text cho nhãn này tới Products. Đồng thời, thêm một nhãn trong vùng FooterTemplate và gán thuộc tính Text của nó tới End of list. Hình 15.17 cho thấy những khuôn mẫu đầu mục và cuối mục được sửa đổi và những điều khiển Nhãn.

Hình dung 15.17: Những khuôn mẫu đầu mục và cuối mục được sửa đổi cùng với những điều khiển Nhãn

Ghi nhớ: Bạn có thể kết thúc sự soạn thảo một khuôn mẫu tại bất kỳ thời gian nào bởi việc nhấn phải DataList của bạn và chọn End Template Editing " kết thúc soạn thảo Khuôn mẫu ".

3. Tiếp theo, bạn sẽ soạn thảo khuôn mẫu “Item” (tiết mục) và thêm những điều khiển “Label” (nhãn ) để hiển thị những cột ProductID, ProductName, QuantityPerUnit, và UnitPrice. Nhấn phải DataList của bạn và chọn Edit Template ¾ Item Templates. Hình 15.18 trình bày “the Item Templates editor” (bộ biên tập khuôn mẫu tiết mục) .

Hình 15.18: Bộ biên tập khuôn mẫu Tiết mục

Như bạn có thể thấy từ Hình 15.18, Bộ biên tập khuôn mẫu Tiết mục được chia vào trong bốn vùng sau đây:

ItemTemplate: chứa những điều khiển mà bạn điển hình thường dùng để trình bày những giá trị cột.

AlternatingItemTemplate: chứa những điều khiển mà được hiển thị sau những điều khiển trong ItemTemplate.

SelectedItemTemplate: chứa những điều khiển được hiện ra khi bạn chọn một tiết mục.

EditItemTemplate: chứa những điều khiển mà được hiện ra khi bạn soạn thảo một tiết mục.

Bạn sẽ thêm một bảng vào vùng ItemTemplate, và sau đó Bạn sẽ thêm bốn điều khiển Label trong những ô của bảng của bạn. Bốn điều khiển Label sẽ trình bày những giá trị cho những cột ProductID, ProductName,

QuantityPerUnit, và UnitPrice. Để thêm một bảng bạn thực hiện như sau:

1. Kích bất cứ nơi đâu trong vùng ItemTemplate và chọn Table > Insert Table. Gán những thuộc tính cho bảng như Hình 15.19.

Hình 15.19: đặt những thuộc tính của bảng

2. Tiếp theo, kéo một Nhãn tới ô đầu tiên trong bảng. Bạn sẽ sử dụng Nhãn đầu tiên này để trình bày cột ProductID. Đặt thuộc tính ID của Nhãn của bạn tới ProductID, như trong Hình 15.20.

Hình 15.20: việc thêm Nhãn

3. Dùng Nhãn để trình bày cột ProductId, bạn sẽ cần kết buộc nhãn tới cột này. Để làm điều này, kích nút ellipsis (...) trong thuộc tính DataBindings. Bạn sẽ thấy hộp thoại DataBindings. Mở nút Container bởi kích biểu tượng addition , rồi mở nút DataItem; cuối cùng, chọn cột ProductID, như như trình bày trong Hình 15.21.

Hình 15.21: Kết buộc Nhãn tới cột ProductID

1. Tiếp theo, thêm ba điều khiển Nhãn nữa vào trong những ô còn lại của bảng . Gán thuộc tính ID cho ba điều khiển Nhãn tới ProductName, QuantityPerUnit, và UnitPrice, tương ứng. Đồng thời, kết buộc toàn bộ những điều khiển Nhãn của bạn tới những cột ProductName, QuantityPerUnit, và UnitPrice, tương ứng.

Cảnh báo: khi bạn thêm những điều khiển Nhãn vào những ô, bạn chú ý là những ô còn lại sẽ co lại. Đề phòng điều này vì nó có thể làm cho việc thêm những điều khiển Nhãn khác một chút khó khăn. 5. Tiếp theo, bạn sẽ sửa đổi HTML cho form của bạn để làm bảng dễ đọc hơn . Bạn sẽ thay đổi những

thuộc tính chiều rộng (width) và viền (border) của thẻ Table và thiết đặt thuộc tính chiều rộng của những thẻ (tags) TD.

Ghi nhớ: thẻ Table định nghĩa một Bảng, và thẻ TD định nghĩa một phần tử trong một hàng.

6. Để nhìn mã HTML của form của các bạn, kích mối liên kết HTML bên dưới cửa sổ thiết kế form để xem mã của form. Gán những thuộc tính chiều rộng và viền của thẻ Table của bạn tới 320 và 1, tương ứng, và gán những thuộc tính chiều rộng của bốn nhãn TD tới 20, 100, 100, và 100, tương ứng. HTML dưới đây cho thấy những sự thay đổi này

<asp:Label id=ProductID runat="server" Text='

<%# DataBinder.Eval(Container, "DataItem.ProductID") %>'> </asp:Label></TD>

<asp:Label id=ProductName runat="server" Text='

<%# DataBinder.Eval(Container, "DataItem.ProductName") %>'> </asp:Label></TD>

<asp:Label id=QuantityPerUnit runat="server" Text='

<%# DataBinder.Eval(Container, "DataItem.QuantityPerUnit") %>'> </asp:Label></TD>

<asp:Label id=UnitPrice runat="server" Text='

<%# DataBinder.Eval(Container, "DataItem.UnitPrice") %>'> </asp:Label></TD>

</TR> </TABLE>

Ghi nhớ: thuộc tính ID của thẻ Table của bạn có lẽ đã khác với mã được trình bày trong mả trước.

Đừng bận tâm đến sự thay đổi thuộc tính ID cho thẻ Table của bạn.

7. Tiếp theo, bạn sẽ cần thêm mã để cư trú sqlDataAdapter1 với những hàng được truy xuất bởi phát biểu SELECT của bạn. Điển hình, sự sắp xếp tốt nhất là đặt mã này trong phương thức Page_Load() của form của bạn. Phương thức Page_Load() được gọi là khi trang Web chứa form của bạn thoạt tiên được tải (initially loaded) hay làm mới lại (refreshed). Mở mã cho form của bạn bởi chọn View > Code, hay nhấn F7 trên bàn phím. Gán phương thức Page_Load() như sau:

private void Page_Load(object sender, System.EventArgs e) {

// Put user code to initialize the page here if (!this.IsPostBack) { sqlDataAdapter1.Fill(dataSet11, "Products"); this.DataBind(); } }

Phương thức Fill() truy xuất những hàng từ bảng Products và cư trú đối tượng dataSet11 với những hàng đó. Rồi phương thức DataBind() sẽ trình bày những hàng trong DataList của form của bạn.

Để chạy form của bạn, chọn Debug ¾ Start Without Debugging, hay nhấn Ctrl+ F5 trên bàn phím . Hình 15.22 cho thấy form đang chạy.

Hình 15.22: form đang chạy

xem mã của form . Danh sách 15.5 trình bày file WebForm1.aspx cho form. Bạn chú ý rằng file này chứa một điều khiển DataList với những cột thích hợp.

Danh sách 15.5: file WebForm1.aspx

<%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false"

Inherits="DataListWebApplication.WebForm1" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > <HTML>

<HEAD>

<title>WebForm1</title>

</HEAD>

<asp:datalist id=DataList1 style="Z-INDEX: 101; LEFT: 33px; POSITION: absolute; TOP: 28px" runat="server"

DataMember="Products" Height="140" Width="297" DataSource=" <%# dataSet11 %>">

<asp:Label id="Label1" runat="server">Products</asp:Label> </HeaderTemplate>

<asp:Label id="Label2" runat="server">End of list</asp:Label> </FooterTemplate>

<TR>

<asp:Label id=ProductID runat="server" Text='

<%# DataBinder.Eval(Container, "DataItem.ProductID") %>'> </asp:Label></TD>

<asp:Label id=ProductName runat="server" Text=' <%# DataBinder.Eval(Container,

"DataItem.ProductName") %>'> </asp:Label></TD>

<asp:Label id=QuantityPerUnit runat="server" Text='

<%# DataBinder.Eval(Container, "DataItem.QuantityPerUnit") %>'> </asp:Label></TD>

<asp:Label id=UnitPrice runat="server" Text='

<%# DataBinder.Eval(Container, "DataItem.UnitPrice") %>'> </asp:Label></TD> </TR> </TABLE> </ItemTemplate> </asp:datalist></form> </body> </HTML>

Sử dụng một điều khiển DataList để truy cập một Cơ sở dữ liệu

Cất giữ thông tin sử dụng thuộctính ViewState

Thêm ShoppingCart (xe đẩy mua hàng)