CHƯƠNG VII: KẾT GÁN DỮ LIỆU ppt

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ệ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();
}
Đặ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