chuong 5- data controls

Chương 5

CAacuteC ĐIỀU KHIỂN LIEcircN KẾT DỮ LIỆU

Data Controls

1 Điều khiển GridView

2 Điều khiển DataList

3 Điều khiển Repeater

I Điều khiển GridViewGridView dugraveng để hiển thị định dạng vagrave thao taacutec với dữ liệuLưu yacute Tạo 1 csdl bằng Access copy vao thư mục app_data của trang web ta đang tạo

CDocuments and SettingsvdvMy DocumentsVisual Studio 2005WebSitesWebSite1App_Data

bull Chọn nhoacutem đối tượng Data từ toolbox chọn GridView rồi keacuteo vagrave thả trecircn Pagebull Xuất hiện cửa sổ GridView Task chọn DataSource chọn new connections hellip

I11 Cửa sổ thuộc tiacutenh GridView

Cửa sổ Fields sau khi chọn thuộc tiacutenh Columns

Định dạng cho caacutec cộtbull BoundColumn properties Qui định thocircng tin chi tiết cho caacutec cột

ndash HeaderText Footer Text Thocircng tin tiecircu đề trecircndưới của cộtndash Header Image Higravenh hiển thị trecircn tiecircu đề cột (thay thế thocircng tin tiecircu đề

cột - Header Text)ndash Sort Expression Biểu thức sắp xếp của cộtndash Visible Coacute hiển thị cột hay khocircng ndash DataField Tecircn field hay tecircn thuộc tiacutenh của đối tượng dữ liệu cần hiển

thịndash Data formatting expression Biểu thức định dạng dữ liệu

Mẫu định dạng 0ltchuỗi định dạnggt Viacute dụbull Định dạng số 000000 00bull Định dạng ngagravey giờ 0ddMMyyyy 0hhmmss tt

ndash Read Only = Check =gt Cột chỉ được pheacutep đọc NoCheck=gt cho pheacutep cập nhật dữ liệu

ndash Convert this column into a Template Column Chuyển cột hiện hagravenh thagravenh cột dạng Template Column

I12 Quản lyacute phacircn trang (tt)

bull Allow paging Coacute cho pheacutep phacircn trang hay khocircng bull Page size Số dograveng của mỗi trangbull Show navigation buttons Hiển thị bộ nuacutet để di chuyển giữa caacutec

trang hay khocircng (default True)bull Possition Vị triacute hiển thị của bộ nuacutet di chuyển Ở phiacutea trecircn thanh tiecircu

đề ở phiacutea dưới hay cả haibull Mode Higravenh thức hiển thị của bộ nuacutet di chuyển Hiển thị dạng số

trang hay lagrave caacutec chuỗi kyacute tự đại diện (Next pagePrevious page button text) Trong trường hợp hiển thị dạng số Numeric buttons qui định số nuacutet lệnh được hiển thị tối đa

Google hiển thị kết quả được phacircn trang theo dạng số

I13 Format ndash Định dạng GridView

bull Định dạng hiển thị trecircn điều khiển GridView Magraveu chữ magraveu nền Font chữ kiacutech cỡ in đậm in nghiecircnggạch dưới vagrave canh lề

bull GridView Qui định caacutec định dạng chung cho lướibull Header Định dạng cho dograveng tiecircu đềbull Footer Định dạng cho dograveng tiecircu đề dướibull Pager Định dạng cho dograveng chứa caacutec nuacutet lệnh phacircn trangbull Items

ndash Normal Items Định dạng cho caacutec dograveng dữ liệundash Alternating Items Định dạng hiển thị cho caacutec dograveng lẻndash Selected Items Định dạng hiển thị cho dograveng đang được chọnndash Edit Mode Items Định dạng hiển thị cho dograveng đang ở trạng thaacutei hiệu

chỉnh dữ liệubull Columns Qui định độ rộng vagrave caacutec định dạng riecircng cho từng cột

I14 Borders (Khung viền)bull Quản lyacute việc kẻ khung viền cho lưới

Cell marginbull Cell padding Khoảng caacutech giữa nội dung trong ocirc với caacutec đường viền của ocircbull Cell spacing Khoảng caacutech giữa caacutec ocirc

Cell padding = 0 Cell padding = 3 Cell spacing = 3

Viacute dụ Điều khiển GridView sau khi được định dạng

Matilde lệnh xử lyacutePrivate Sub Page_Load(hellip) Handles MyBaseLoad If Not IsPostBack Then

Lien_ket_du_lieu() End IfEnd Sub

Data Source Controls

bull Data source controls khong hiển thị dữ liệu nhưng đại diện cho khung dữ liệu tương ứng viacute dụ business object XML file hay XML Web Service

bull Data source controls cũng cho pheacutep hagraveng loạt thao taacutec trecircn dữ liệu như sorting paging filtering updating deleting vagrave inserting ndash những dữ liệu magrave caacutec data-bound UI controls coacute thể tự đọng sử dung ASPNET coacute những server controls out-of-the-box sau đacircySqlDataSource cho pheacutep kết nối với 1 SQL database như Microsofttrade SQL Server OLEDB ODBC hay OracleObjectDataSource Cho pheacutep kết nối với 1 middle-tier object như data access layer hay business componentAccessDataSource cho pheacutep kết nối với 1 Microsofttrade Access (Jet) databaseSiteMapDataSource cho pheacutep kết nối với 1 ASPNET 20 site navigation providerXmlDataSource kết nối với 1 XML file

SqlDataSource VD sau mocirc tả 1 GridView control gắn với 1 SqlDataSource control Thuộc tiacutenh

SelectCommand xaacutec định SQL select statement để thực hiện khi GridView requests data từ SqlDataSource

lt Page Language=VB gt lthtmlgt

lthead runat=servergt lttitlegtGridView Bound to SqlDataSourcelttitlegt

ltheadgt ltbodygt ltform id=form1 runat=servergt

ltaspGridView ID=GridView1 DataSourceID=SqlDataSource1 runat=server gt

ltaspSqlDataSource ID=SqlDataSource1 runat=server SelectCommand=SELECT [makh] [tenkh][diachi] [mst] FROM [DMKH] ConnectionString=lt$ ConnectionStringsPubs gt gt ltformgt ltbodygt

lthtmlgt

Dugraveng Store Procedurebull Thuộc tiacutenh SelectCommand của SqlDataSource coacute thể lagrave 1 stored procedure thay vigrave

1 SQL command text Để lagravem đc việc đoacute đặt thuộc tiacutenh SelectCommandType = StoredProcedure

hellip ltaspGridView ID=GridView1 DataSourceID=SqlDataSource1

AutoGenerateColumns=False runat=servergt ltColumnsgt ltaspBoundField DataField=ldquo10SanPhamBanChay HeaderText=ldquoSanPham gt ltaspBoundField DataField=ldquoDonGia DataFormatString=0c HeaderText=ldquoGia gt ltColumnsgt

ltaspGridViewgt ltaspSqlDataSource ID=SqlDataSource1 runat=server

SelectCommand=ldquoStr_HangBanChay ConnectionString=lt$ ConnectionStringsQLBanHang gt SelectCommandType=StoredProcedure gt

hellip

UpdateDelete or Insert recordbull SqlDataSource control hỗ trợ thao taacutec Update khi xaacutec lập thuộc tiacutenh

UpdateCommand với Delete =gt DeleteCommand vagrave với insert =gt InsertCommand bằng caacutec cacircu lệnh SQL hay stored procedure tương ứng Caacutec parameters tương ứng với caacutec lệnh coacute thể được truyền bới GridView control (như viacute dụ dưới đacircy) Hoặc ta coacute thể xaacutec định caacutec UpdateParameters DeleteParameters hay InsertParameters collection để xaacutec định giaacute trị cho caacutec parameter

ltaspSqlDataSource ID=SqlDataSource1 runat=server ConnectionString=lt$ ConnectionStringsPubs gt SelectCommand=SELECT [makh] [tenkh] [diachi FROM [dmkh] UpdateCommand=UPDATE [dmkh] SET [tenkh] = tenkh [diachi] =

diachi WHERE [makh] = makh DeleteCommand=DELETE FROM [dmkh] WHERE [makh] = makhldquogt

II Điều khiển DataListII1 Sử dụng DataList để hiển thị dữ liệubull DataList dugraveng để hiển thị dữ liệu ( giống GridView )

Nhưng với DataList ta phải tự thiết kế higravenh thức hiển thị dữ liệu (giống như Template Column của GridView)

bull Một số thuộc tiacutenh cần chuacute yacute của DataListndash RepeatDirection Qui định hướng hiển thị dữ liệu

bull Horizontal Hiển thị dữ liệu theo chiều ngangbull Vertical (mặc định) Hiển thị dữ liệu theo chiều đứng

ndash 1048726 RepeatColumns Qui định số cột hiển thị của DataList

LEnquecircte CorseĐặt mua

UnspeakableĐặt mua

RipperĐặt mua

Bottle RocketĐặt mua

Enduring LoveĐặt mua

The Good ThiefĐặt mua

RepeatColumns = 3

bull Thiết kế higravenh thức hiển thị cho DataList cũng tương tự như thiết kế cho cột Template Column của GridView

bull Chọn Edit Template | ItemTemplate từ thực đơn ngữ cảnh để thực hiện thiết kế higravenh thức hiển thị cho DataList

Selecting Items in DataList

bull Coacute thể chỉnh sửa nội dung vagrave higravenh thức thể hiện của selected item thong qua thuộc tiacutenh SelectedItemTemplate Thuộc tiacutenh SelectedIndex xaacutec định item được chọn ( -1 nếu khocircng coacute Item nao đc chọn) Khi SelectedIndex gt -1 Item đc chọn sẽ đc hiện thocircng qua SelectedItemTemplate

bull Viacute dụ

lt Import Namespace=SystemData gt lthtmlgt ltheadgt ltscript language=VB runat=servergt

Function CreateDataSource() As ICollection Dim dt As DataTable Dim dr As DataRow Dim i As Integer create a DataTable dt = New DataTable dtColumnsAdd(New DataColumn(IntegerValue GetType(Integer))) dtColumnsAdd(New DataColumn(StringValue GetType(String))) dtColumnsAdd(New

DataColumn(DateTimeValueGetType(DateTime))) Make some rows and put some sample data in For i = 1 To 9 dr = dtNewRow()

dr(0) = i dr(1) = Item amp iToString() dr(2) = DateTimeNowToShortTimeString dtRowsAdd(dr)

Next return a DataView to the DataTable CreateDataSource = New DataView(dt)

End Function

Sub Page_Load(sender As Object e As EventArgs) If Not IsPostBack Then

BindList End If

End Sub Sub BindList

DataList1DataSource= CreateDataSource() DataList1DataBind

End Sub Sub DataList_ItemCommand(sender As Object e As DataListCommandEventArgs)

Dim cmd As String = eCommandSourceCommandName If cmd = select Then

DataList1SelectedIndex = eItemItemIndex End If BindList

End Sub ltscriptgt ltheadgt

ltbodygt lth3gtltfont face=Verdanagt

Using a SelectedItemTemplate with DataListltfontgtlth3gt ltform runat=servergt ltfont face=Verdana size=-1gt ltaspDataList id=DataList1 runat=server

BorderColor=black BorderWidth=1 GridLines=Both CellPadding=3 Font-Names=Verdana Font-Size=8pt Width=150px HeaderStyle-BackColor=aaaadd AlternatingItemStyle-BackColor=Gainsboro SelectedItemStyle-BackColor=yellow OnItemCommand=DataList_ItemCommand

gt

ltHeaderTemplategt Items ltHeaderTemplategt ltItemTemplategt ltaspLinkButton id=button1 runat=server Text=Show details

CommandName=select gt lt DataBinderEval(ContainerDataItem StringValue) gt ltItemTemplategt ltSelectedItemTemplategt Item lt ContainerDataItem(StringValue) gt ltbrgt Order Date lt DataBinderEval(ContainerDataItem DateTimeValue 0d)

gt ltbrgt Quantity lt DataBinderEval(ContainerDataItem IntegerValue 0N1)

gt ltbrgt ltSelectedItemTemplategt

ltaspDataListgt ltfontgt ltformgt

ltbodygt lthtmlgt

DetailsView

bull DetailsView lagrave 1 điều khiển giao diện người dugraveng liecircn kết với CSDL noacute hiện 1 bản ghi trecircn 1 trang coacute thể coacute thecircm caacutec nuacutet dịch chuyển để định vị caacutec bản ghi Noacute tựa như Form nhập liệu dạng columnar trong access vagrave thường được dugraveng để cập nhật hay thecircm caacutec bản ghi

bull Người ta thường dugraveng ĐK nagravey trong dạng form chiacutenh ndash phụ khi ma 1 bản ghi được chọn từ điều khiển chiacutenh( viacute dụ GridView) xẽ hiện ra trecircn DetailsView để cập nhật

Viacute dụ tạo 1 gridview va 1 detailsviewkhi nhấn nuacutet Select tren gridView thi noi dung ban ghi hien tren detailview

Ban đầu chọn nguồn cho detailView giocircng của Grdid view sau đoacute sửa DataSourceID=AccessDataSource2rdquo vagrave thecircm đoạn code dưới

ltaspDetailsView ID=DetailsView1 runat=server AutoGenerateRows=False DataKeyNames=makh DataSourceID=AccessDataSource2 Height=50px Width=125pxgt ltFieldsgt ltaspBoundField DataField=makh HeaderText=makh InsertVisible=False ReadOnly=True SortExpression=makh gt ltaspBoundField DataField=tenkh HeaderText=tenkh SortExpression=tenkh gt ltaspBoundField DataField=diachi HeaderText=diachi SortExpression=diachi gt ltaspCheckBoxField DataField=GioiTinh HeaderText=GioiTinh SortExpression=GioiTinh gt ltaspCommandField ShowEditButton=True gt ltFieldsgt ltaspDetailsViewgt ltaspAccessDataSource ID=AccessDataSource2 runat=server

DataFile=~App_Dataqlhhmdb SelectCommand=SELECT [makh] [tenkh] [diachi] [GioiTinh] FROM [dmkh] where [makh]

=makhgt ltSelectParametersgt ltaspControlParameter ControlID=GridView1 Name=makh PropertyName=SelectedValue Type=String gt ltSelectParametersgt ltaspAccessDataSourcegt

Cập nhật dữ liệu trecircn DetailViewltaspDetailsView ID=DetailsView1 runat=server

AutoGenerateRows=False DataKeyNames=makh OnItemUpdated=DetailsView1_ItemUpdated DataSourceID=AccessDataSource2 Height=50px Width=125pxgt

ltFieldsgt helliphellip hellip ltFieldsgtltaspDetailsViewgtltaspAccessDataSource ID=AccessDataSource2 runat=server

DataFile=~App_Dataqlhhmdb SelectCommand=SELECT [makh] [tenkh] [diachi] [GioiTinh] FROM

[dmkh] where [makh] =makh UpdateCommand =Update [DMKH] set [tenkh]=tenkh[diachi]

=diachi gioitinh=gioitinh where [makh]=makhgt ltSelectParametersgt

helliphelliphellipltSelectParametersgt

ltaspAccessDataSourcegt

Sự kiện DetailsView1_ItemUpdated

Thocircng thường data-bound controls sẽ tự động re-bind với nguồn của noacute khi nguồn thay đổi Tuy nhiecircn trong vd nagravey DetailsView được gắn với nguồn data khaacutec với GridView vigrave vậy khi lệnh update đc gọi chỉ coacute DetailsView nhận đc sự thay đổi Để nội dung trecircn GridView cũng thay đổi cần gọi DataBind() cho gridview trong sự kiện ItemUpdated của DetailView

Protected Sub DetailsView1_ItemUpdated(ByVal hellip) GridView1DataBind()

End Sub

Master-Details Insert OnItemInserted=DetailsView1_ItemInserted

InsertCommand=INSERT INTO [DMKH] ( [tenkh] [diachi] [gioitinh]) VALUES ( tenkh diachi gioitinh)

Protected Sub DetailsView1_ItemInserted(hellip) If (Not eException Is Nothing) Then ErrorMessageLabelText = ldquoCoacute lỗi rdquo

eExceptionHandled = True End If GridView1DataBind()

End Sub

Tại sao khocircng insert trường MaKh

FormView bull FormView lagrave 1 Đkhiển giao diện liecircn kết dữ liệu

trong đoacute dữ liệu của mỗi bản ghi thuộc CSDL liecircn kết tương ứng sẽ được trigravenh bagravey trecircn form ta cũng coacute thể thecircm caacutec nuacutet dịch chuyển để định vị caacutec bản ghi ( dang form đơn columnar của access)

bull FormView cũng tựa như DetailsView ngoại trừ việc noacute yecircu cầu người dugraveng phải định nghĩa từng item qua templates thay vi dugraveng caacutec trường data control

Chương 5

I Điều khiển GridView

Slide 3

Slide 4

Định dạng cho caacutec cột



Slide 8

Slide 9


SqlDataSource

Dugraveng Store Procedure

UpdateDelete or Insert record

II Điều khiển DataList

Slide 15

Slide 16


Slide 18

Slide 19

Slide 20

Slide 21

DetailsView

Viacute dụ tạo 1 gridview va 1 detailsview khi nhấn nuacutet Select tren gridView thi noi dung ban ghi hien tren detailview


Cập nhật dữ liệu trecircn DetailView


Master-Details Insert

FormView

Slide 29

I Điều khiển GridViewGridView dugraveng để hiển thị định dạng vagrave thao taacutec với dữ liệuLưu yacute Tạo 1 csdl bằng Access copy vao thư mục app_data của trang web ta đang tạo

CDocuments and SettingsvdvMy DocumentsVisual Studio 2005WebSitesWebSite1App_Data

bull Chọn nhoacutem đối tượng Data từ toolbox chọn GridView rồi keacuteo vagrave thả trecircn Pagebull Xuất hiện cửa sổ GridView Task chọn DataSource chọn new connections hellip





































lthtmlgt







hellip












RipperĐặt mua




RepeatColumns = 3





bull Viacute dụ






End Function


BindList End If










gt






ltbodygt lthtmlgt

DetailsView



















End Sub





End Sub





Chương 5


Slide 3

Slide 4




Slide 8

Slide 9


SqlDataSource




Slide 15

Slide 16


Slide 18

Slide 19

Slide 20

Slide 21

DetailsView






FormView

Slide 29





































lthtmlgt







hellip












RipperĐặt mua




RepeatColumns = 3





bull Viacute dụ






End Function


BindList End If










gt






ltbodygt lthtmlgt

DetailsView



















End Sub





End Sub





Chương 5


Slide 3

Slide 4




Slide 8

Slide 9


SqlDataSource




Slide 15

Slide 16


Slide 18

Slide 19

Slide 20

Slide 21

DetailsView






FormView

Slide 29







hellip












RipperĐặt mua




RepeatColumns = 3





bull Viacute dụ






End Function


BindList End If










gt






ltbodygt lthtmlgt

DetailsView



















End Sub





End Sub





Chương 5


Slide 3

Slide 4




Slide 8

Slide 9


SqlDataSource




Slide 15

Slide 16


Slide 18

Slide 19

Slide 20

Slide 21

DetailsView






FormView

Slide 29












RipperĐặt mua




RepeatColumns = 3





bull Viacute dụ






End Function


BindList End If










gt






ltbodygt lthtmlgt

DetailsView



















End Sub





End Sub





Chương 5


Slide 3

Slide 4




Slide 8

Slide 9


SqlDataSource




Slide 15

Slide 16


Slide 18

Slide 19

Slide 20

Slide 21

DetailsView






FormView

Slide 29





bull Viacute dụ






End Function


BindList End If










gt






ltbodygt lthtmlgt

DetailsView



















End Sub





End Sub





Chương 5


Slide 3

Slide 4




Slide 8

Slide 9


SqlDataSource




Slide 15

Slide 16


Slide 18

Slide 19

Slide 20

Slide 21

DetailsView






FormView

Slide 29






End Function


BindList End If










gt






ltbodygt lthtmlgt

DetailsView



















End Sub





End Sub





Chương 5


Slide 3

Slide 4




Slide 8

Slide 9


SqlDataSource




Slide 15

Slide 16


Slide 18

Slide 19

Slide 20

Slide 21

DetailsView






FormView

Slide 29


BindList End If










gt






ltbodygt lthtmlgt

DetailsView



















End Sub





End Sub





Chương 5


Slide 3

Slide 4




Slide 8

Slide 9


SqlDataSource




Slide 15

Slide 16


Slide 18

Slide 19

Slide 20

Slide 21

DetailsView






FormView

Slide 29




gt






ltbodygt lthtmlgt

DetailsView



















End Sub





End Sub





Chương 5


Slide 3

Slide 4




Slide 8

Slide 9


SqlDataSource




Slide 15

Slide 16


Slide 18

Slide 19

Slide 20

Slide 21

DetailsView






FormView

Slide 29






ltbodygt lthtmlgt

DetailsView



















End Sub





End Sub





Chương 5


Slide 3

Slide 4




Slide 8

Slide 9


SqlDataSource




Slide 15

Slide 16


Slide 18

Slide 19

Slide 20

Slide 21

DetailsView






FormView

Slide 29

DetailsView



















End Sub





End Sub





Chương 5


Slide 3

Slide 4




Slide 8

Slide 9


SqlDataSource




Slide 15

Slide 16


Slide 18

Slide 19

Slide 20

Slide 21

DetailsView






FormView

Slide 29

















End Sub





End Sub





Chương 5


Slide 3

Slide 4




Slide 8

Slide 9


SqlDataSource




Slide 15

Slide 16


Slide 18

Slide 19

Slide 20

Slide 21

DetailsView






FormView

Slide 29





End Sub





Chương 5


Slide 3

Slide 4




Slide 8

Slide 9


SqlDataSource




Slide 15

Slide 16


Slide 18

Slide 19

Slide 20

Slide 21

DetailsView






FormView

Slide 29




Chương 5


Slide 3

Slide 4




Slide 8

Slide 9


SqlDataSource




Slide 15

Slide 16


Slide 18

Slide 19

Slide 20

Slide 21

DetailsView






FormView

Slide 29