Bài giảng Lập trình ứng dụng Web - Bài 4: Công nghệ ASP.NET

– uic.DataSource = ds;
– uic.DataBind();
uic là ñiều khiển GD, ds là nguồn dữ liệu
Lê ðình Thanh, Công nghệ ASP.NET
DropDownList
<%
…
DataTable m_Table = new DataTable();
m_Table = m_DataSet.Tables["TatcaLop"];
DropDownList1.DataSource = m_Table;
DropDownList1.DataTextField = "tenLop";
DropDownList1.DataValueField = "maLop";
DropDownList1.DataBind();
%>
this.Response.Write(DropDownList1.SelectedItem.Value);
this.Response.Write(DropDownList1.SelectedItems.Text);
Lê ðình Thanh, Công nghệ ASP.NET
CheckBoxList
<%
…
DataTable m_Table = new DataTable();
m_Table = m_DataSet.Tables["TatcaLop"];
CheckBoxList1.DataSource = m_Table;
CheckBoxList1.DataTextField = "tenLop";
CheckBoxList1.DataValueField = "maLop";
CheckBoxList1.DataBind();
%>
<asp:CheckBoxList id=“CheckBoxList1”
ProductID” runat=server/>
for (int i = 0; i< CheckBoxList1.Items.Count; i++)
if (CheckBoxList1.Items[i].Selected)
{
this.Response.Write(CheckBoxList1.Items[i].Value);
this.Response.Write(CheckBoxList1.Items[i].Text);
}
Lê ðình Thanh, Công nghệ ASP.NET
RadioButtonList
<%
…
DataTable m_Table = new DataTable();
m_Table = m_DataSet.Tables["TatcaLop"];
RadioButtonList1.DataSource = m_Table;
RadioButtonList1.DataTextField = "tenLop";
RadioButtonList1.DataValueField = "maLop";
RadioButtonList1.DataBind();
%>
<asp:RadioButtonList id=“RadioButtonList1”
ProductID” runat=server/>
for (int i = 0; i< RadioButtonList1.Items.Count; i++)
if (RadioButtonList1.Items[i].Selected)
{
this.Response.Write(RadioButtonList1.Items[i].Value);
this.Response.Write(RadioButtonList1.Items[i].Text);
}
Lê ðình Thanh, Công nghệ ASP.NET
Mẫu hiển thị - Template
• HeaderTemplate
– ðịnh mẫu tiêu ñề
• ItemTemplate
– ðịnh mẫu các mục hiển thị
• AlternatingItemTemplate
– ðịnh mẫu mục xen kẽ
• SeperatorItemTemplate
– ðịnh mẫu cách mục
• FooterTemplate
– ðịnh mẫu chân ñề
Có thể cung cấp
template cho các
ñiều khiển giao diện
và ràng buộc dữ liệu
DataGrid, DataList, 
Repeater ñể các ñiều
khiển này hiển thị dữ
liệu theo mẫu
Template = một
ñoạn mã ñịnh nghĩa
kiểu hiển thị
//ðoạn mã xác ñịnh mẫu, ñịnh dạng
hiển thị
Lê ðình Thanh, Công nghệ ASP.NET
Repeater
• Ràng buộc dữ liệu và hiển thị dữ liệu ñược ràng buộc theo
mẫu
Mã lớp
Tên lớp
Lê ðình Thanh, Công nghệ ASP.NET
DataList
• Ràng buộc dữ liệu và hiển thị dữ liệu ñược ràng buộc dưới
dạng danh sách.
<asp:DataList id="DataList1" runat=“server”
RepeatDirection = Horizontal RepeatColumns = 4>
Lê ðình Thanh, Công nghệ ASP.NET
Lưới dữ liệu – DataGrid
• Dùng ñể ràng buộc dữ liệu và hiển thị dưới dạng
bảng
<asp:DataGrid id=“dtgrid1” GridLine=“None”
HeaderStyle-BackColor=“green” runat=“server”>
dtgrid.DataSource = ds.Tables(“TenBang”);
dtgrid.DataBind();
• Khi ñược buộc nguồn dữ liệu, DataGrid tự ñộng
phân tích các trường, ñọc các bản ghi dữ liệu và
hiển thị trong một bảng (…).
Lê ðình Thanh, Công nghệ ASP.NET
DataGrid – Sử dụng BoundColumn
• ðể thay ñổi các cột như tiêu ñề các cột, thứ tự hiển
thị các cột, chúng ta tắt chế ñộ tự ñộng sinh cột
của DataGrid và dùng của
DataGrid ñể ñịnh nghĩa cột của bảng.
<asp:DataGrid id=“dtgrid1” runat=“server”
AutoGenerateColumns = “false”>
<asp:BoundColumn HeaderText=“abc def” DataField = 
“abcField” ReadOnly=“True/False”/>
Lê ðình Thanh, Công nghệ ASP.NET
DataGrid – Sử dụng TemplateColumn
• Theo mặc ñịnh, dữ liệu ñược hiển thị ở dạng văn bản.
• Sử dụng mẫu cột và 
ñể thay ñổi cách hiển thị nội dung của cột.
<asp:DataGrid id=“MyGrid” AutoGenerateColumns = “false’
runat=“server”>
<asp:Image ImageURL=‘<%#DataBinder.Eval(Container.DataItem, 
“tenTruongDL”)’ runat=“server”>
Lê ðình Thanh, Công nghệ ASP.NET
DataGrid – Cập nhật dữ liệu
• Dùng ñể ñịnh
nhãn cho các nút lệnh
<asp:EditCommandColumn
EditText = “Sửa”
UpdateText = “Chấp nhận”
CancelText = “Bỏ qua”
IntemStyle-Wrap = “false”/>
Lê ðình Thanh, Công nghệ ASP.NET
DataGrid – Cập nhật dữ liệu
• Sử dụng với
 ñể tạo giao diện cập nhật
<asp:TextBox Runat=server ID="hoten" Text = 
''/>
Lê ðình Thanh, Công nghệ ASP.NET
DataGrid – Cập nhật dữ liệu
• Chỉ ñịnh các hàm sự kiện cập nhật dữ liệu
<asp:DataGrid id=“MyGrid” runat=“server”
OnEditCommand = “Ham_Xuly_Khi_Chon_Suadoi”
OnUpdateCommand = “Ham_Xuly_Khi_Chon_Capnhat”
OnCancelCommand = “Ham_Xuly_Khi_Ch_Bo_Capnhat”
DataKeyField = “Truong_Khoa_Cac_Banghi_Dulieu”
AutoGenerateColumn = “false”>
• Thiết kế hàm ñể ràng buộc dữ liệu vào DataGrid, 
ví dụ hàm này tên là BindGrid().
Lê ðình Thanh, Công nghệ ASP.NET
DataGrid – Cập nhật dữ liệu
• Viết các hàm xử lý các sự kiện
Ham_Xuly_Khi_Chon_Suadoi (Object sender, 
DataGridCommandEventArgs e)
{
MyGrid.EditItemIndex = e.Item.ItemIdex;
BindGrid(); //ràng buộc lại dữ liệu vào khung lưới
}
Ham_Xuly_Khi_Ch_Bo_Capnhat (Object sender, 
DataGridCommandEventArgs e)
{
MyGrid.EditItemIndex = -1;
BindGrid(); //ràng buộc lại dữ liệu vào khung lưới
}
Lê ðình Thanh, Công nghệ ASP.NET
DataGrid – Cập nhật dữ liệu
• Viết các hàm xử lý các sự kiện
Ham_Xuly_Khi_Chon_Capnhat (Object sender, 
DataGridCommandEventArgs e)
{
e.Item.FindControl(“idxxx”) trả về ñiều khiển nhập
liệu, ñược sử dụng ñể ñọc giá trị do người dùng nhập
vào.
MyGrid.DataKeys[e.Item.ItemIndex] là khóa của bản ghi
ñược sửa.
BindGrid(); //ràng buộc lại dữ liệu vào khung lưới
}
Lê ðình Thanh, Công nghệ ASP.NET
DataGrid – Sử dụng ButtonColumn
• Có thể sử dụng tạo nút chọn xóa.
<asp:DataGrid id=“MyGrid” runat=“server” OnDeleteCommand = 
“ChonXoa”>
<asp:ButtonColumn CommandName="Delete"
Text="Xóa">
…
void ChonXoa(object sender, DataGridCommandEventArgs e)
{
MyGrid.DataKeys[e.Item.ItemIndex] là khóa của bản ghi ñược chọn
xóa
}
Lê ðình Thanh, Công nghệ ASP.NET
DataGrid – Phân trang
• Viết các hàm xử lý các sự kiện
<asp:DataGrid id="DataGrid1“ runat = "server" 
AutoGenerateColumns = "False" AllowPaging="True" 
PageSize="5" 
PagerStyle-PrevPageText="Trang trước" 
PagerStyle-NextPageText="Trang sau"
PagerStyle-Mode=NumericPages
OnPageIndexChanged="ThayTrang“>
void ThayTrang(object sender, DataGridPageChangedEventArgs e)
{
DataGrid1.CurrentPageIndex = e.NewPageIndex;
DataBind();
}
Lê ðình Thanh, Công nghệ ASP.NET
Thiết kế trang dùng lại
User Control
Lê ðình Thanh, Công nghệ ASP.NET
User control (pagelet)
• Usercontrol (tệp .ascx) là mẫu trang/ñiều
khiển người dùng cho phép dùng lại mã.
• Các bước:
– Tạo user control
– ðăng ký user conrol
– Sử dụng user control
Lê ðình Thanh, Công nghệ ASP.NET
Tạo User control
• User control (.ascx) tương tự một trang
.aspx, chỉ khác không chứa thẻ và
.
– User conrol là một phần trang web, ñược nhúng
vào trang .aspx.
Lê ðình Thanh, Công nghệ ASP.NET
ðăng ký và sử dụng user control
• Tại trang .aspx muốn sử dụng user control
<%@Register TagPrefix = “MyPrefix” TagName
= “MyName” src = “mypagelet.ascx” %>
• Sau khi ñược ñăng ký, user control trở
thành một ñối tượng COM và ñược sử dụng
như các ñiều khiển giao diện khác
(TextBox, RadioButton, …)
<myPrefix:myName id = “myID” runat = 
“server”>
Lê ðình Thanh, Công nghệ ASP.NET
Thêm thuộc tính và phương thức cho
user control
• Vì pagelet là ñối tượng COM, ta có thể ñịnh nghĩa các thuộc tính và
phương thức cho user control
public string MyProPerty
{
get
{
return m_field;
}
set
{
m_field = value
}
}
public void myFunction()
{
}
<myPrefix:myName id = “myID”
MyProperty = “abc…”>
<%
myName.MyProperty = “def…”
myName.myFunction();
%>
Lê ðình Thanh, Công nghệ ASP.NET
Cấu hình ứng dụng
Global.ASAX
Web.config
Lê ðình Thanh, Công nghệ ASP.NET
Global.ASAX
• Các phương thức xử lý sự kiện:
– Application_Start
– Application_End
– Session_Start
– Session_End
• Các biến
– Session
– Application
Các biến Application có phạm vi toàn
ứng dụng, ñược dùng ñể thiết lập các
thuộc tính chung cho ứng dụng, 
ví dụ số lần truy cập.
Các biến Session có phạm vi trong một
phiên, ñược dùng ñể thiết lập các thuộc
tính phiên, ví dụ ñịnh danh người sử dụng.
Sử dụng biến ứng dụng:
Session(“tenBienPhien”) = “abc..”;
Sử dụng biến ứng dụng:
Application(“tenBienUngdung”) = “abc..”;
Lê ðình Thanh, Công nghệ ASP.NET
Web.config
• ðịnh dạng XML
– Có thể mở rộng
– Một số thiết lập
• An ninh
• Phiên
• Cục bộ hóa
• Lần vết
• Bắt lỗi
• Ứng dụng
Lê ðình Thanh, Công nghệ ASP.NET
Thiết lập cấu hình với Web.config
• Web.config là một tệp xml ñược sử dụng
ñể thiết lập các tham số cấu hình.
• Một trong những ứng dụng quan trọng của
Web.config là khai báo các thông số toàn
cục ñể sử dụng chúng trong ứng dụng. 
Lê ðình Thanh, Công nghệ ASP.NET
Cấu trúc Web.config
<trace enabled="false" requestLimit="10" pageOutput="false" 
traceMode="SortByTime" localOnly="true"/>
<sessionState mode="InProc" stateConnectionString="tcpip=127.0.0.1:42424" 
sqlConnectionString="data source=127.0.0.1;Trusted_Connection=yes" 
cookieless="false" timeout="9000"/>
Lê ðình Thanh, Công nghệ ASP.NET
Sử dụng Web.config
• ASP.NET cung cấp lớp System.Configuration
.ConfigurationSettings tự ñộng xử lý nội dung 
Web.config
• Trong Web.config, ta ñịnh nghĩa các thông số, ví
dụ
<add key=“constring" value="server=AT; database=Vidu; 
uid=sa; pwd=;"/>
• Khi cần sử dụng tham số trong Web.config
using System.Configuration;
string sConn = 
ConfigurationSettings.AppSettings["constring"];
Lê ðình Thanh, Công nghệ ASP.NET
Xác thực người dùng
• Trong Web.config
• Trong login.aspx.cs
Sau khi cho người dùng ñăng nhập, kiểm tra trong CSDL.
FormsAuthentication.RedirectFromLoginPage(tenDN, false);
Ứng dụng là ngôi nhà, 
login.aspx là cửa ñể vào
nhà. Bạn không thể vào
nhà nếu không qua cửa.
Bạn không thể mở cửa
nếu không có chìa khóa
ñúng với khóa trên cửa.
Không có bước này
giống như cửa không
có cánh.
Mở cửa ñể vào nhà
Lê ðình Thanh, Công nghệ ASP.NET
Tiếp theo
Xử lý trang web nâng cao với
AJAX