Bài giảng Phát triển Web nâng cao - Chương 7: Kết gán dữ liệu

CHƯƠNG VII:

KẾT GÁN DỮ LIỆU
Lý thuyết : 3 tiết
Thực hành 12 tiết


Data Controls





DataGrid=Table(động được tạo trên server)
Repeater
DataList
GridView


Các properties của Data Controls
Properties

DataList

DataGrid

Column Layout(sắp xếp theo cột)

X

 

Paging(Hiển thị số trang)

 

X

Select/Edit/Delete

X

X

Sort

 

X

Style Properties(Kiểu cách)

X

X

Table Layout(Hiển thị kiểu Bảng)

 

X

Template(Sử dụng khuôn mẫu)

X

X


DataGrid


Ý nghĩa: Cung cấp một dạng bảng
tính dữ liệu từ data source





Gồm tập các cột, một header, một footer.
Các cột có thể tự động tạo hoặc tường minh

Thuộc tính:

HeadText
DataField
…….
DataField

Student ID
03CDTH892

…….
03CDTH632

<asp:BoundColumn DataField=“IDs” HeadText=“Student ID” />


Properties

Descriptions

AutoGenerateColumns

Tạo column tự động()

Column(Design & Coding)

 

•

Bound Column

Cột dữ liệu

•

Button Column

Cột dạng Button

•

HyperLink Column

Cột dạng Liên Kết

•

Template Column

Cột tự thiết kế

EditItemStyle

Định dạng cho Item

Header Style(Show Footer: true)

Định dạng Header

Footer Style(Show Header: true)

Định dạng Footer

GridLines

Hiển thị dạng lưới


Ví dụ:



Tạo điều khiển (Design)
id="dgAuthors"runat="server"
runat="server"/>
/>

Ràng buộc vào DataReader/Dataset:
dgAuthors.DataSource
(Coding)
dgAuthors.DataSource
dgAuthors.DataSource==ds.Table[0];
ds.Table[0];
dgAuthors.DataSource==dr;
dr;


dgAuthors.DataBind();
dgAuthors.DataBind();

dgAuthors.DataBind();
dgAuthors.DataBind();


Data Grid – Ví dụ
GridLines=None
AutoGenerateColumns=false

CellSpacing=2
HeaderStyle-BackColor=limegreen
FooterStyle-BackColor=thistle
ShowFooter=true
HorizontalAlign=Center
ItemStyle-BackColor=moccasin
ItemStyle-HorizontalAlign=Center>
<Columns>
<asp:BoundColumn HeaderText="Employee Name" DataField="Name" />
<asp:BoundColumn HeaderText="Age" DataField="Age" />
</Columns>
</asp:DataGrid>


DataGrid Editing


Sử dụng EditCommandColumn
 Thuộc
tính
EditItemIndex
(-1
->khơng có dịng nào được hiệu chỉnh)
 EditCommandColumn hiển thị 3 liên
kết tương ứng 3 sự kiện: EditCommand,
UpdateCommand, CancelCommand


DataGrid Editing






DataGridCommandEventArgs chứa
thơng tin của dịng sẽ được hiệu chỉnh
Thuộc tính DataKeyField thiết lập
khóa chính
Sự kiện UpdateCommand, truy xuất
tập các DataKeys để thao tác trên
khóa chính


DataGrid các sự kiện
OnEditCommand=“FunctionEdit"
OnCancelCommand=“FunctionCancel“
OnPageIndexChanged=“FunctionPage"
OnDeleteCommand=“FunctionDelete"
OnItemCommand=“FunctionCommand"


Hiệu chỉnh dữ liệu - DataGrid

<form runat="server">
OnEditCommand="gd1_Edit"
OnCancelCommand="gd1_Cancel"
OnUpdateCommand="gd1_Update"
DataKeyField="ID">

other style properties not shown

<Columns>
UpdateText="Update" ItemStyle-Wrap="false"/>
</Columns>
</asp:datagrid>
</form>


Hiệu chỉnh DataGrid – Mã lệnh
protected override void OnLoad(EventArgs e) {
if (!IsPostBack)
BindGrid();
base.OnLoad(e); }
public void gd1_Edit(object src,
DataGridCommandEventArgs e) {
gd1.EditItemIndex = (int)e.Item.ItemIndex;
BindGrid();
}
public void gd1_Cancel(object src,
DataGridCommandEventArgs e) {
gd1.EditItemIndex = -1;
BindGrid();
}


Hiệu chỉnh DataGrid – Mã lệnh (tt)
public void BindGrid()

{ // kết nối;
OleDbDataAdapter da =
new OleDbDataAdapter("select *
from Employees", dsn);
DataSet ds = new DataSet();
da.Fill(ds, "Employees");
gd1.DataSource=ds;
gd1.DataBind();
}


Đặc điểm khác của DataGrid


Tùy biến giao diện DataGrid
 ButtonColumn: hiển thị nút nhấn nhằm thực
thi một lệnh nào đó.
 Thuộc tính AllowSorting: hiển thị tiêu
đề cột như một siêu liên kết.
 Thuộc tính SortField : chỉ ra field được
sắp xếp.


Thực hành: Sử dụng DataGrid







Tạo một OleDbConnection
Tạo một OleDbCommand
Tạo a DataReader
Kéo một DataGrid vào Web
Form
Ràng buộc DataSource của
DataGrid vào DataGrid


Repeater




Ý nghĩa:
 Ràng buộc dữ liệu từ danh sách các item. Hiển thị
dữ liệu dựa trên các phần tử HTML
Templates:


DataBinder


Phân tích và đánh giá biểu thức ràng
buộc dữ liệu
 Tính tốn biểu thức ràng buộc dữ liệu để
rút trích dữ liệu đúng trong template
 Container.DataItem trả về đối tượng
Object

 DataBinder.Eval() là hàm tĩnh sử dụng
Reflection
 Không quan tâm đến kiểu của nguồn dữ
liệu (data source)


DataBinder – Ví dụ
<asp:Repeater id="rp1" runat="server">
<ItemTemplate>
<%# DataBinder.Eval(Container.DataItem,
"Name") %>

<%# DataBinder.Eval(Container.DataItem,
"Age","{0:2d}") %>


</ItemTemplate>
</asp:Repeater>


A Repeater control in use

<asp:Repeater id="rp1" runat=server>
<ItemTemplate>
<%# DataBinder.Eval(Container.DataItem, "Name") %> is a
<%# DataBinder.Eval(Container.DataItem, "Breed") %>
and looks like this:
ImageUrl=<%# DataBinder.Eval(Container.DataItem, "Image") %> />
</ItemTemplate>
<SeparatorTemplate><hr/></SeparatorTemplate>
</asp:Repeater>

DataList


Sử dụng DataList hiển thị dữ liệu từ
data source
 Sử dụng khi hiển thị dữ liệu dạng danh
sách (tương tự dạng Table)
 Đơn giản hơn DataGrid
 Ít nhất có ItemTemplate
 Mỗi template có kiểu dáng riêng
(HeaderStyle và ItemStyle)


DataList – Ví dụ
RepeatDirection=Horizontal>
<ItemTemplate>
<div style="padding:15,15,15,15">
ImageUrl=<%# DataBinder.Eval(Container.DataItem, "Image") %> /
>


<b>Name: </b><%# DataBinder.Eval(Container.DataItem, "Name")
%>

<b>Breed: </b><%# DataBinder.Eval(Container.DataItem, "Breed") %>
</ItemTemplate>
</asp:DataList>

Ràng buộc dữ liệu từ Data
Reader


Thiết lập thuộc tính
Thu
Thuộộcc tính
tính



Mơ
Mơ tả
tả

DataSource
DataSource

 Ngu
Nguồồnnddữữ liliệệuu

DataTextField
DataTextField

 Field
Field trong
trong DataTable
DataTable đđượ
ượcchihiểểnnththịị

DataValueField
DataValueField

 Field
Field trong
trong DataTable
DataTable trtrởởthành
thànhgiá
giá trtrịịccủủaa item
item

Gọi phương thức DataBind
Id.DataSource
Id.DataSource == dr;
dr;
dgEmp.DataBind();
dgEmp.DataBind();


Minh họa: Điều khiển DataGrid





Sử dụng AutoFormat
Thiết lập Tiêu đề cột
Phân trang
Sắp xếp

Dataset là gì?
DataSet
DataTable
DataTable

DataTable

OleDbDataAdap
ter
OleDbConnectio
n

OleDb Server 2000

Bộ nhớ
Thiết bị lưu trữ
OleDbDataAdapter

OleDbConnectio
n

OleDb Database


Truy cập dữ liệu với ADO.NET
11
1.

Yêu cầu từ Client

2.
22

Tạo đối tượng kết nối OleDbConnection và OleDbDataAdapter

3.
33

Điền dữ liệu vào DataSet từ
DataAdapter, đóng kết nối
Trả DataSet cho Client

4.
44
5.
55
6.
66
7.
77

Client thao tác dữ liệu

Web
Webserver
server

Database

OleDbConnecti
on
OleDbDataAda
pter

Cập nhật DataSet
Sử dụng OleDbDataAdapter để
mở OleDbConnection, cập nhật
cơ sở dữ liệu và đóng kết nối

List-Bound
List-Bound
Control
Control

Client
Client

DataSet