1. 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

2. 6.1 Khái niệm Kiểm soát dữ liệu hướng đến tự động;
Kiểm soá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 soá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

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

4. 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 %>

5. 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

6. Code
SqlConnection ketnoi = new 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();

7. 6.3 Gắn kết dữ liệu với 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

8. 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

9. Tạo DataSource controls
File .aspx:
<asp:SqlDataSource ID="SqlData1" runat="server"
ConnectionString="<%$ ConnectionStrings:ketnoi %>"
SelectCommand="SELECT * FROM [taikhoan]" >
</asp:SqlDataSource>
File web.config:
<connectionStrings>
<add name=“ketnoi" connectionString="Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\Database.mdf;Integrated Security=True;User Instance=True"
providerName="System.Data.SqlClient" />
</connectionStrings>

10. Tạo nơi hiển thị dữ liệu
<asp:GridView ID="GridView1" runat="server" DataSourceID="SqlData1" > </asp:GridView>

11. Cập nhật dữ liệu - SqlDatasource1 4 2 3

12. <asp:SqlDataSource ID="SqlData1" runat="server" ConnectionString="<%$ ConnectionStrings:ketnoi %>" SelectCommand="SELECT * FROM [taikhoan]" ConflictDetection="CompareAllValues" DeleteCommand="DELETE FROM [taikhoan] WHERE [tentruycap] AND (([matkhau] OR ([matkhau] IS NULL IS NULL))" InsertCommand="INSERT INTO [taikhoan] ([matkhau], [tentruycap]) OldValuesParameterFormatString="original_{0}" UpdateCommand="UPDATE [taikhoan] SET [matkhau] WHERE [tentruycap] AND (([matkhau] OR ([matkhau] IS NULL 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> </UpdateParameters> </asp:SqlDataSource>

13. Cập nhật dữ liệu - Gridview

14. DataList - ListView

15. 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

16. Tạo thêm trường để liên kết đến trang khác
Tạo DataSource controls:
<asp:SqlDataSource ID="SqlData1" runat="server"
ConnectionString="<%$ ConnectionStrings:ketnoi %>"
SelectCommand="SELECT matkhau, tentruycap, 'ChiTiet.aspx?tentruycap=' + tentruycap as ChiTiet FROM [taikhoan]"
</asp:SqlDataSource>
Tạo nơi hiển thị dữ liệu:
<asp:GridView ID="GridView1" runat="server"
DataSourceID="SqlData1" >
<Columns> …
<asp:HyperLinkField HeaderText="Chi tiết" DataNavigateUrlFields="ChiTiet" Text="Chi tiết" />
</asp:GridView>

17. Tạo thêm trường để liên kết đến trang khác
Tạo trang chitiet.aspx
Code behind:
<a href="#" onclick="history.go(-1);"> < Trở về</a>

18. 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

20. Quản lý File
Upload file lên Server
Xóa file trên Server
(Demo – file)

21. 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 đề)
Upload ảnh lên Server
Chèn tên file ảnh vào CSDL
Demo website file

22. Tạo slideshow ảnh Cách 1: Cách 2:
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
Demo ở website file

23. Sử dụng AJAX AJAX Extensions : Ajax Control Toolkit : UpdateProgress
Download file Ajax toolkit
Cấu hình
Sử dụng
UpdateProgress
Baiviet

24. Sử dụng UpdateProgress
Khai báo trong .css thuộc tính .progress
Trong nhóm AJAX Extensions :
Bạn kéo thả ScriptManager qua vùng soạn thảo code của trang web
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)
Bạn kéo thả UpdateProgress qua vùng soạn thảo mã web (vùng nội dung của UpdateProgress)
Viết code cho việc Click nút Button nằm ở vùng UpdatePanel

26. Tạo bài viết Tạo trang nhập bài viết mới B1: Tạo CSDL để lưu bài viết
(ID <int>, tieude <nvarchar(2000)>, noidung <nvarchar(MAX), pathfile <nvarchar(50))
B2: Tạo giao diện
Sử dụng các Control Server
Hoặc AJAX Editor
B3: Lưu bài viết vào CSDL