Bài giảng Công nghệ .NET - Lương Trần Hy Hiến - Chương 3: Thiết kế giao diện Web

 mở rộng ascx thay vì aspx
o User control không thể request trực tiếp từ client. 
Công nghệ NET 44 HIENLTH
User control

 Ví dụ một user control chứa một Label bên 
trong
<%@ Control Language="C#" AutoEventWireup="true"
CodeFile="Footer.ascx.cs" Inherits="Footer" %>
Công nghệ NET 45 HIENLTH
User control

 Control directive sử dụng cùng các thuộc tính với Page 
directive cho web page như 
o Language, AutoEventWireup, Inherits

 Code behind cho user control này tương tự như web form.
o Sử dụng sự kiện UserControl.Load để add text vào label
public partial class Footer : UserControl
{
protected void Page_Load(Object sender, EventArgs e) 
{
lblFooter.Text = “Time: ";
lblFooter.Text += DateTime.Now.ToString();
}
}
Công nghệ NET 46 HIENLTH
User control

 Sử dụng User control
o Insert vào trong web page
o Sử dụng Register directive để khai báo sử dụng 
control
o Khai báo sử dụng user control 
<%@ Register TagPrefix=“HIENLTH" TagName="Footer“ 
Src="Footer.ascx" %>
Minh họa sử dụng Footer user control
Công nghệ NET 47 HIENLTH
User control

 Minh họa sử dụng User Control
User control
Công nghệ NET 48 HIENLTH
User control

 User control bao bọc các thành phần bên trong. 
Do đó page không thể truy cập các control trong 
user control.

 Tuy nhiên user control có tính chất tương tự 
như control
o Thuộc tính
o Phương thức
o Sự kiện
 Sử dụng Property, Method, Event để lấy thông 
tin các thành phần bên trong User Control.
Công nghệ NET 49 HIENLTH
User control

 Tạo thuộc tính & phương thức cho user control
public string Content
{
get // lấy nội dung (label) của user control
{
return Label1.Text;
}
set // thiết lập nội dung cho user control
{
Label1.Text = value;
}
}
public void SetContent(string str)
{
// thiết lập nội dung cho label
Label1.Text = str;
}
Code behind của user control
Công nghệ NET 50 HIENLTH
User control

 User control là giải pháp thuận tiện khi muốn kết hợp 
nhiều web control vào chung một khối thống nhất!
o Sử dụng user control kết hợp text box và validation control.

 Hạn chế của User control khi muốn bổ sung hoặc mở 
rộng
o Không thể customize lại phần HTML thể hiện với user control
o Không thể chia sẻ user control với những ứng dụng khác.

 Đa số người lập trình chọn cách tạo custom web control 
với đầy đủ tính năng hơn.
Công nghệ NET 51 HIENLTH
User control

 Demo tạo user control có text box yêu cầu phải 
nhập giá trị số

 Các bước thực hiện
o Tạo project DemoUserControl
o Tạo User control tên NumberTextBox
Công nghệ NET 52 HIENLTH
User control

 Bước 2: Tạo User control tên NumberTextBox
o Kích chuột phải lên project chọn Add => New Item…
o Chọn Templates là Web User Control
Đặt tên user control
Chọn user control
Công nghệ NET 53 HIENLTH
User control

 Bước 3: Trong màn hình Design của user 
control
o Kéo thả TextBox và một Validation control kiểu 
CompareValidator
• Đặt id của TextBox là txtContent
• Đặt id của CompareValidator là cvCheckNumber
• Thiết lập thuộc tính cho cvCheckNumber
ErrorMessage: “Nhập giá trị số!”
ControlToValidate: txtContent
Operator: DataTypeCheck
Type: Integer
Công nghệ NET 54 HIENLTH
User control
Công nghệ NET 55 HIENLTH
User control

 Bước 4: sử dụng user control trong web page
o Để sử dụng user control trong web page, ta có thể 
kéo thả user control vào trang web cần sử dụng
• Kéo user control NumberTextbox vào Default.aspx
Default.aspx
Kéo thả
Công nghệ NET 56 HIENLTH
User control

 VS tự động tạo tag Register và tag sử dụng 
User control NumberTextbox trong default.aspx
Công nghệ NET 57 HIENLTH
User control

 Chạy demo trang default.aspx
User control: NumberTextBox
Bổ sung thêm Label cho user control: NumberTextBox, Label 
này cho biết ý nghĩa dữ liệu mà user nhập vào.
Bổ sung thêm property để lấy giá trị mà user nhập trong TextBox 
của User control.
Công nghệ NET 58 HIENLTH
User control

 Yêu cầu bài tập
o Tạo một user control LienHe
o Chứa các text box cho phép nhập các thông tin
• Họ tên
• Cơ quan
• Chức vụ
• Điện thoại
• Email
• …
o Với mỗi thông tin trên phải tạo các property tương 
ứng, để bên ngoài (web page chứa user control) có 
thể lấy các giá trị này!
Công nghệ NET 59 HIENLTH
Custom control

 Custom control được tạo giống như class. 

 Tạo và sử dụng custom control theo dạng 
library class
o Tạo ASP.NET Custom control
o Biên dịch thành DLL 
o Import trong ứng dụng web (kéo thả, code) và sử 
dụng custom control như lớp thư viện bình thường
o Cho phép dùng lại trong nhiều ứng dụng web khác 
nhau.
Công nghệ NET 60 HIENLTH
Custom control

 Ta có thể tạo custom control từ lớp control có sẵn, và bổ 
sung thêm nhiều chức năng.

 Ví dụ: tạo một Text box với định dạng đặc biệt

 Cho phép thay đổi phần HTML render:
o Override phương thức render
o Viết phần bổ sung HTML thông qua đối tượng HtmlWriter đi 
kèm với phương thức Render để output trực tiếp HTML
o Sử dụng từ khóa base để gọi phương thức của lớp cơ sở
• Đảm bảo việc bổ sung sẽ không thay thế code mặc định
Công nghệ NET 61 HIENLTH
Custom control
public class TitledTextBox : TextBox
{
private string title;
public string Title
{
get { return title; }
set { title = value; }
}
protected override void writer)
{Render(HtmlTextWriter 
// tạo bổ sung tag HTML với title
writer.Write("" + title + "");
// gọi Render của lớp cơ sở, nội dung của textbox sẽ xuất ra
base.Render(writer);
}
}
Công nghệ NET 62 HIENLTH
Custom control

 Demo cách tạo custom control dạng thư viện và 
sử dụng trong ứng dụng khác.

 Phần demo này tạo một custom control dạng 
TextBox, có bổ sung một caption cho text box

 Bước 1: Tạo một project có template dạng: 
ASP.NET Server Control.
o Đặt tên cho Custom control là: MyServerControl
Công nghệ NET 63 HIENLTH
Custom control

 Bước 2: thay đổi lớp cơ sở mặc định từ 
WebControl sang TextBox
Công nghệ NET 64 HIENLTH
Custom control

 Bước 3: 
o Tạo biến thành viên kiểu chuỗi chứa caption của 
textbox.
o Tạo property cho chuỗi caption
Công nghệ NET 65 HIENLTH
Custom control

 Bước 4: Override lại phương thức Render của 
Textbox, bổ sung thêm caption
Công nghệ NET 66 HIENLTH
Custom control

 Bước 5: Build project, kết quả là file DLL

 Đây là dạng file thư viện liên kết động, ta có thể 
import vào web page để sử dụng.
Công nghệ NET 67 HIENLTH
Custom control

 Tạo project demo sử dụng custom control

 Để import custom control vào project ta có thể 
làm như sau:
o Import custom control vào ToolBox
• Kích chuột phải lên toolbox Standard chọn Choose Items…
• Browse đến file DLL của custom control
o Từ ToolBox kéo thả custom control vào web page
o Trong sự kiện Load của web page, thiết lập lại 
caption của custom control
Công nghệ NET 68 HIENLTH
Custom control

 Import custom control vào ToolBox
Công nghệ NET 69 HIENLTH
Custom control

 Custom control hiển thị trên tool box như một 
control chuẩn
Công nghệ NET 70 HIENLTH
Custom control

 Kéo thả custom control vào trang web

 Thiết lập thuộc tính Caption của custom control
Công nghệ NET 71 HIENLTH
Custom control

 Bài tập
o Tạo một custom control cho phép hiển thị thông tin 
bản quyền theo mẫu sau
o Trong đó có 3 thuộc tính cho phép bổ sung từ bên 
ngoài của custom control
• [từ năm], [đến năm] và [tác giả]
©Copyright [từ năm – đến năm] [tác giả]. All rights reserved
®[tác giả] giữ bản quyền nội dung trên website này.
Chương 3 (tt): 
Site Navigation & Javascript
Công nghệ NET 73 HIENLTH
Site Navigation

 XML SiteMap

 SiteMapDataSource

 SiteMapPath

 Menu

 TreeView
Công nghệ NET 74 HIENLTH
Cấu trúc website
Công nghệ NET 75 HIENLTH
XML SiteMap

 Định nghĩa cấu trúc website trong file 
Web.sitemap

 Cấu trúc của tập tin site map như sau:
Công nghệ NET 76 HIENLTH
Sử dụng XML Site Map

 Tạo SiteMapDataSource
Công nghệ NET 77 HIENLTH
SiteMapPath Control

 Hiển thị đường dẫn truy cập từ root node (trang 
chủ) đến node hiện tại (breadcrumb)

 Mỗi node phân cách nhau bởi PathSeperator
Công nghệ NET 78 HIENLTH
Menu Control

 Hiển thị cấu trúc website dưới dạng Menu
<asp:Menu ID="MenuMain" runat="server“ 
DataSourceID="SiteSource“>
Orientation=“Vertical" 
StaticDisplayLevels="2" 
StaticSubMenuIndent="0px"
Orientation="Horizontal" 
StaticDisplayLevels="2" 
StaticSubMenuIndent="10px”
Công nghệ NET 79 HIENLTH
TreeView Control

 Hiển thị cấu trúc website dưới dạng TreeView
<asp:TreeView ID="TreeViewMain" runat="server" 
DataSourceID="SiteSource”>
Công nghệ NET 80 HIENLTH
TreeView Control
ImageSet=“Arrows" ImageSet=“BulletedList4" ImageSet="WindowsHelp"
Công nghệ NET 81 HIENLTH
Cấu hình tùy chỉnh XML SiteMap
<add name=“SpecialSiteMapProvider" 
type="System.Web.XmlSiteMapProvider" 
siteMapFile="~/Special.Sitemap"/>
<add name=“XmlSiteMapProvider" 
type="System.Web.XmlSiteMapProvider" 
siteMapFile="~/web.Sitemap"/>
JavaScript
Công nghệ NET 83 HIENLTH
Thực thi mã Javascript

 Thông qua thuộc tính OnClientClick của các 
control
<asp:Button ID="Button1" runat="server" 
onclientclick="alert('Click me here!');" 
Text="Button" />

 Thêm attribute vào control trong code-behide
Button2.Attributes.Add("onclick", "return 
confirm('Bạn có chắc xóa không?')");
Công nghệ NET 84 HIENLTH
Problem & Solution

 Problem
o Làm sao gọi được hàm javascript trong code-behind?

 Solution
o ___________________________
o ___________________________
Công nghệ NET 85 HIENLTH
Inject code block

 Sử dụng ClientScript.RegisterClientScriptBlock
o Khai báo script dưới dạng string
o Sau đó chèn vào page
Công nghệ NET 86 HIENLTH
Truy xuất nội dung server control

 Sử dụng thuộc tính ClientID của server control
Công nghệ NET 87 HIENLTH
Tham khảo

 Slide bài giảng này tham khảo từ:
o Slide ASP.NET của thầy Nguyễn Hà Giang, ĐH Công 
Nghệ TpHCM
o Slide Lập trình Web 2, ĐH KHTN TpHCM
Công nghệ NET 88 HIENLTH
Q & A
88
Công nghệ NET 89 HIENLTH
THE END