Bài giảng Phát triển web nâng cao Bài 6 Gắn kết dữ liệu
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (823.79 KB, 26 trang )
Bài 6
Gắn kết dữ liệu
6.1 Khái niệm
6.2 Các kiểu gắn kết dữ liệu đơn giản
6.3 Gắn kết dữ liệu với DataSource controls
6.4 Minh họa
6.1 Khái niệm
• Kiểm sốt dữ liệu hướng đến tự động;
• Kiểm sốt nguồn dữ liệu với giá trị tham số để xác định dữ
liệu cần phải được lựa chọn
• Một kiểm sốt nguồn dữ liệu được đóng gói trong một lớp có
nguồn gốc từ DataSourceView
• Ở mức tối thiểu DataSourceView phải thực hiện các chức
năng (INSERT, UPDATE, và DELETE)
• Kiểm soát nguồn dữ liệu thực hiện hai bộ API:
– API đầu tiên là một giao diện trừu tượng quy định tại các điều
khoản của các dữ liệu phổ biến các hoạt động có nghĩa là để được
sử dụng một cách chung chung từ bất kỳ kiểm soát dữ liệu bị ràng
buộc
– API thứ hai là tùy chọn và được định nghĩa bằng cách sử dụng
thuật ngữ từ tên miền hoặc lưu trữ dữ liệu nó đại diện, thường là
mạnh mẽ, và được định hướng đối với các nhà phát triển ứng dụng
6.2 Các kiểu gắn kết dữ liệu đơn giản
• Gắn kết dữ liệu đơn (Single DataBinding)
• Gắn kết dữ liệu có sự lặp lại (Repeated Data
Binding)
Dạng gắn kết dữ liệu đơn (Single DataBinding)
•
•
•
•
•
Hằng số: <%= 20 %>
Hằng xâu: <%= "Xin chào" %>
Biểu thức: <%= 10+5 %>
Hàm: <%="Sin(3.14/2)=“+ Math.Sin(3.14/2) %>
Thuộc tính khác: <%= "Tiêu đề: " + this.Title %>
Dạng gắn kết dữ liệu có sự lặp lại (Repeated
Data Binding)
• DataSource: Là thuộc tính để chỉ đến nguồn
dữ liệu cần gắn kết. Nguồn dữ liệu này phải là
một tập hợp. Ví dụ: DataTabe, Array,…
• DataSourceID:
– Chỉ đến một đối tượng cung cấp nguồn dữ liệu.
– Sử dụng thuộc tính DataSourceID hoặc DataSource
• DataTextField: Cho biết là gắn kết với trường
nào của mỗi mục dữ liệu
Code
SqlConnection ketnoi = new SqlConnection(@"Data
Source=.\SQLEXPRESS;AttachDbFilename=D:\BAI
TAP\web\Demo\gandulieu\App_Data\Database.mdf;Integrated
Security=True;User Instance=True");
ketnoi.Open();
SqlCommand cd;
cd = new SqlCommand();
cd.CommandText = "select * from sinhvien";
cd.Connection = ketnoi;
SqlDataReader dr;
dr = cd.ExecuteReader();
opt2.DataSource = dr;
opt2.DataTextField = "tensv";
opt2.DataBind();
6.3 Gắn kết dữ liệu với DataSource controls
• DataSource controls
• Các bước:
– Tạo DataSource controls
– Tạo nơi hiển thị dữ liệu
– Tạo cập nhật dữ liệu
DataSource controls
• Ý nghĩa: Cho phép truy xuất tới
bất kỳ nguồn dữ liệu sử dụng trình
điều
khiển
(Provider)
của
ADO.NET.
• Cách thực hiện:
– Tạo DataSource controls
– Tạo nơi hiển thị dữ liệu
– Cập nhật dữ liệu
Tạo DataSource controls
• File .aspx:
SelectCommand="SELECT * FROM [taikhoan]" >
</asp:SqlDataSource>
• File web.config:
<connectionStrings>
</connectionStrings>
Tạo nơi hiển thị dữ liệu
DataSourceID="SqlData1" >
</asp:GridView>
Cập nhật dữ liệu - SqlDatasource
1
4
2
3
SelectCommand="SELECT * FROM [taikhoan]"
ConflictDetection="CompareAllValues"
DeleteCommand="DELETE FROM [taikhoan] WHERE [tentruycap] =
@original_tentruycap AND (([matkhau] = @original_matkhau) OR ([matkhau] IS NULL AND
@original_matkhau IS NULL))"
InsertCommand="INSERT INTO [taikhoan] ([matkhau], [tentruycap]) VALUES
(@matkhau, @tentruycap)"
OldValuesParameterFormatString="original_{0}"
UpdateCommand="UPDATE [taikhoan] SET [matkhau] = @matkhau WHERE
[tentruycap] = @original_tentruycap AND (([matkhau] = @original_matkhau) OR ([matkhau]
IS NULL AND @original_matkhau IS NULL))" >
<DeleteParameters>
<asp:Parameter Name="original_tentruycap" Type="String" />
<asp:Parameter Name="original_matkhau" Type="String" />
</DeleteParameters>
<InsertParameters>
<asp:Parameter Name="matkhau" Type="String" />
<asp:Parameter Name="tentruycap" Type="String" />
</InsertParameters>
<UpdateParameters>
<asp:Parameter Name="matkhau" Type="String" />
<asp:Parameter Name="original_tentruycap" Type="String" />
<asp:Parameter Name="original_matkhau" Type="String" />
</UpdateParameters>
</asp:SqlDataSource>
Cập nhật dữ liệu - Gridview
DataList - ListView
6.4 Minh họa
•
•
•
•
Tạo thêm trường để liên kết đến trang khác
Gán dữ liệu từ CSDL vào TreeView
Quản lý File
Sử dụng AJAX
Tạo thêm trường để liên kết đến trang khác
• Tạo DataSource controls:
SelectCommand="SELECT matkhau, tentruycap, 'ChiTiet.aspx?tentruycap=' +
tentruycap as ChiTiet FROM [taikhoan]"
</asp:SqlDataSource>
• Tạo nơi hiển thị dữ liệu:
<Columns>
…
</asp:GridView>
Tạo thêm trường để liên kết đến trang khác
• Tạo trang chitiet.aspx
<a href="#" onclick="history.go(-1);"> < Trở về</a>
• Code behind:
Gán dữ liệu và TreeView
• Tạo CSDL
• Tạo TreeView (rỗng)
• Viết code để gán dữ liệu từ CSDL lên TreeView
Quản lý File
• Upload file lên Server
• Xóa file trên Server
(Demo – file)
Chèn ảnh vào CSDL
• Cáh 1: (Khó)
– Tạo CSDL
– Đọc file ảnh Upload => byte
– Chèn vào field của CSDL
• Cách 2: (dễ - không đúng bản chất vấn đề)
– Tạo CSDL
– Upload ảnh lên Server
– Chèn tên file ảnh vào CSDL
Tạo slideshow ảnh
• Cách 1:
– Dùng phần mềm hỗ trợ (Flash Slideshow Builder
v4.5.1) tạo slideshow ảnh rồi lưu thành file .html
– Chèn file .html vào trong trang .aspx
<!--#include file="slideshowanh1.html"-->
• Cách 2:
– Bước 1: Bạn tạo file .js để xử lý ảnh
– Bước 2: Thiết kế nơi bạn muốn hiển thị Slide
Sử dụng AJAX
• AJAX Extensions :
– UpdateProgress
• Ajax Control Toolkit :
– Download file Ajax toolkit
/>74023
– Cấu hình
– Sử dụng
Sử dụng UpdateProgress
1. Khai báo trong .css thuộc tính .progress
2. Trong nhóm AJAX Extensions :
1. Bạn kéo thả ScriptManager qua vùng soạn thảo code
của trang web
2. Bạn kéo thả UpdatePanel qua vùng soạn thảo code
của trang web (xác định vùng này được postback về
phía server)
3. Bạn kéo thả UpdateProgress qua vùng soạn thảo mã
web (vùng nội dung của UpdateProgress)
4. Viết code cho việc Click nút Button nằm ở vùng
UpdatePanel
