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:

03CDTH632

…….

03CDTH892

Student ID

DataField

…….

DataField

HeadText

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

Ràng buộc vào DataReader/Dataset: (Coding)

dgAuthors.DataSource = dr;dgAuthors.DataBind();

dgAuthors.DataSource = dr;dgAuthors.DataBind();

<asp:DataGrid id="dgAuthors" runat="server" /><asp:DataGrid id="dgAuthors" runat="server" />

dgAuthors.DataSource = ds.Table[0];dgAuthors.DataBind();

dgAuthors.DataSource = ds.Table[0];dgAuthors.DataBind();

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>

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

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

GridView các sự kiện

OnEditCommand=“FunctionEdit"OnCancelCommand=“FunctionCancel“OnPageIndexChanged=“FunctionPage" OnDeleteCommand=“FunctionDelete"OnItemCommand=“FunctionCommand"

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_Data\\SV.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;

Gán dữ liệu SQL vào DataGrid protected void Page_Load(object sender, EventArgs e)

{ string strconn = "server=TRUCLY-PC\\SQL2005;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();

}

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

Hiệu chỉnh DataGrid – Mã lệnhprotected 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();

}

Đặ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.

PROPERTY DATAGRID

ĐịNH DạNG DATAGRID

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

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

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>

<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

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ụ<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>

DATALIST

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();Id.DataSource = dr;dgEmp.DataBind();

Thu c tínhộThu c tínhộThu c tínhộThu c tínhộ Mô tảMô tảMô tảMô tả

DataSourceDataSource Ngu n ồ d li uữ ệ Ngu n ồ d li uữ ệ

DataTextFieldDataTextField Field trong DataTable đ c hi n thượ ể ị Field trong DataTable đ c hi n thượ ể ị

DataValueFieldDataValueField Field trong DataTable tr thành giá tr c a itemở ị ủ Field trong DataTable tr thành giá tr c a itemở ị ủ

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

OleDb Server 2000

DataSet

DataTable

DataTable

Thi t b l u trế ị ư ữ

OleDb Database

OleDbDataAdapter

OleDbDataAdapter

OleDbConnection

OleDbConnection

DataTable

B nhộ ớ

OleDbDataAdapterOleDbDataAdapter

OleDbConnection

OleDbConnection

Dataset là gì?

Truy cập dữ liệu với ADO.NETDatabaseDatabase

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ế ố

OleDbDataAdapter

OleDbConnection

List-Bound

Control

List-Bound

Control

1. Yêu c u t Clientầ ừ1111

2222

3333

4444

5555

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ơ ở ữ ệ ế ố

6666

7777

ClientClient

Web serverWeb server

DataSet