Bài giảng Phát triển web nâng cao - Bài 6: Gắn kết dữ liệu

Mời các bạn tham khảo Bài giảng Phát triển web nâng cao - Bài 6: Gắn kết dữ liệu sau đây để bổ sung thêm các kiến thức về khái niệm, các kiểu gắn kết dữ liệu đơn giản, gắn kết dữ liệu với DataSource controls.

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

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)

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

SqlConnection ketnoi = new SqlConnection(@"Data

Source=.\SQLEXPRESS;AttachDbFilename=D:\BAI

TAP\web\Demo\gandulieu\App_Data\Database.mdf;Integrated Security=True;User Instance=True");

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

– 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:

<asp:SqlDataSource ID="SqlData1" runat="server"

ConnectionString="<%$ ConnectionStrings:ketnoi %>" SelectCommand="SELECT * FROM [taikhoan]" >

providerName="System.Data.SqlClient" />

</connectionStrings>

Tạo nơi hiển thị dữ liệu

<asp:GridView ID="GridView1" runat="server"

DataSourceID="SqlData1" >

</asp:GridView>

<asp:SqlDataSource ID="SqlData1" runat="server"

ConnectionString="<%$ ConnectionStrings:ketnoi %>"

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:

<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"

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);"> &lt; Trở về</a>

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

– 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

http://ajaxcontroltoolkit.codeplex.com/releases/view/ 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

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