gắn kết dữ liệu asp.net dùng gridview, data list

1. CHƯƠNG VII:
KẾT GÁN DỮ LIỆU
Lý thuyết : 3 tiết
Thực hành 12 tiết

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

3. 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

4. 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:
03CDTH632
…….
03CDTH892
Student ID
DataField
…….
DataField
HeadText
<asp:BoundColumn DataField=“IDs” HeadText=“Student ID” />

5. 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

6. Ví dụ:
 Tạo điều khiển (Design)
 Ràng buộc vào DataReader/Dataset: (Coding)
dgAuthors.DataSource = dr;
dgAuthors.DataBind();
<asp:DataGrid id="dgAuthors" runat="server" />
dgAuthors.DataSource = ds.Table[0];
dgAuthors.DataBind();

7. DataGrid – Ví dụ
<form id="form1" runat="server">
<div>
<asp:DataGrid ID="DataGrid1" runat="server"
Style="z-index: 100; left: 55px; position:
absolute;top: 15px">
</asp:DataGrid>
</div>
</form>

8. 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: OnEditCommand,
OnUpdateCommand, OnCancelCommand

9. 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

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

11. Gán dữ liệu Access vào DataGrid
protected void Page_Load(object sender, EventArgs e)
{ String strCon = "Provider=Microsoft.Jet.OleDb.4.0;Data Source = ";
strCon = strCon + Server.MapPath(".") + "App_DataSV.mdb";
OleDbConnection con = new OleDbConnection(strCon);
con.Open();
String strOLE = "select * from tblSinhVien";
OleDbDataAdapter adap = new OleDbDataAdapter(strOLE, con);
DataSet ds = new DataSet();
adap.Fill(ds);
DataGrid1.DataSource = ds; //kết gán dl với GridView có id là GridView1
DataGrid1.DataBind();
}
// lưu ý using System.Data.OleDb;

12. Gán dữ liệu SQL vào DataGrid
protected void Page_Load(object sender, EventArgs e)
{ string strconn = "server=TRUCLY-
PCSQL2005;database=SINHVIEN;uid=sa;pwd=sa";
SqlConnection conn = new SqlConnection(strconn);
string sql = "SELECT * FROM tblsinhvien";
SqlCommand cmd = new SqlCommand(sql, conn);
conn.Open();
SqlDataAdapter adap=new SqlDataAdapter(sql,conn);
DataSet ds = new DataSet();
adap.Fill(ds);
DataGrid1.DataSource = ds; //kết gán dl với DataGrid1
DataGrid1.DataBind();
}

13. Hiệu chỉnh dữ liệu - DataGrid
<form runat="server">
<asp:datagrid id="gd1" runat=server
OnEditCommand="gd1_Edit"
OnCancelCommand="gd1_Cancel"
OnUpdateCommand="gd1_Update"
DataKeyField="ID">
<Columns>
<asp:EditCommandColumn EditText="Edit" CancelText="Cancel"
UpdateText="Update" ItemStyle-Wrap="false"/>
</Columns>
</asp:datagrid>
</form>
other style properties not shown

14. 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();
}

15. Đặc điểm khác của DataGrid
 Tùy biến giao diện GridView
 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.

16. PROPERTY DATAGRID

17. ĐỊNH DẠNG DATAGRID

18. 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 vào
DataGrid

19. 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:

20. DataBinder
 Phân tích và đánh giá biểu thức ràng buộc
dữ liệu
 Tính toá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)

21. DataBinder – Ví dụ
<asp:Repeater id="rp1" runat="server">
<ItemTemplate>
<%# DataBinder.Eval(Container.DataItem,
"Name") %><br>
<%# DataBinder.Eval(Container.DataItem,
"Age","{0:2d}") %>
<br>
</ItemTemplate>
</asp:Repeater>

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

23. 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)

24. DataList – Ví dụ
<asp:DataList id="dl1" runat=server RepeatColumns=2
RepeatDirection=Horizontal>
<ItemTemplate>
<div style="padding:15,15,15,15">
<asp:Image runat=server
ImageUrl=<%# DataBinder.Eval(Container.DataItem, "Image") %> /
>
<br/>
<b>Name: </b><%# DataBinder.Eval(Container.DataItem, "Name")
%><br/>
<b>Breed: </b><%# DataBinder.Eval(Container.DataItem, "Breed") %>
</ItemTemplate>
</asp:DataList>

25. DATALIST

26. Ràng buộc dữ liệu từ Data Reader
 Thiết lập thuộc tính
 Gọi phương thức DataBind
Id.DataSource = dr;
dgEmp.DataBind();
Thuộc tính Mô tả
DataSource  Nguồn dữ liệu
DataTextField  Field trong DataTable được hiển thị
DataValueField  Field trong DataTable trở thành giá trị của item

27. 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

28. OleDb Server 2000
DataSet
DataTable
DataTable
Thiết bị lưu trữ
OleDb Database
OleDbDataAdapt
er
OleDbConnection
DataTable
Bộ nhớ
OleDbDataAdapter
OleDbConnection
Dataset là gì?

29. Truy cập dữ liệu với ADO.NET
Database
4. Trả DataSet cho Client
5. Client thao tác dữ liệu
2. Tạo đối tượng kết nối OleDbConnection và OleDbDataAdapter
3. Điền dữ liệu vào DataSet từ
DataAdapter, đóng kết nối
OleDbDataAdap
ter
OleDbConnecti
on
List-Bound
Control
1. Yêu cầu từ Client
1
2
3
4
5
6. Cập nhật DataSet
7. Sử dụng OleDbDataAdapter để
mở OleDbConnection, cập nhật
cơ sở dữ liệu và đóng kết nối
6
7
Client
Web server
DataSet