Devexpress cho asp.net

1
HƯỚNG DẪN SỬ DỤNG BỘ
CÔNG CỤ DEVEXPRESS
CHO ASP.NET
LƯU HÀNH NỘI BỘ
2010
BIÊN SOẠN : NGUYỄN MAI LĨNH
PHÒNG CÔNG NGHỆ THÔNG TIN – ĐẠI HỌC SƯ PHẠM TPHCM
30/7/2010

2
MỤC LỤC
Phần 1: Cài đặt bộ công cụ DevExpress cho ASP.NET......................................................4
1. Yêu cầu hệ thống......................................................................................................5
1.1. Framework..........................................................................................................5
1.2. IDE......................................................................................................................5
1.3. SQL Server .........................................................................................................5
2. Các thư mục cần sử dụng .........................................................................................5
3. Cấu hình để sử dụng bộ công cụ này trong Microsoft Visual Studio ......................7
Phần 2: Hướng dẫn sử dụng một số Control của Component DevExpress ASP.NET .....12
1. ASPxMenu .............................................................................................................13
1.1. Tổng quan.........................................................................................................13
1.1.1. Đặc điểm....................................................................................................13
1.1.2. Sub-Menus.................................................................................................13
1.1.3. Separators...................................................................................................13
1.1.4. Các thư viện liên kết động cần thiết để triển khai ứng dụng .....................13
1.2. Ví dụ minh hoạ .................................................................................................14
1.2.1. Tạo menu tuỳ ý bằng tay............................................................................14
1.2.2. Tạo menu từ Data source xml....................................................................19
2. ASPxNavBar ..........................................................................................................25
2.1 Tổng quan ............................................................................................................25
2.1.1 Đặc điểm....................................................................................................25
2.1.2 Tính năng của Group .................................................................................26
2.1.3 Các thư viện liên kết động cần thiết để triển khai ứng dụng .....................27
2.2 Ví dụ minh hoạ .................................................................................................27
3. ASPxTabControl ....................................................................................................33
3.1. Tổng quan.........................................................................................................33
3.1.1 Đặc điểm....................................................................................................33
3.1.2 Tính năng của tab.......................................................................................33

3
3.1.3 Các thư viện liên kết động cần thiết để triển khai ứng dụng .....................33
3.2. Ví dụ minh hoạ .................................................................................................34
4. ASPxSchedule........................................................................................................38
4.1. Tổng quan.........................................................................................................38
4.1.1. Đặc điểm....................................................................................................38
4.2. Ví dụ minh hoạ .................................................................................................44
5. ASPxGridView.......................................................................................................58
5.1. Tổng quan.........................................................................................................58
5.1.1. Đặc điểm....................................................................................................58
5.2. Ví dụ minh hoạ .................................................................................................59
5.2.1. Tạo một Control ASPxGridView với Data Source từ Database Access...59
5.2.2. Tạo lưới trình bày dữ liệu theo dạng Master-Detail ..................................65
6. XtraReport ..............................................................................................................84
6.1. Tổng quan.........................................................................................................84
6.1.1. Đặc điểm....................................................................................................84
6.2. Ví dụ minh hoạ .................................................................................................86
6.2.1. Tạo Web Report đơn giản..........................................................................86
6.2.2. Tạo Report dạng bảng và thống kê dữ liệu................................................93
7. ASPxEditors .........................................................................................................101
7.1. Tổng quan.......................................................................................................101
7.1.1. Đặc điểm..................................................................................................101
7.1.2. Một số component trong bộ ASPxEditors...............................................101
7.1.3. Các thư viện liên kết động cần thiết để triển khai ứng dụng ...................102

4
Phần 1: Cài đặt bộ công cụ DevExpress cho ASP.NET
Trong phần này, chúng tôi sẽ trình bày về các yêu cầu cho việc cài đặt bộ
công cụ DevExpress cho ASP.NET và cấu hình cần thiết để có thể sử dụng
bộ công cụ này. Môi trường thử nghiệm của chúng tôi là Microsoft Visual
Studio 2008, .NET Framework 3.5. Phiên bản cài đặt của DevExpress là
v10.1
Nội dung:
• Yêu cầu hệ thống
• Các thư mục cần sử dụng
• Cấu hình để sử dụng bộ công cụ này trong Microsoft Visual Studio

5
1. Yêu cầu hệ thống
1.1. Framework
• Microsoft .NET Framework 2.0 (hoặc cao hơn).
• Microsoft .NET Framework 3.5 Service Pack 1 (hoặc cao hơn).
• Microsoft .NET Framework 4.0
1.2. IDE
Ta có thể sử dụng các IDE sau để phát triển các ứng dụng ASP.NET, sử
dụng các Component DevExpress ASP.NET
• Microsoft Visual Studio 2005.
• Microsoft Visual Web Developer 2005 Express Edition.
1.3. SQL Server
Để chạy các demo của Components DevXpress ASP.NET trên máy local,
cần phải cài đặt một trong các version sau của Microsoft SQL Express:
• Microsoft SQL Server 2005 Express Edition (SP3);
• Microsoft SQL Server 2008 Express Edition (SP1).
2. Các thư mục cần sử dụng
- Khi cài đặt xong bộ công cụ DevX, các tập tin cần thiết để hoạt động
chứa trong thư mục sau:
C:Program FilesDevExpress 2010.1Components
- Đường dẫn chứa các thư viện, các file DLL và XML để triển khai
ứng dụng:
C:Program FilesDevExpress 2010.1ComponentsSources
DevExpress.DLL
- Các Sample mẫu chứa trong thư mục sau:
C:UsersPublicDocumentsDevExpress 2010.1 DemosComponents
- Để xem các demo mẫu, các tài liệu hướng dẫn chi tiết, các video
hướng dẫn thao tác, ta vào trong DemoCenter như hình dưới:

6
Hình 1.1 Truy cập vào DemoCenter của DevX
Đây là giao diện của DemoCenter:

7
Hình 1.2: Giao diện DemoCenter của DevX
3. Cấu hình để sử dụng bộ công cụ này trong Microsoft Visual Studio
Khi cài đặt xong bộ Công cụ DevX, ứng dụng sẽ tự thêm các Components vào
ô Toolbox của Microsoft Visual Studio. Trong trường hợp trong ô toolbox không
xuất hiện các Components của DevX ta có thể chạy một tool kèm theo khi cài đặt
DevX đó là tool Toolbox Creator.

8
Hình 1.3: Truy cập công cụ ToolboxCreator của DevX
Lưu ý:
- Các Control của Component DevExpress ASP.NET bắt đầu bằng
cụm ASPx. Ví dụ như ASPxMenu, ASPxGridView, ASPxNavPanel….
- Từ phiên bản v10.1, khi một Web Control được đưa từ Toolbox vào
trong màn hình Designer của trang web, một section sẽ được tự động tạo ra
bên trong tập tin Web.config. Section này cho phép ta tuỳ chọn cấu hình

9
theo từng chức năng của mỗi control, nội dung section đó như sau:
Đồng thời, khi control được kéo thả vào trong trang web thì assemply
tương ứng sẽ được tự động đăng ký và thêm vào đầu của trang(xem kiểu
Source View) bởi dòng sau, ở đây ta ví dụ thêm vào một control
ASPxGridView :
<%@ Register Assembly="DevExpress.Web.ASPxGridView.v10.1,
Version=10.1.4.0, Culture=neutral,
PublicKeyToken=b88d1754d700e49a"
Namespace="DevExpress.Web.ASPxGridView" TagPrefix="dx"
%>
Tương ứng lúc này, sẽ có một file license.licx được tự động thêm vào
project, trong folder Properties và nội dung của file sẽ có dòng tương ứng
sau:
DevExpress.Web.ASPxGridView.ASPxGridView,
DevExpress.Web.ASPxGridView.v10.1 , Version=10.1.4.0,
Culture=neutral, PublicKeyToken=b88d1754d700e49a

ta
Nội d
a đã thao tá
Hình
dung file lic
c với nhiều
h 1.4: Vị trí
cense.licx có
u control):
10
file license
ó dạng như
e.licx trong
sau(Nội du
project.
ung bên dướới có được kkhi

11
Hình 1.5: Nội dung file license.licx

12
Phần 2: Hướng dẫn sử dụng một số Control của
Component DevExpress ASP.NET
Trong phần này chúng tôi sẽ trình bày các thông tin về một số Control
thường sử dụng trong việc thiết kế một website cũng như cách sử dụng các
Control này. Bên cạnh đó sẽ là những ví dụ minh hoạ cách thao tác với các
control trên để tạo ra các ứng dụng đơn gian cũng và nâng cao.
Nội dung
• ASPxMenu : Giới thiệu và minh hoạ
• ASPxNavBar : Giới thiệu và minh hoạ
• ASPxTabControl : Giới thiệu và minh hoạ
• ASPxScheduler : Giới thiệu và minh hoạ
• ASPxGridView : Giới thiệu và minh hoạ
• XtraReport : Giới thiệu và minh hoạ
• ASPxEditors : Giới thiệu

13
1. ASPxMenu
1.1. Tổng quan
1.1.1. Đặc điểm
Bộ ASPxMenu gồm hai control đơn lẻ là ASPxMenu và
ASPxPopupMenu, bổ trợ cho việc tạo các Menu cố định và cả các
Menu ngữ cảnh động.
• Đặc điểm Control:
o Có thể tạo menu từ Datasource bằng cách khai thác các
cấu trúc tập tin XML hay các bảng của Database.
o Có thể thiết lập một Menu thu hút một cách dễ dàng
chỉ sau vài cái click chuột.
o Có thể thay đổi thể hiện tuỳ thuộc vào từng trạng thái,
thông qua việc tuỳ chỉnh các thuộc tính hay chỉnh sửa các file
CSS.
o Có thể chèn các hình ảnh cần thiết trước phần Text của
từng Item trong menu, có thể tuỳ chỉnh vị trí của Text so với
hình ảnh. Có thể tuỳ chỉnh việc xử lý sự kiện phía người dùng
• Đặc điểm phía người dùng:
o Người dùng có thể sử dụng những sự kiện phía người
dùng để tuỳ chỉnh một tác vụ cho việc ẩn hoặc hiện Sub-Menu
và khi người dùng click vào Menu.
1.1.2. Sub-Menus
• Control dạng Menu mặc định hiện bóng mờ dưới sub-Menu,
ta có thể tắt chức năng đó bằng việc tuỳ chỉnh thuộc tính
ASPxMenuBase.ShowSubMenuShadow. Tương như như cho
PopupMenu.
• Ta cũng có thể tuỳ chỉnh tốc độ mở và đóng các Sub-Menu.
• Ta có thể tuỳ chỉnh cho hiện các ký hiệu ở các menu cấp lớn
hơn cho biết là có các sub-menu ở đó, mặc định là có hiện.
1.1.3. Separators
• Ta có thể thêm các đoạn chia giữa các Item với nhau trong
Menu bằng, hoặc các Item cùng một Item cha. Các chức năng này có
thể tuỳ chỉnh thông qua thuộc tính
ASPxMenuBase.AutoSeparators . Bên cạnh đó, ta có thể tuỳ chỉnh
cho hiện các đoạn chia ở bất cứ nơi nào mình muốn.
1.1.4. Các thư viện liên kết động cần thiết để triển khai ứng
dụng

1.2.
1.
Ta
B
To
• De
các chức
• De
năng liên
• De
lớp để thự
phối hợp.
• Đư
DevExpr
Ví dụ mi
2.1. Tạ
a cần tạo ra
1: Đưa Con
Trong củ
oolbox vào
evExpress.W
năng của cá
evExpress.D
quan tới vi
evExpress.W
ực thi một t
ường dẫn n
ress 2010.1
nh hoạ
ạo menu tu
a Menu như
Hình 2.1
ntrol ASPx
ủa sổ Desi
thẻ div bên
14
Web.vX.Y
ác Control t
Data.vX.Y
iệc quản lý
Web.ASPx
tập các chứ
nơi chứa cá
Compone
uỳ ý bằng ta
ư hình sau:
.1 : Menu n
xMenu vào
ign view,
n trong
.dll: Chứa
trong bộ AS
Y.dll: Chứa
dữ liệu .
xThemes.vX
c năng về tu
ác thư viện
entsSource
ay
ngang và dọ
o giao diện
kéo thả co
các lớp th
SPxMenu.
các lớp thự
X.Y.dll: Ch
uỳ chỉnh gi
n này: C:P
es DevExp
ọc
omponent
hực thi toà
ực thi các
hứa toàn bộ
iao diện và
Program F
press.DLL
ASPxMen
n bộ
chức
ộ các
cách
Files
u từ

B2
bê
Hình
2 : Thêm c
Chọn Me
ên phải của
Hìn
h 2.1.2 : Co
các Item ch
enu đang hi
Menu ở AS
nh 2.1.3 : Và
15
ontrol ASPx
ho Menu
iển thị trên
SPxMenu T
ào chức năn
xMenu trên
màn hình,
Tasks -> C
ng thêm mớ
n màn hình D
nhấn thẻ th
Chọn mục It
ới các Item
Design
hông minh
tem
cho Menu
nằm

16
Lúc này, hiện lên của sổ ASPxMenu MenuItem Editor. Chọn Add
an Item (Icon đầu tiên bên trái) để thêm một Item mới:
Hình 2.1.4 : Thêm Item mới cho Menu
Chọn Item vừa mới thêm, trong phần Properties bên phải, chọn
Nhóm Misc, chọn mục Text và đổi tên Item thành Home.

17
Hình 2.1.5 : Đặt tên cho Item
Tương tự như thế, ta tạo ra thêm các Item cho Menu theo cấu trúc
như sau, lưu ý Scanners và Printers là con của Products, nên ta cần
chọn chức Năng Add a child Item.(Icon thứ 2 từ trái sang)
Hình 2.1.6 : Thêm các Item cho Menu

18
- Để thêm Icon trước mỗi Item, trong Properties ta chọn
Nhóm Image-> Image->URL rồi chọn Icon cần đặt trước Item đó
trong cửa sổ Dialog mở ra.
- Để điều hướng Menu, trong Properties ta chọn nhóm Misc-
>NavigateURL rồi chọn trang để điều hướng tới.
Chọn OK để hoàn tất việc thêm các Item bằng tay
Mặc định Menu mới tạo sẽ nằm ngang, muốn Menu nằm dọc ta chỉ
cần set thuộc tính Orientation của Menu thành Vertical
B3: Tuỳ chỉnh một số thuộc tính của Menu
Tạo các ngăn cách giữa các Item: trong của sổ Design View, chọn
Menu, trong cửa sổ Properties, chọn chức năng AutoSeparators ->
chọn thuộc tính RootOnly để tạo ra các ngăn cách giữa các Menu.
Hình 2.1.7 : tạo ngăn cách giữa các Menu
Orientation: chiều của Menu, Horizontal tương ứng với nằm ngang,
Vertical tương ứng với nằm dọc.
Horizontal align, Vertical Align: canh chỉnh vị trí tương ứng với menu
ngang hay dọc.
ItemImagePosition: Vị trí của Image so với Item, xếp ngang hàng hoặc
trên dưới
Hình 2.1.8 : Image nằm trên Item

H
W
…
1.
D
B
B2
Tạ
>E
tro
Height: Chiề
Width: chiều
….
2.2. Tạ
Ta tạo m
evExpress.
Hình
1: Đưa con
2: Thêm v
ại thư mục
Existing Ite
ong Sample
ều cao của M
u rộng của M
ạo menu từ
menu từ dat
Menu sẽ có
h 2.1.9 : Me
ntrol ASPx
vào DataSo
c App_Dat
em…, thêm
e Code của
19
Menu
Menu
ừ Data sour
ta Source X
ó dạng như
enu có Data
Menu vào
ource XML
ta của proj
m vào file m
DevExpres
rce xml
XML có sẵ
ư sau :
a Souce là fi
giao diện (
L
ject, ta nhấ
menu-struc
ss)
ẵn trong sa
ile XML
(Tương tự n
ấn chuột ph
cture.xml (
ample code
như trên)
hải, chọn A
(file này có
e của
Add-
ó sẵn

Fi
<?
<r
Is
Is
Is
Is
Is
Is
Is
Is
Is
ile menu_st
?xml versi
root>
<menuitem
</menuite
<menuitem
sSeparator
</menuite
<menuitem
sSeparator
<menuit
sSeparator
<menu
sSeparator
</men
<menu
sSeparator
</men
<menu
</men
<menu
sSeparator
</men
</menui
</menuite
<menuitem
sSeparator
</menuite
<menuitem
sSeparator
<menuit
sSeparator
Hình 2.1.
tructure.xm
ion=”1.0”
m Text=”M
em>
m Text=”S
r=”on”>
em>
m Text=”M
r=”false”
tem Text=
r=”false”
uitem Tex
r=”false”
nuitem>
uitem Tex
r=”false”
nuitem>
uitem Tex
nuitem>
uitem Tex
r=”false”
nuitem>
item>
em>
m Text=”S
r=”1”>
em>
m Text=”M
r=”false”
tem Text=
r=”false”
20
10 : Thêm m
ml này có n
” encoding
Menu item
Separator
Menu item
”>
=”Menu ite
”>
xt=”Menu i
”>
xt=”Menu i
”>
xt=”” Valu
xt=”Menu i
”>
Separator
Menu item
”>
=”Menu ite
”>
mới file .xm
nội dung nh
g=”utf-8”
1” Value=
on” Value
2” Value=
em” Value=
item 1” Va
item 2” Va
ue=”2” IsS
item 3” Va
1” Value=
3” Value=
em” Value=
ml vào menu
hư sau:
?>
=”1” IsSe
e=”Separa
=”2”
=”2”
alue=”1”
alue=”2”
Separator
alue=”3”
=”Separat
=”3”
=”1”
u.
eparator=”
atorOn”
r=”true”>
tor1”
”0”>

21
</menuitem>
<menuitem Text=”Menu item” Value=”3”
IsSeparator=”false”>
</menuitem>
</menuitem>
</root>
B3: Chọn file menu_structure.xml làm data source cho Menu.
Từ màn hình Design chọn Menu, chọn thẻ thông minh bên phải của
Menu để mở ASPxMenu Tasks. Trong mục Choose Data Source tại ô
combobox kế bên, nhấp vào và chọn <New Data Souce>
Hình 2.1.11 : Chọn Data Source cho Menu
Lúc này hiện lên cửa sổ Data Source Configuration Wizard, chọn XML
File -> OK

22
Hình 2.1.12 : Chọn XML file làm Data Source
Tại màn hình kế, trong mục Data file, ta nhấp vào nút Browse để chọn file

23
Hình 2.1.13 : Chọn đường dẫn file
Trong thư mục App_Data ở màn hình kế, ta chọn file menu_structure.xml ->
OK
Hình 2.1.14 : Chọn file xml đã thêm vào từ đầu

d
Trong ph
dung từ thà
Lúc này
hần Xpath e
ành phần Me
H
ta có được
Hình
expression
enuItem củ
Hình 2.1.15
Menu từ vi
h 2.1.9 : Me
24
ta gõ vào “
ủa file này là
5 : Nhập vào
iệc khai thá
enu có Data
“root/menu
àm các item
o Xpath exp
c datasourc
a Souce là fi
uitem” để k
m cho Menu
pression
ce là file XM
ile XML
khai thác nộ
u ->OK
ML.
ội

25
2. ASPxNavBar
2.1 Tổng quan
2.1.1 Đặc điểm
ASPxNavBar cho phép ta tạo ra những thông tin ngắn gọn, đặt trong
các ô điều hướng (Navigation bar), tạo nên một giao diện giống như của
Microsoft Outlook Sidebar hay Window Explorer. Control này cho phép
ta thay đổi nhiều tuỳ chọn, và đặt ở bất kỳ nơi nào mong muốn trong
trang web. Giống như các Control khác của DevExpress ASP.NET, nó
hỗ trợ mạnh mẽ công nghệ AJAX và CSS.
• Các thành phần trong một NavBar
Hình 2.2.1: Cấu trúc của một Navbar
Group: Gồm có Group Header và Group Content
Group Header: làm header cho phần nội dung trong Group. Có thể
dùng để mở và đóng group
Group Header Image: hình ảnh hiển trong Group Header
Group Content: Có chứa các Item.
Group Expand Button: nằm bên trong Group Header, dùng để mở
và đóng Group.

26
Item: là phần nội dung bên trong Group Content.
Item Image: Hình ảnh đại diện cho Item.
• Đặc điểm của Control
o Có thể tạo ASPxNavBar từ Datasource để tạo nên các
group và các item bằng cách khai thác các cấu trúc tập tin
XML.
o Ta có thể dễ dàng thay đổi giao diện thể hiện bằng việc
chỉnh sửa các lớp CSS.
o Để có hỗ trợ AJAX ta set thuộc tính EnableCallbacks
thành True, lúc này ASPxNavBar chỉ load nội dung của
Group được mặc định mở chứ không load hết toàn bộ nội
dung của các Group khi hiển thị ở phía người dùng. Khi
người dùng nhấn chọn mở các Group, nội dung bên trong sẽ
được load qua sự kiện callbacks. Một khi nội dung một group
đã được load lên rồi, người dùng có thể mở hoặc đóng tới
Group này mà không phải gọi sự kiện callbacks hay postback
nữa.
o Hình ảnh có thể đi chung với các Items.
o Có thể tuỳ chỉnh vị trí người dùng click vào Item để
thực thi chức năng của Item đó.(Text, hình ảnh hay cả hai).
o Ta có thể tuỳ chỉnh vị trí của hình ảnh so với text của
Item.(Trên, dưới, trái, phải).
o Ta cũng có thể tô đậm, đánh dấu từng Item.
2.1.2 Tính năng của Group
• Dễ dàng chỉnh sửa, thay đổi với trình chỉnh sửa thông minh.
• Có thể tuỳ chỉnh nút đóng/mở cho riêng từng group hay tất cả
các group trong một NavBar.
• Có thể dùng hình ảnh thay cho nút đóng mở group.
• Có thể để link cho một Group Header.
• Group Header có thể vừa có Text và hình ảnh.
• Có thể không cho người dùng mở một group nào đó tuỳ vào
hoàn cảnh.
• Có thể chỉ cần rê chuột tới hoặc click để đóng hoặc mở group.

27
2.1.3 Các thư viện liên kết động cần thiết để triển khai ứng
dụng
• DevExpress.Web.vX.Y.dll: Chứa các lớp thực thi toàn bộ
các chức năng của các Control trong bộ ASPxNavBar.
• DevExpress.Data.vX.Y.dll: Chứa các lớp thực thi các chức
năng liên quan tới việc quản lý dữ liệu .
• DevExpress.Web.ASPxThemes.vX.Y.dll: Chứa toàn bộ các
lớp để thực thi một tập các chức năng về tuỳ chỉnh giao diện và cách
phối hợp.
• Đường dẫn nơi chứa các thư viện này: C:Program Files
DevExpress 2010.1 ComponentsSources DevExpress.DLL
2.2 Ví dụ minh hoạ
Ta cần tạo ra NavBar như hình sau:
Hình 2.2.2 : APSxNavbar
B1: Đưa control ASPxNavBar vào giao diện

28
Trong của sổ Design view, kéo thả component ASPxNavBar từ Toolbox vào
thẻ div bên trong
Hình 2.2.3 : Control ASPxNavBar trên màn hình Design
B2: Thêm các Group trên NavBar
Chọn ASPxNavBar1 trên màn hình Design, chọn thẻ thông minh bên phải
->chọn Groups , hiện lên cửa sổ ASPxNavBar Groups Editor

29
Hình 2.2.4 : màn hình thực hiện chức năng thêm các Group mới
Chọn Add an Item để thêm một Group mới, thay đổi thuộc tính Text để
đặt tên cho từng Group theo cấu trúc sau. Ta cũng lưu ý một số thuộc tính
của Group như là NavigateURL: điều hướng, HeaderImage: Hình ảnh
đại diện cho Group…

30
Hình 2.2.5 : Thêm các Group cho NavBar
B3: Thêm các nội dung bên trong một Group:
Chọn Group Wikipedia, trong phần Properties, nhóm Misc-> mục Items
chọn vào nút browse bên cạnh (Collection). Hiện lên của sổ ASPxNavBar
Items Editor. Ở đây là ta đang thực hiện việc tuỳ chỉnh các Item bên trong
Group Wikipedia.

31
Hình 2.2.6 : Tuỳ chỉnh nội dung bên trong một Group
Chọn Add an Item để thêm một Item mới. Ở đây ta chú ý các thuộc tính
Text:Để đặt tên Item, NavigateURL: Điều hướng, Image: hình ảnh đại diện
cho Item. Tạo Các Item như sau:

32
Hình 2.2.7 : Các Items bên trong một Group
Làm tương tự đối với Group Search, Lưu ý thuộc tính ItemImagePosition để
định vị trí của Text so với hình ảnh đại diện. Chọn OK để tắt cửa sổ
ASPxNavBar Groups Editor. Hoàn tất việc tuỳ chỉnh nội dung của NavBar

33
3. ASPxTabControl
3.1. Tổng quan
3.1.1 Đặc điểm
Bộ ASPxTabControl bao gồm 2 thành phần nhỏ, giúp ta tạo nên các
tab cho trang web của mình. Có thể dùng thành phần APSxTabControl
chỉ để thể hiện các Tab hoặc dùng ASPxPageControl để tạo các tab
cùng với nội dung bên trong của từng tab. Cả 2 thành phần này đều
được hỗ trợ AJAX qua phương thức Callbacks.
• Đặc điểm của Control
o Các templates có thể xác định cho từng tab trong cả
trạng thái kích hoạt hay không kích hoạt.
o Có thể thay đổi giao diện, sự thể hiện của từng thành
phần một cách trực tiếp qua các thuộc tính hoặc qua CSS.
o Nhiều định dạng phong phú, dễ dàng chọn và thay đổi.
o Hỗ trợ hai cách để mở một tab: click chuột hoặc chi rê
chuột lên trên tab.
o Để có hỗ trợ AJAX ta set thuộc tính EnableCallbacks
thành True, lúc này ASPxPageControl chỉ load nội dung của
tab được mặc định mở chứ không load hết toàn bộ nội dung
của các tab khi hiển thị ở phía người dùng. Khi người dùng
nhấn chọn mở các tab, nội dung bên trong sẽ được load qua
sự kiện callbacks. Một khi nội dung một tab đã được load lên
rồi, người dùng có thể mở hoặc đóng tab này mà không phải
gọi sự kiện callbacks hay postbacks nữa.
3.1.2 Tính năng của tab
• Dễ dàng chỉnh sửa, thay đổi với trình chỉnh sửa thông minh.
• Có thể tuỳ chỉnh khoảng cách giữa các tab.
• Dễ dàng tuỳ chỉnh vị trí của các tab.
• Có thể chèn hình ảnh đại diện cho từng tab.
3.1.3 Các thư viện liên kết động cần thiết để triển khai ứng
dụng
các chức năng của các Control trong bộ ASPxTabControl.

3.2.
Ta tạo r
• De
năng liên
• De
lớp để thự
phối hợp.
• Đư
DevExpr
Ví dụ mi
ra Tab có h
evExpress.D
quan tới vi
evExpress.W
ực thi một t
ường dẫn n
ress 2010.1
nh hoạ
hình như sau
Hình
34
Data.vX.Y
iệc quản lý
Web.ASPx
tập các chứ
nơi chứa cá
Compone
u:
2.3.1 : ASP
Y.dll: Chứa
dữ liệu .
xThemes.vX
c năng về tu
ác thư viện
entsSource
PxTabCont
các lớp thự
X.Y.dll: Ch
uỳ chỉnh gi
n này: C:P
es DevExp
trol
ực thi các
hứa toàn bộ
iao diện và
Program F
press.DLL
chức
ộ các
cách
Files

35
Trong của sổ Design view, kéo thả component ASPxPageControl từ
Toolbox vào thẻ div bên trong
Hình 2.3.2 : Control ASPxPageControl trên màn hình Design
B2: Thêm các tabpage
Chọn ASPxPageControl1 , Nhấn thẻ thông minh bên phải bên phải của
Control để mở ASPxPageControl Tasks -> Chọn mục Tabpages để thêm
các Tab mới
Hình 2.3.3: Chọn tabpages để thêm mới các tab

Lúc này
Item để
theo cấu
để chèn h
Sau k
TabP
Ta đư
kích t
Hiện lên củ
thêm một T
trúc sau. T
hình đại diệ
khi hoàn t
Pages Edito
ược màn hìn
thước của c
Hình 2.3
ủa sổ ASPx
Tab mới: th
Ta cũng lưu
ện cho từng
Hình 2.3
ất, Chọn O
or
nh như sau,
các tab
.5 : Các tab
36
xPageCont
hay đổi thu
u ý một số t
g tab.
3.4 : Tạo m
OK để th
, thay đổi th
bpage đã tạo
trol TabPa
ộc tính Tex
thuộc tính c
ới các Tabp
hoát khỏi c
huộc tính W
o trên màn
ages Editor
xt để đặt tên
của Tab nh
page
cửa sổ ASP
Width và He
hình Design
r. Chọn Ad
n cho từng
hư là TabIm
PxPageCon
eight để thay
n
dd an
Tab
mage
ntrol
y đổi

37
B3: Tuỳ chỉnh nội dung bên trong từng tab
Bên trong từng tab, ta có thêm các nội dung tuỳ ý cũng bằng cách kéo
thả, ở đây ta thử thêm vào các hình ảnh:
Hình 2.3.6 : Tuỳ chỉnh nội dung bên trong từng tabpage
Ta cũng có thể thêm các control như ASPxGridView vào nội dung bên
trong tab. Thao tác với GridView bên trong này tương tự như
ASPxGridView bình thường.(Xem thêm về control ASPxGridView)
Lưu ý: để mỗi lần load trang chỉ load nội dung của tab mặc định ta phải
kích hoạt AJAX bằng cách chọn ASPxPageControl-> set thuộc tính
EnableCallBacks=True.

38
4. ASPxScheduler
4.1. Tổng quan
ASPxScheduler giúp tạo ra ứng dụng web giống ứng dụng Calendar
của Microsoft Outlook. Ta có thể tạo các sự kiện (Appointment), các tài
nguyên(Resource) tương ứng theo ngày, theo tuần hay tháng, di chuyển
qua lại giữa các ngày. Control này còn có hỗ trợ AJAX thông qua sự
kiện callbacks.
Bộ ASPxScheduler có rất nhiều thành phần trong đó có Scheduler và
Date Navigator, cho phép thực hiện nhiều tác vụ đến dữ liệu. Dưới đây
là một sô tính năng chính của ASPxScheduler:
• Những tính năng của ASP.NET
o Tương thích với nhiều trình duyệt: Internet Explorer
5.5 +, Mozilla Firefox, Netscape 7.2+, Opera 8+, Safari..
o Hỗ trợ AJAX: ta có thể cập nhật nội dung của Control
thông qua phương thức callbacks, không cần thiết phải load
lại toàn bộ trang.
o Tương tác với người dùng rất đa dạng.
o Hỗ trợ Cookies: cho phép người viếng thăm trang web
và thiết lập các chính sách riêng tư về lập lịch.
• Những chế độ xem (5 trong 1)
o Day View: xem chi tiết các Appointment trong một
ngày cụ thể.

39
Hình 2.4.1 : Xem scheduler dạng Day View
o Work Week View: Thể hiện các Appointment trong
các ngày làm việc một tuần cụ thể hoặc nhiều tuần.
Hình 2.4.2 : Xem Scheduler dạng Work Week View

o
xá
o
thô
so
dù
Week V
c định.
Hình 2.4.3
Month
ông tin các
với các ki
ùng có thể lê
40
View: Thể
3 : Xem Sch
h View: Th
Appointme
iểu hiển th
ên những kế
hiện các A
heduler dạn
hể hiện các
ent hiển thị
ị kia. Tuy
ế hoạch dài
Appointment
ng Week Vi
Appointm
ị theo tháng
nhiên nó c
i hạn.
t trong một
iew
ment theo th
g ít chi tiết
cho phép n
tuần
háng,
nhất
người

H
o
gia
Hình 2.4.4:
Timeli
an biểu.
41
Xem Sche
ine View: T
duler dạng
Thể hiện cá
Month Vie
ác Appointm
ew.
ments theo thời

42
Hình 2.4.5 : xem Scheduler dạng Timeline
• Khai thác dữ liệu
o Khai thác từ Database: Các công việc thực hiện có thể
được truy xuất và lưu trong database.
o Khai thác các trường tuỳ chọn cho vào Appointment:
Ta có thể tuỳ chọn hiển thị thông tin của từng trường cụ thể
lên Appointment.
• Vấn đề Việt hoá Scheduler:
o Khi thực hiện kéo thả Control ASPxScheduler vào
trang web, một loạt các Template dạng UserControl được tạo
ra, mỗi control tương ứng với một form chức năng bên trong
một ASPxScheduler. Mặc định hiển thị trên Scheduler là
tiếng Anh, do đó để hiển thị tiếng việt toàn bộ Scheduler và
những form chức năng thì ta vào từng control và đổi tên các
thành phần hiển thị trong đó sang tiếng Việt bằng cách thay
đổi thuộc tính Display Text của từng thành phần. Ta xem ví
dụ dưới đây là form để thêm một Appointment mới trong
Scheduler

43
Hình 2.4.6: Form thêm mới hay chỉnh sửa một Appoinment.
Ta dễ dàng thay đổi thuộc tính Text của các Label hay button thành tiếng
Việt.
dụng
các chức năng của các Control trong bộ ASPxScheduler.
• DevExpress.Web.ASPxThemes.vX.Y.dll: Chứa các lớp để
thực thi một tập các chức năng về tuỳ chỉnh giao diện và cách phối
hợp.
• DevExpress.Web.ASPxEditors.vX.Y.dll: Chứa các lớp để
thực thi các chức năng để chỉnh sửa dữ liệu trên Scheduler.
• DevExpress.Web.ASPxScheduler.vX.Y.dll: Chứa các
Control ASPxScheduler, ASPxSchedulerStorage,
ASPxDateNavigator, cùng nhiều Control khác nữa trong bộ
ASPxScheduler.
• DevExpress.XtraScheduler.vX.Y.Core.dll: chứa các lớp cơ
bản để thực thi các chức năng chính của bộ ASPxXtraScheduler và
ASPxScheduler

44
4.2. Ví dụ minh hoạ
Ta tạo ra Scheduler như hình sau:
Hình 2.4.7: ASPxScheduler
Trong của sổ Design view, kéo thả component ASPxScheduler từ
Toolbox vào thẻ div bên trong. Lúc này sẽ có một số Templates được tự
động thêm vào project

45
Hình 2.4.8 : Các Template đi kèm với Control ASPxScheduler
Nhấn Close để thoát cửa sổ này.
Lúc này trong box Solution ta sẽ thấy sẽ có thêm một folder mới là
DevExpress, bên trong là folder ASPxSchedulerForm, bên trong folder
này là các Template vừa được thêm vào Project. Lưu ý là các Template
này là để ta thao tác với Scheduler, nếu xoá đi bất kỳ một Template nào
cũng gây ra lỗi cho ứng dụng.

46
Hình 2.4.9: ASPxScheduler trên màn hình Design View
Control ASPxScheduler này có các chể độ xem các ghi chú theo
ngày(Day), theo tuần(Work Week), theo tháng(Month) và Timeline cho
các công việc này. Khi muốn thêm một ghi chú mới hay thực hiện một tác
vụ nào đó ta chỉ việc click chuột phải vào ngày, hoặc giờ trong ngày…
Ta cũng có thể cài đặt chi tiết thời gian của một ngày theo các mức 60
phút, 30 phút.. đến 5 phút.

47
Hình 2.4.10 : Scheduler khi chạy
Giả sử Khi chọn thêm mới một Appointment mới trong một ngày, sẽ
hiện lên một form sau
Hình 2.4.11 : Màn hình thêm mới một Appointment
Điền vào các nội dung trong form rồi nhấn OK để thêm một Appointment
mới.
Tuy nhiên để có thể thực hiện việc thêm một Appointment mới thành
công, ta cần tạo ra datasource để lưu trữ những thông tin này.
B2: Thêm và cấu hình Data Source

Ta sử
sẵn t
Thêm
Tron
Desi
nhấn
ử dụng Dat
trong thư m
m database
Hìn
ng ô Toolbo
ign view. Đ
n chọn thẻ th
tabase Car
mục cài đặt c
CarsDB.m
nh 2.4.12: T
ox, nhóm D
Đổi tên th
hông minh
48
sDB.mdb đ
của DevX.
mdb vào fol
Thêm vào D
Data, kéo t
hành DataS
và chọn Co
để khai thác
der App_D
Data Source
thả AccessD
SourceApp
ofigure Dat
c dữ liệu. D
Data của Pro
e CarsDB.m
DataSource
p. Chọn D
ta Source.
Database nà
oject:
mdb
e vào màn
ataSourceA
ày có
hình
App,

49
Hình 2.4.13: Cấu hình Data Source
Ta lựa chọn DataSource là CarsDB.mdb tương ứng. Nhấn Next.
Trong ô Configure the Select Statement, Chọn bảng CarScheduling và
nhấn chọn các trường cần hiển thị như sau:

50
Hình 2.4.14 : Cấu hình chọn table và các trường tương ứng
Click chọn nút Advance và nhấn vào tuỳ chọn: Generate Insert, Update,
and Delete statements

51
Hình 2.4.14 : Tuỳ chọn nâng cao tạo ra các câu lệnh SQL
Nhấn chọn OK ->Next-> Finish để hoàn tất việc cấu hình DataSourceApp.
Tạo thêm một AccessDataSource đặt tên là DataSourceRes, cũng cấu
hình chọn Database CarsDB.mdb, phần chọn bảng ta chọn bảng Cars và
chọn các trường hiển thị như sau:
Hình 2.4.15 : Cấu hình chọn table và các trường tương ứng

52
B3: Tham chiếu Data Source vào ASPxScheduler tương ứng.
Chọn ASPxScheduler1, nhấp chọn thẻ thông minh, trong phần
Appointments Data Source chọn DataSourceApp, trong phần
Resources Data Source chọn DataSourceRes.
Hình 2.4.16 :Tham chiếu các Data Source vào ASPxScheduler
Set thuộc tính Storage.Appointments.AutoReload = true.
Thuộc tính Storage.Appointments.Mappings ta điều chỉnh như sau:

53
Hình 2.4.17 : Mapping các trường của Appointment
Thuộc tính Storage.Resources.Mappings ta điều chỉnh như sau:

54
Hình 2.4.18 : Mapping các trường của Resource
Để có thể thêm được record mới trong cơ sở dữ liệu, cụ thể là để lưu một
Appoinment mới, trường ID phải là duy nhất, vì trường này ta để chế độ
tăng tự động(Auto Indentity), để thực hiện được điều này ta sử dụng câu
lệnh SQL “SELECT @@IDENTITY”. Chọn DataSourceApp, trong
thuộc tính InsertQuery ta thực hiện như sau:

55
Hình2.4.19 : Tuỳ chỉnh Insert Query
Nhấn OK để hoàn tất việc cấu hình và tham chiếu các Data Source vào
ASPxScheduler.
B4: Xây dựng các phương thức để xử lý các sự kiện thêm và chỉnh sửa
các Appointment.
Trong file source code, ta xử lý các sự kiện như sau:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Data.Sql;
using System.Data.OleDb;
using DevExpress.Web.ASPxScheduler;

56
using DevExpress.Web.ASPxScheduler.Controls;
using DevExpress.XtraScheduler;
namespace Sample1
{
public partial class ASPxSchedule :
System.Web.UI.Page
{
private int lastInsertedAppointmentId;
protected void Page_Load(object sender,
EventArgs e)
{
}
protected void
ASPxScheduler1_AppointmentRowInserting(object sender,
ASPxSchedulerDataInsertingEventArgs e)
{
e.NewValues.Remove("ID");
}
protected void
SqlDataSourceApp_Inserted(object sender,
SqlDataSourceStatusEventArgs e)
{
OleDbConnection connection =
(OleDbConnection)e.Command.Connection;
using (OleDbCommand cmd = new
OleDbCommand("SELECT @@IDENTITY", connection))
{
this.lastInsertedAppointmentId =
(int)cmd.ExecuteScalar();
}
}
protected void
ASPxScheduler1_AppointmentRowInserted(object sender,
ASPxSchedulerDataInsertedEventArgs e)
{
e.KeyFieldValue =
this.lastInsertedAppointmentId;
}

57
protected void
ASPxScheduler1_AppointmentsInserted(object sender,
PersistentObjectsEventArgs e)
{
int count = e.Objects.Count;
System.Diagnostics.Debug.Assert(count ==
1);
Appointment apt =
(Appointment)e.Objects[0];
ASPxSchedulerStorage storage =
(ASPxSchedulerStorage)sender;
storage.SetAppointmentId(apt,
lastInsertedAppointmentId);
}
}
}
Biên dịch và chạy chương trình, lúc này ta đã có thể thêm mới một
Appointment mới cũng như chỉnh sửa thông tin của một Appointment nào
đó.

58
5. ASPxGridView
5.1. Tổng quan
ASPxGridView là một Control rất mạnh, hỗ trợ việc hiển thị dữ liệu
dạng lưới, cho phép ta tạo ra các trường hiển thị bằng tay hoặc thông
qua Database.
• Đặc tính chung
o Tương thích với nhiều trình duyệt: Internet Explorer
5.5 +, Mozilla Firefox, Netscape 7.2+, Opera 8+, Safari..
o Hỗ trợ AJAX: ta có thể cập nhật nội dung của Control
thông qua phương thức callbacks, không cần thiết phải load
lại toàn bộ trang.
o Tương tác với người dùng rất đa dạng.
o Xuất dữ liệu: hỗ trợ xuất dữ liệu ra định dạng PDF,
XLS và RTF
o Hỗ trợ SEO.(Search Engine Optimization): tối ưu hoá
công cụ tìm kiếm.
• Khai thác dữ liệu:
o Hỗ trợ khai thác dữ liệu từ nhiều hệ quản trị csdl khác
nhau: Microsoft Access, SQL Server
o Cho phép hiển thị dữ liệu dạng Master-Detail với cấu
trúc đa dạng.
o Có 2 chế độ chỉnh sửa: từ Form chỉnh sửa hay chỉnh
ngay trên hàng.
o Chức thực dòng dữ liệu và chỉ ra lỗi: ASPxGridView
cho phép ta xác thực bằng tay các dòng đã chỉnh sửa, và hiển
thị thông báo lỗi đối với trường không hợp lệ.
o Tự động gom nhóm dữ liệu: Cho phép người dùng
gom nhóm dữ liệu, không giới hạn số cột.
o Tóm tắt dữ liệu đầy đủ: Cho phép hiển thị thông tin
thống kê như MIN, MAX, AVG, SUM và COUNT trực tiếp
trên lưới.
o Cho phép lọc dữ liệu và hiển thị Text: Với mỗi cột ta
có thể chỉ định cách dữ liệu được sắp xếp theo giá trị hiển thị
của nó. Ngoài ra ta có thể cho phép lọc dữ liệu bất kỳ bằng
cách gõ vào giá trị muốn lọc trực tiếp vào ô textbox.
o Cho phép lựa chọn nhiều dòng cùng một lúc.

59
• Tuỳ biến giao diện hiển thị:
o Giao diện: Ta có thể tuỳ chỉnh giao diện của lứoi bằng
cách chọn các định dạng hiển thị khác nhau, chỉ sau vài cái
click chuột.
o Hỗ trợ các Template: với mỗi thành phần bên trong
ASPxGridView, ta có thể hoàn toàn tuỳ biến việc hiển thị
thông qua các control HTML hay bên phía máy chủ.
o Hỗ trợ CSS đầy đủ.
dụng
• DevExpress.Web.ASPxGridView.vX.Y.dll: Chứa các lớp
thực thi các chức năng của control ASPxGridView.
các chức năng của các Control liên quan tới bộ
ASPxExperience(Menu, NavBar, TabControl)
hợp.
• DevExpress.Web.ASPxEditors.vX.Y.dll: Chứa các lớp để
thực thi các chức năng để chỉnh sửa dữ liệu trên lưới.
5.2.1. Tạo một Control ASPxGridView với Data Source từ
Database Access.
Ta tạo một GridView như hình sau:

B
Tr
To
B2
Hình
1: Đưa con
rong của s
oolbox vào
Hình 2.5.2
2: Thêm và
h 2.5.1 : ví
ntrol ASPx
sổ Design
thẻ div bên
: Control A
à Cấu hình
60
dụ Minh H
NavBar và
view, kéo
n trong
ASPxGridVi
h Data Sour
oạ ASPxGr
ào giao diện
thả comp
iew trên mà
rce
ridView
n
ponent ASP
àn hình Des
PxGridView
sign
w từ

Th
ta
D
Tr
tro
N
D
hêm file dat
thêm file N
evExpress)
rong Toolb
ong.
hấn vào th
ata Source
tabase của A
Nwind.mdb
Hình 2.5.
ox, nhóm D
hẻ thông mi
e
Hình 2.5.4
61
Access vào
(file này có
.3 : Thêm D
Data, kéo th
inh của Ac
4 : Màn hìn
o Trong App
ó sẵn trong
Data Source
hả AccessD
ccessDataSo
nh Cấu hình
p_Data của
Sample Co
e vào projec
DataSource
ource1-> c
h Data Sourc
Project, ở đ
ode của
ct
vào thẻ div
chọn Confi
ce
đây
v bên
igure

62
Nhấn Browse để chọn database, chọn database Nwind.mdb mà ta đã
thêm:
Hình 2.5.5 : Màn hình chọn Database
Nhấn OK ->Next, xuất hiện màn hình để chọn table cần hiển thi, ở đây
ta chọn tables Customers, chọn vào checkbox * để chọn toàn bộ các
trường.

63
Hình 2.5.6 : Chọn table và các trường cần hiển thị
Nhấn next để tiếp tục, ở màn hình kế nhấn Test Query để kiểm tra truy
vấn.

64
Hình 2.5.7 : Màn hình kiểm tra truy vấn
Nhấn Finish để kết thúc việc cấu hình AccessDataSource.
B3: Tham chiếu Data Source vào ASPxGridView
Tại màn hình Design View, chọn ASPxGridView1 mà ta thêm ở trên,
nhấn chọn thẻ thông minh ở cạnh phải -> Phần Choose Data Source ta
chọn AccessDataSource1.

N
G
5.
H
hìn trong A
rid như là:
• Show
• Show
theo từ
• Enabl
• Enabl
• Enabl
lưới
• Enabl
• Enabl
2.2. Tạ
Ta tạo lư
ình 2.5.8 : C
ASPxGridV
Pager: Hiệ
Group Pa
ừng trường
le Editing:
le Inserting
le Selection
le Delete: C
les filtering
ạo lưới trìn
ưới như hìn
65
Chọn Data
iew Tasks t
ện số trang
anel: hiện P
bằng cách
Cho phép c
g: Cho Phép
n: Cho phé
Cho phép xo
g: Cho phép
nh bày dữ l
nh sau:
Source cho
ta thấy có th
của lưới.
Panel bên tr
kéo thả vào
chỉnh sửa d
p thêm mới
ép chọn m
oá một hoặc
p tạo bộ lọc
iệu theo dạ
o Grid
hêm một số
rên Grid để
o Panel đó.
dữ liệu ngay
i record vào
một hoặc nh
c nhiều reco
c theo từng
ạng Master
ố chức năng
sắp xếp dữ
y trên lưới
o table trên
hiều record
ord trên lướ
trường.
r-Detail
g cho
ữ liệu
lưới.
trên
ới

66
Hình 2.5.9 : Lưới dạng Master-Detail
Ta sử dụng Database Nwind.mdb để khai thác dữ liệu.
B1: Thêm và cấu hình Data Source
Tạo ra một AccessDataSoure đặt tên là dsCategories, ta cấu hình cho
hiển thị toàn bộ các trường của bảng Categories trong Database
Nwind.mdb.
Tạo thêm một AccessDataSource đặt tên là dsProducts, trong phần cấu
hình datasource này, ở bước chọn tables, ta chọn tables Products tương
ứng. Tại bước này, ta nhấn vào nút WHERE để thêm mới một session

67
Hình 2.5.10 : Chọn table và các trường tương ứng.
Trong cửa sổ Add WHERE Clause, Mục Collumn chọn CategoryID,
Mục Operator chọn “=”, mục Source chọn Session, trong textbox
Session field ta nhập vào CategoryID, nhấn nút Add để thêm mới
Session

68
Hình 2.5.11: Thêm mới một Session
Nhấn Ok ->Next-> Finish hoàn tất việc cấu hình datasoure dsProducts
B2: Tạo các ASPxGridView Master và Detail và cấu hình tham
chiếu Data Source.
Trong Design View, kéo thả 2 Component ASPxGridView vào trong
thẻ div.
Chọn DataSource của ASPxGridView1 là dsCategories, chọn
DataSource cho ASPxGridView2 là dsProducts.

M
tiế
H
Mở thể thôn
ếp thẻ thông
Hình 2.5.12
ng minh củ
g mình của
69
: GridView
ủa ASPxGr
lưới này, tr
w và DataSo
ridView1 c
rong phần D
ource tương
chọn Edit T
Display chọ
g ứng
Templates.
ọn Detail R
. Mở
Row

K
th
B3
Ch
ta
để
éo ASPxGr
hấy kết quả
Hìn
3: Cấu hìn
họn ASPxG
ab Events,
ể xử lý sự k
Hình 2
ridView2
như sau:
h 2.5.14 : A
nh và xử lý
GridView2
Double clic
kiện này.
70
2.5.13 : Edit
thả vào Det
ASPxGridV
sự kiện
, gán thuộc
ck vào phư
t Template
tail Row củ
View2 trong
tính IsDeta
ơng thức B
ủa ASPxGr
g ASPxGrid
ailGrid là T
eforePerfo
ridView1. T
dView1
True. Tron
ormDataSe
Ta
ng
elect

71
Hình 2.5.15 : Xử lý sự kiện BeforePerformDataSelect
Trong cửa sổ Code, ta xử lý phương thức BeforePerformDataSelect
như sau:
protected void ASPxGridView2_BeforePerformDataSelect(object sender,
EventArgs e)
{

72
Session["CategoryID"]=(sender as DevExpress.Web.
ASPxGridView.ASPxGridView ). GetMasterRowKeyValue () ;
}
Quay trở lại màn hình Design View, chọn thẻ thông minh của
ASPxGridView1 , chọn End Template Editing
Hình 2.5.16 : Màn hình kết thúc việc lồng DetailRow
Gán thuộc tính ASPxGridView1.ShowDetailRow = True;
Hình 2.5.17 : Tuỳ chọn thuộc tính
Biên dịch và chạy chương trình, ta được giao diện như sau:

73
Hình 2.5.18 : GridView dạng Master
Nhấn chọn dấu “+” ở đầu mỗi dòng ta được giao diện như sau:
Hình 2.5.19 : GridView dạng Master-Detail

74
5.2.3. Tạo Contextmenu trong grid
Trong ví dụ này, ta sẽ lồng menu popup vào gridview bằng cách mỗi
lần nhấn chuột phải vào một dòng nhất định, sẽ xuất hiện một menu
ngữ cảnh để thực hiện các thao tác chỉnh sửa dữ liệu trên dòng hoặc
xoá dòng đó khỏi lưới. Bên cạnh đó, có thêm chức năng tạo mới một
dòng dữ liệu khác, giống như hình dưới:
Hình 2.5.20 : Minh hoạ menu popup trong lưới.
Khi chọn New, sẽ xuất hiện những ô edit box cho ta thêm mới dữ
liệu của một dòng:
Hình 2.5.21: thêm mới một dòng
(Lưu ý: trường EmployeeID là tăng tự động)

75
Khi chọn Edit, ta có thể chỉnh sửa dữ liệu của dòng đó:
Hình 2.5.22 : Trước khi chỉnh sửa dữ liệu của dòng có
EmployeeID=1
Ví dụ Ta thay đổi Last name thành Davolio1, nhấn chọn Update, dữ
liệu sẽ được cập nhật như sau:
Hình 2.5.23 : Sau khi chỉnh sửa dữ liệu của dòng có EmployeeID=1
Khi chọn Delete, dữ liệu của dòng được chọn sẽ bị xoá.

76
Để thực hiện được , ta cần phải có sự hỗ trợ của JavaScript, bằng cách
xử lý sự kiện ở phía người dùng. Ta thực hiện các bước như sau:
B1: Thêm mới một Popup Menu
Kéo thả control ASPxPopupMenu vào trong màn hình Design View, và
thêm các Item: New, Edit, Delete. Ta thao tác giống như một menu bình
thường. Lưu ý, ngoài trường Text là tên hiển thị các Item, ta cần thêm
vào trường Name để có thể thao tác với các Item đó.
Hình 2.5.24 : Thuộc tính Name của item
Ta set thuộc tính ClientInstanceName cho PopupMenu, thuộc tính
này dùng để gọi tới khi ta cần thao tác với PopupMenu trong
JavaScript:

77
Hình 2.5.25: thuộc tính ClientInstanceName của PopupMenu
Nhấn chọn thẻ thông mình của PopupMenu, chọn vào Client-Side
Events

78
Hình 2.5.26: Thẻ chức năng của Popup Menu
Trong Cửa sổ ASPxPopupMenu Client-Side Events Editor mở sau
đó, chọn ItemClick ở cột bên trái và thêm vào sự kiện
GridMenuItemClick(e);.
Ta sẽ xử lý sự kiện này trong JavaScript.

79
Hình 2.5.27 : Thêm mới phương thức trong sự kiện ItemClick
B2: Thêm mới một DataSource
Ta thêm mới mộ AccessDataSource, chọn database Nwind.mdb, chọn
bảng hiển thị là Employees, các trường cần hiển thị là EmployeeID,
Last Name, First Name.

80
Hình 2.5.28 : Chọn bảng và các trường hiển thị
Lưu ý, chọn tuỳ chọn Generate INSERT, UPDATE, and DELETE
statements trong phần Advanced
Hình 2.5.29 : Tuỳ chọn nâng cao

81
B3: Thêm mới một lưới
Ta thêm một control ASPxGridView vào màn hình DesignView, chọn
DataSource là data source ta mới vừa tạo.
Ta set thuộc tính ClientInstanceName cho GridView:
Hình 2.5.30: thuộc tính ClientInstanceName của PopupMenu
Nhấn chọn thẻ thông mình của lưới, chọn vào Client-Side Events

82
Hình 2.5.31 : chọn xử lý sự kiện ở phía ngừoi dùng
Trong Cửa sổ ASPxGridView Client-Side Events Editor mở sau đó,
chọn Context Menu ở cột bên trái và thêm vào phương thức
OnContextMenu(e);.
Ta sẽ xử lý sự kiện này trong JavaScript.

83
Hình 2.5.32: thêm mới phương thức trong sự kiện ContextMenu
B4: Xử lý các sự kiện bằng JavaScript.
Ta thêm một đoạn JavaScript sau để xử lý các sự kiện mở một Menu popup
khi nhấn chuột phải vào một dòng và sự kiện click vào từng Item của Menu.
<script type="text/javascript">
var editingVisibleIndex;
function OnContextMenu(e) {
//if the object is not a row return
//editingVisibleIndex = visibleIndex;
//ASPxPopupMenu1.ShowAtElement(e);
editingVisibleIndex = e.index;
if (e.objectType == 'row') {
pmRowMenu.ShowAtPos(ASPxClientUtils.GetEventX(e.htmlE
vent), ASPxClientUtils.GetEventY(e.htmlEvent));
}
}
function GridMenuItemClick(e) {
if (e.item == null) return;
var name = e.item.name;

84
if (name == "New") ASPxGridView1.AddNewRow();
if (name == "Edit")
ASPxGridView1.StartEditRow(editingVisibleIndex);
if (name == "Delete")
ASPxGridView1.DeleteRow(editingVisibleIndex);
}
</script>
Như vậy ta đã hoàn thành các thao tác để xử lý sự kiện tạo Menu trong
lưới, và xử lý các sự kiện thêm, xoá, sửa dữ liệu. Biên dịch và chạy, ta được
lưới dữ liệu như hình dưới:
6. XtraReport
6.1. Tổng quan
Phần report trên môi trường Web cũng sử dụng Component
XtraReport như môi trường Window. Nó chứa công cụ để tạo Report
từ dữ liệu phức hợp, chế độ xem trước, in và xuất report ra nhiều
định dạng khác nhau.
• Đặc tính chung:
o XtraReport hoạt động được trong cả ứng dụng
Winform và Webform. Ta có thể chỉ cần tạo một Report và sử
dụng ở 2 môi trường khác nhau.
o Tích hợp đầy đủ Visual Studio .Net: Report Designer
tích hợp. Hỗ trợ ch độ xem trước dạng HTML và dạng in, khi
có thay đổi trong thiết kế report, ta không cần biên dịch lại
toàn bộ ứng dụng mà vẫn có thể cập nhật được chế độ xem
trước kịp thời.
o XtraReports làm việc với toàn bộ đối tượng dữ liệu
được hỗ trợ bởi Visual Studio .NET như : chuẩn .NET Data
Objects, Ilist Interface, XML Data Objects.
o Cho phép lọc dữ liệu dưới với nhiều cấp: Data adapter,
Data set, Data views.
o Cho phép gom nhóm dữ liệu: gom nhóm đa tầng và
lồng nhau.
o Hỗ trợ nhiều control chuẩn như: Label, Line, BarCode,
CheckBox, PageInfo, Panel, PictureBox, PageBreak, Table,
ZipCode, etc.
o Hỗ trợ biểu đồ thông qua control XtraCharts.

85
o SubReports: Ta có thể dùng lại các lớp của XtraReport
vào ứng dụng qua control Subreport. Chỉ cần thả vào control
Subreport, set thuộc tính nguồn Report, ta có 2 report từ một
nguồn.
o Hỗ trợ tóm tắt: dễ dàng tạo tóm tắt cho một textbox
hay một ô trong bảng. Chỉ cần set 2 thuộc tính Summary
posiotion(group hay report) và Summary type(Avg, min,
max, sum, count…)
o Hỗ trợ phong phú các định dạng xuất ra: PDF, HTML,
MHT, RTF, TXT, CSV và MS Exel. Có thể xuất report ra
định dạng hình ảnh như: BMP, EMF, GIF, JPEG, PNG, TIFF,
WMF.
o Importing: có thể nạp lại report cũ của mình tử MS
Access, Crystal Reports, Data Dynamics Active Reports vào
XtraReport.
o Tìm kiếm ở chế độ xem trước: giúp cho người dùng có
thể tìm những đoạn text mong muốn.
o Hỗ trợ thừa kế, Bookmark, Watermarks.
dụng
• DevExpress.Utils.v10.1.dll: Chứa các lớp tiện ích cơ bản.
• DevExpress.Data.v10.1.dll: Chứa các lớp thực thi các chức
• DevExpress.Charts.v10.1.Core.dll : Chỉ cần nếu report có ít
nhất một control XRChart.
• DevExpress.XtraCharts.v10.1.dll: Chỉ cần nếu report có ít
nhất một control XRChart.
• DevExpress.RichEdit.v10.1.Core.dll: Thực thi các chức
năng cơ bản của việc in ra các định dạng phong phú.
• DevExpress.XtraRichEdit.v10.1.dll: Hỗ trợ việc xuất ra các
định dạng khác nhau.
• DevExpress.XtraReports.v10.1.dll: Chứa các lớp của bộ
XtraReport.

86
hợp.
• DevExpress.XtraReports.v10.1.Web.dll: Chứa các lớp của
control ReportViewer và ReportToolbar.
6.2.1. Tạo Web Report đơn giản
Ta sẽ tạo Report như hình sau :

B
Hì
1: Thêm m
nh 2.6.1 : V
mới một Rep
87
Ví dụ minh
port
h hoạ Web RReport

88
Nhấn chuột phải vào Project, Add New Item. Trong màn hình list các
Item chọn XtraReport Class V10.1 như trong hình dưới
Hình 2.6.2 : Thêm mới một XtraReport Class
Lúc này, trong project có thêm class XtraReport1. Ta lưu ý add thêm
Reference DevExpress.XtraReports và DevExpress.Utils.
B2: Thêm mới và cấu một DataSet
Nhấn chuột phải vào Project, Add New Item. Trong màn hình list các
Item chọn DataSet như trong hình dưới:

89
Hình 2.6.3 : Thêm mới một DataSet
Trong màn hình DataSet Designer mở sau đó, kéo thả bảng Categories
của Database Nwind.mdb từ ô Server Explorer vào:
Hình 2.6.4 : Cấu hình DataSet
B3: Thiết kế Report
Giờ ta sang cửa sổ designer của Report, nhấn vào thẻ thông minh, trong
phần DataSource , chọn DataSet1 vừa tạo:

90
Hình 2.6.5 : Chọn DataSet cho Report
Trên màn hình Designer của Report, nhấn chuột phải chọn Insert
Band -> ReportHeader để thêm Header cho Report. Trong phần
Detail ta kéo thả các trường CategoryName, Description và Picture
từ fieldlist vào theo mẫu sau:
Hình 2.6.6 : Thiết kế Report
Preview trước report ta được kết quả sau:

91
Hình 2.6.7 : Chế độ Preview của Report
Ta đã hoàn thành việc thiết kế một report giờ cần phải cho nó hiển thị
lên website
B4: Hiển thị Report trên Website và cấu hình report
Ta quay lại trang cần hiển thị Report, kéo thả Component
ReportToolbar và ReportViewer từ ô Toolbox vào thẻ div bên trong:
Hình 2.6.8 : tạo ReportToolbar và ReportViewer
Để liên kết ReportToolbar1 và ReportViewer1 với nhau, gán giá trị
cho thuộc tính ReportViewer của ReportToolbar1 là ReportViewer1

92
Hình 2.6.9 : tạo liên kết giữa ReportToolbar và ReportViewer
Để tham chiếu tới Report mà ta đã tạo ở trên, gán trị cho thuộc tính
Report của ReportViewer1 là XtraReport1
Hình 2.6.10 : Tham chiếu ReportViewer tới Report đã tạo.

Biên dịch
6.
h và chạy ch
2.2. Tạ
Ta sẽ tạo
hương trình
Hình
ạo Report d
một Report
93
h, ta được g
2.6.11 : Gia
dạng bảng
t dạng bảng
giao diện sa
ao diện We
và thống k
g và thống k
au:
b Report
kê dữ liệu
kê dữ liệu nnhư hình sauu:

Lư
nh
cá
B
B2
Ở
B3
Th
Re
Re
Hình 2
ưu ý rằng
hững dạng
ác thao tác c
1: Thêm m
2: Thêm m
đây ta chọn
3: Thiết kế
hêm hai c
eport. Để t
eports, chọn
2.6.12 : Rep
trong các
không giốn
còn lại đều
mới một Rep
mới và cấu m
n table Prod
ế Report
control XR
thực hiện v
n item XRT
94
port dạng b
qui trình tạ
ng nhau , c
tương tự.
port (Như
một DataS
ducts của d
RTable vào
việc này, tro
Table, tiếp
bảng và thốn
ạo mới và
hỉ khác nha
trên)
et(Như trê
atabase Nw
o phần Pag
ong ô Tool
đó trong k
ng kê dữ liệ
cho hiển th
au ở khâu t
ên)
wind.mdb
geHeader
lbox, phần
khu vực Pa
ệu
hị những re
thiết kế Re
và Detail
các control
geHeader
eport
eport,
vào
l của
nhấn

và
dứ
Lú
ở
ra
Đ
Pr
trê
à giữ chuột
ứoi:
Hình
úc này ta sẽ
phần PageH
a.
ể khai thác
roductID,
ên các ô tươ
trái đồng th
h 2.6.13 : T
ẽ thấy có ha
Header và
c dữ liệu từ
ProductNa
ơng ứng đã
95
hời rê con t
hêm contro
ai control là
XRTable2
ừ các trường
ame, Units
được tạo ra
trỏ chuột xu
ol XRTable
à XRTable1
2 tương ứng
g, ta đơn gi
sOnOrder
a sẵn
uống phần
vào Report
1 tương ứng
g với phần
iản chỉ cần
từ cửa sổ
Detail như
t
g với phần
Detail đượ
kéo các trư
Field List
hình
table
ợc tạo
ường
t lên

B4
Ở
O
Tr
R
V
Hình 2
4: Hiển thị
đây ta sẽ
n Orders
rong cửa s
eportFoote
à từ FieldL
2.6.14 : Kéo
ị thống kê c
cho hiển th
sổ Design
er như hình
Hình 2
List, kéo thả
96
o thả các trư
của một trư
hị tính tổng
Report, nh
h dưới
2.6.15 : Thê
ả trường Un
ường dữ liệ
ường bên d
g giá trị các
hấn chuột
êm vào Rep
nitsOnOde
ệu vào Repo
dưới Repor
c records củ
phải rồi t
portFooter
r vào phần
ort
rt
ủa trường U
thêm vào
ReportFoo
Units
phần
oter.

N
ta
Ta
tro
hấn chọn th
click chọn
a điều chỉnh
ong đó
• Boun
• Summ
phươn
• Form
dạng
hẻ thông mi
nút duyệt n
Hình
h các thông
nd Field: se
mary funct
ng thức thố
mat String
số nguyên.
97
inh, và tron
nằm bên ph
h 2.6.16: Tu
g số trong p
t trường dữ
tion: set là
ng kê khác
: ta gõ vào
ng danh sách
hải để hiển t
uỳ chỉnh Su
phàn Summ
ữ liệu là Uni
Sum. Chú
như Count
o Total Uni
h thao tác, p
thị Summa
ummary
mary Editor
itsOnOrder
ú ý ta có th
t, Min,Max,
its: {0} để
phần Summ
ary Editor
r như hình
r.
hể thực hiện
, Average…
hiện thị gi
mary
trên,
n các
…
iá trị

98
• Ignore null values: check vào ô này, để những record có giá trị
null sẽ không ảnh hưởng tới kết quả thống kê.
• Phần Summary Running: Lựa chọn Report, để việc tính tổng sẽ
tính toàn bộ report(trong trường hợp có nhiều trang).
Chọn OK để hoàn tất, rồi xem kết quả bằng cách chọn Preview
Hình 2.6.17: Report dạng bảng ở chế độ Preview
Để hiện thị Border ngăn cách giữa các ô, set thuộc tính
XRTable.Border=All

B5
tr
Bi
D
U
R
5: Tạo Re
rên)
iên dịch ta s
o có nhiều
nitsOnOrd
eportToolB
eportToolb
sẽ được Re
Hình 2.6.
u Record n
der ở tra
Bar (Ở đây
99
bar và Rep
port có kết
18 : Report
nên ta sẽ kh
ang đầu
y là trang 4)
portView
quả như sa
t ở trang đầu
hông thấy p
tiên, ta
, ta sẽ được
để hiển th
au:
u tiên
phần tính t
chọn tra
c kết qua nh
hị Report(
tổng của trư
ang cuối
hư sau:
(Như
ường
trên

Hìnhh 2.6.19 : R
100
Report ở tranng cuối với thống kê tínnh tổng

101
7. ASPxEditors
7.1. Tổng quan
• Đây là một bộ những control chuẩn của DevX dùng để thao
tác, gắn với với các kiểu Control khác, gồm các controls như: Label,
CompoBox, Listbox, Image, Memo…
• Số lượng Control đa dạng: Hiện Có hơn 20 controls trong
bộ ASPxEditors và sẽ mở rộng thêm nữa. Ta dễ dàng tìm được một
Control để phục vụ nhu cầu của mình.
• Gắn sẵn bộ máy xác thực(Validation mechanism): mặc dù
các controls đều có hỗ trợ bộ máy xác thực chuẩn, tuy nhiên nhà sản
xuất cũng đã gắn thêm chức năng xác thực.
• Hỗ trợ SharePoint.
7.1.2. Một số component trong bộ ASPxEditors
Logo Control Mô tả
ASPxImage Control hiển thị hình ảnh
ASPxButton Control để tạo các Button
ASPxButtonEdit Một trình chỉnh sửa nội dung cho phép
hiển thị các nút bên trong một edit box
ASPxCalendar Control để tạo lịch
ASPxCheckBox Control check box, cho phép chọn
nhiều
ASPxRadioButton Control radio button, cho phép chọn
một.
ASPxComboBox Control Chọn các item từ danh sách sổ
xuống
ASPxLabel Control hiển thị label
ASPxHyperLink Control hiển thị và chỉnh sửa các siêu
liên kết
ASPxListBox Control hiển thị list các item.
ASPxMemo Control hiển thị và chỉnh sửa nội dung
nhiều dòng
ASPxTextBox Control hiển thị nội dung một dòng
ASPxTimeEdit Control hiển thị và chỉnh sửa giá trị
thời gian.

102
dụng
• DevExpress.Web.ASPxEditors.vX.Y.dll: Chứa các lớp thực
thi các chức năng của các control trong bộ ASPxEditors.
• DevExpress.Data.v10.1.dll: Chứa các lớp thực thi các chức
hợp.

Devexpress cho asp.net

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Devexpress cho asp.net

Ähnlich wie Devexpress cho asp.net (20)

Devexpress cho asp.net