PHẦN I: Giới thiệu ASP.NET
- 1. Khái niệm
- a. ASP.NET là gì?
ASP.NET là công nghệ phát triển các ứng dụng trên nền web, thế
hệ kế tiếp của ASP (Active Server Page – Trang web được xử lý bên phía
máy chủ). ASP.NET là một thành phần nội tại (có sẵn) của .NET Framework.
Tên bài viết: ASP.NET
Tác giả: Quang IT
Cấp độ bài viết: Chưa đánh giá
Tóm tắt:
Vì vậy nó tận dụng được sức mạnh của .NET Framework. ASP.NET có một số ưu điểm chính:
Tên bài viết: ASP.NET
Tác giả: Quang IT
Cấp độ bài viết: Chưa đánh giá
Tóm tắt:
Vì vậy nó tận dụng được sức mạnh của .NET Framework. ASP.NET có một số ưu điểm chính:
- Có thể sử dụng để phát triển các ứng dụng web đủ mọi kích cỡ, từ
ứng dụng nhỏ nhất cho đến ứng dụng toàn doanh nghiệp (Enterprise).
- Ứng dụng viết bằng ASP.NET dễ dàng tương thích với nhiều loại trình
duyệt khác nhau. Nhà phát triển không cần phải quan tâm nhiều đến trình
duyệt nào được sử dụng để duyệt website, điều này sẽ được framework tự
render ra mã tương ứng.
- Khi sử dụng bộ IDE của Visual Studio, cách thức lập trình sẽ giống hệt như lập trình winform.
- Truy xuất dữ liệu bằng công nghệ ADO.NET có sẵn của .NET Framework.
- Chạy ứng dụng cực nhanh bởi cơ chế biên dịch và Cached.
- Có thể tăng tốc ứng dụng bằng cách Cache các Control, các trang.
- Bảo mật vượt trội.
- Tốn ít dòng lệnh hơn so với ASP/PHP/Perl khi thực hiện cùng một công việc.
- Dễ dàng bảo trì và dễ đọc hơn bởi Code và Giao diện được tách biệt.
Điều này cũng giúp cho tính chuyên biệt hóa cao hơn. (Một người chỉ lo
code phần xử lý nghiệp vụ, người khác thì chỉ lo code phần giao diện
v.v…).
- ASP sử dụng ngôn ngữ lập trình VB.NET hoặc C# hoặc cả hai để phát triển ứng dụng.
- b. Sự khác biệt giữa ASP.Net và ASP
ASP.NET được phác thảo (re- design) lại từ số không,
nó được thay đổi tận gốc rễ và phát triển (develop) phù hợp với yêu cầu
hiện nay cũng như vạch một hướng đi vững chắc cho tương lai Tin Học. Lý
do chính là Microsoft đã quá chán nãn trong việc thêm thắt và kết hợp
các công dụng mới vào các kiểu mẫu lập trình hay thiết kế mạng theo kiểu
cổ điển nên Microsoft nghĩ rằng tốt nhất là làm lại một kiểu mẫu hoàn
toàn mới thay vì vá víu chổ này chổ nọ vào ASP. Ðó là chưa kể đến nhiều
phát minh mới ra đời sau này dựa trên các khái niệm mới mẽ theo xu hướng
phát triển hiện nay của công nghệ Tin Học (Information Technology) cần
được đưa vào kiểu mẫu phát triển mới đó. Nhờ vậy, ta mới có thể nói ...
khơi khơi ASP.NET không phải là ASP. Thật vậy , ASP.NET cung cấp một
phương pháp hoàn toàn khác biệt với phương pháp của ASP.
♣ Lưu ý:
Mặc dù ASP.NET và ASP khác biệt nhau nhưng chúng có thể hoạt động vui
vẻ hài hoà với nhau trong Web Server của ta (operate side - by - side).
Do đó, khi ta cài ASP.NET engine, ta không cần lập trình lại các ứng
dụng hiện có dưới dạng ASP của ta tuy rằng, nếu muốn, ta có thể làm điều
đó rất dễ dàng.
Sự thay đổi cơ bản
ASP đã và đang thi hành sứ mạng được giao cho nó để phát triển mạng
một cách tốt đẹp như vậy thì tại sao ta cần phải đổi mới hoàn toàn? Lý
do đơn giản là ASP không còn đáp ứng đủ nhu cầu hiện nay trong lãnh vực
phát triển mạng của công nghệ Tin Học. ASP được thiết kế riêng biệt và
nằm ở tầng phiá trên hệ điều hành Windows và Internet Information
Server, do đó các công dụng của nó hết sức rời rạt và giới hạn.
Trong khi đó, ASP.NET là một cơ cấu trong các cơ cấu của hệ điều hành
Windows dưới dạng nền hay khung .NET (.NET framework), như vậy ASP.NET
không những có thể dùng các object của các ứng dụng cũ mà còn có thể xử
dụng tất cả mọi tài nguyên mà Windows có, dễ dàng như ... ăn cơm tấm bì
sườn chả vậy.
Ta có thể tóm tắt đại khái sự thay đổi như sau:
- Tập tin của ASP.NET (ASP.NET file) có extension là .ASPX, còn tập tin của ASP là .ASP.
- Tập tin của ASP.NET (ASP.NET file) được phân tích ngữ pháp (parsed)
bởi XSPISAPI.DLL, còn tập tin của ASP được phân tích bởi ASP.DLL.
- ASP.NET là kiểu mẫu lập trình phát động bằng sự kiện (event
driven), còn các trang ASP được thi hành theo thứ tự tuần tự từ trên
xuống dưới.
- ASP.NET xử dụng trình biên dịch (compiled code) nên rất nhanh, còn
ASP dùng trình thông dịch (interpreted code) do đó hiệu suất và tốc độ
phát triển cũng thua sút hẳn.
- ASP.NET yểm trợ gần 25 ngôn ngữ lập trình mới với .NET và chạy
trong môi trường biên dịch (compiled environment), còn ASP chỉ chấp nhận
VBScript và JavaScript nên ASP chỉ là một scripted language trong môi
trường thông dịch(in the interpreter environment). Không những vậy,
ASP.NET còn kết hợp nhuần nhuyễn với XML (Extensible Markup Language) để
chuyển vận các thông tin (information) qua mạng.
- ASP.NET yểm trợ tất cả các browser và quan trọng hơn nữa là yểm trợ
các thiết bị lưu động (mobile devices). Chính các thiết bị lưu động, mà
mỗi ngày càng phổ biến, đã khiến việc dùng ASP tron gviệc phát triển
mạng nhằm vươn tới thị trường mới đó trở nên vô cùng khó khăn.
- a. Cài đặt Visual Studio.NET 2008
Các phiên bản .NET
Cho đến thời điểm này (2008), Visual studio .NET đã có các phiên bản:
Visual Studio 2003, .NET Framework 1.1
Visual Studio 2005, .NET Framework 2.0
Visual Studio 2008, .NET Framework 3.5
Cài đặt Visual Studio.NET 2008
Bộ Visual Studio.NET 2008 được đóng gói trong một đĩa DVD (tương đương 8 đĩa CD).
Trong đó bao gồm cả bộ MSDN. Kích thước khoảng 4.5 GB.
Việc cài đặt vô cùng dễ dàng, chỉ việc chạy file Setup sau đó chọn
các mặc định khi được hỏi. Tuy nhiên, để tiết kiệm không gian đĩa thì
chỉ nên chọn các sản phẩm cần thiết để cài đặt.
2. Căn bản ASP.Net
a. Trang asp.net
Trang asp.net có đuôi mở rộng là .aspx và kèm theo một lớp phục vụ ẩn đằng sau(Code behind).
Để viết code C# trong trang aspnet ta có thể khai báo và sử dụng trực
tiếp trong trang asp.net, trong file code behind, hoặc từ một thành
phần thư viện và ta gọi vào.
Viết code C# trong file .aspx:
về cơ bản ta dùng các các thẻ sau:
- <% %> ta có thể khai báo biến hoặc viết các hàm, lớp trong thể này,
- <%= %> với thẻ này ta dùng để gọi giá trị của biến hay của 1 hàm nào đó,
- <%# %> lấy giá trị dùng trang các đối tượng ràng buộc dữ liệu.
Đây là một ví dụ đơn giản
Trang basic.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Basic.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Basic</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<%
string abc = "Hello World!";
%>
Biến abc của ta vừa khai báo có giá trị <%=abc %>
</div>
</form>
</body>
</html>
Viết code trong trang code behind
Vì trang aspnet của chúng ta kế thừa từ trang aspx.cs lên trong trang
.aspx chúng ta muốn gọi dữ liệu từ biến hay hàm trong file .aspx.cs
chúng ta phải khai báo với bổ ngữ truy cập protected hoặc public.
Ví dụ sau:
Trang codebehind.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="codebehind.aspx.cs" Inherits="codebehind" %>
<!DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<h3>Gán giá trị:</h3>
<asp:Label ID="lblhello" runat="server" Text="Label"></asp:Label><br /><br />
<h3>Lấy giá trị từ code behind</h3>
<%=_hello %>
</div>
</form>
</body>
</html>
Trang codebehind.aspx.cs
using System;
public partial class codebehind : System.Web.UI.Page
{
protected string _hello;
protected void Page_Load(object sender, EventArgs e)
{
_hello = "Hello World";
lblhello.Text = _hello;
}
}
Trong ví dụ trên có sử dụng một Control asp.net là Label các ta sẽ
được học trong chương sau, ở chương này ta hiểu nó là một Control để
hiển thị dữ liệu.
Ta thấy trong phần code behind có khai báo một biến _hello kiểu
string và bổ ngữ truy cập là protected trong sự kiện Page_Load(khi trang
được tải lên) chúng ta gán _hello = "Hello World"; và sau đó gán giá
trị cho Label bằng giá trị của _hello. Còn trong trang .aspx chúng ta có
sử dùng thẻ <%= %> để lấy giá trị của _hello để in ra màn hình.
b. Các control trên Asp.net
Các Control asp.net là phần quan trọng nhất trong ASP.NET Framework.
một Control ASP.NET là một lớp mà thực thi trên server và đưa ra nội
dung trên trình duyệt. ASP.NET có hơn 70 control mà ta có thể sử dụng
trong xây dựng ứng dụng web của ta và cơ bản nó chia ra các nhóm control
sau:
Standard control: bao gồm các Control đưa ra các thành phần chuẩn của form như: Label, Button, TextBox…
Validator Control: là các control cho phép bản kiểm tra tính hợp lệ của các control cho phép nhập giá trị trên form.
Rich Control: là những Control như FileUpload, Calendar…
Data Control là các Control cho phép thao tác với dữ liệu
Navigation Control: là những Control giúp ta dễ dàng di chuyển giữa các trang trong website.
Login control: Là các Control về bảo mật của ứng dụng cho phép ta đưa ra các form đăng nhập, thay đổi mật khẩu…
HTML Control: cho phép ta chuyển các Control của HTML thành các Control có thể làm việc trên server.
c. Hiểu về control sự kiện trên server
Phần lớn các Control của asp.net hỗ trợ 1 hoặc nhiều sự kiện, ví dụ
Control ASP.NET Button hỗ trợ sự kiện Click, khi người sử dụng nhấn
chuột vào Button một sự kiện sẽ được đưa ra và công việc này được xử lý
trên server.
Ví dụ: Trang UnderstandEvent.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="UnderstandEvent.aspx.cs" Inherits="UnderstandEvent" %>
<script runat="server">
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = TextBox1.Text;
}
</script>
<!DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Hiểu về sự kiện phía server</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" OnClick="Button1_Click"
runat="server" Text="Button" />
<hr />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</div>
</form>
</body>
</html>
Trong ví dụ trên gồm 3 Control của ASP.NET là TextBox, Label, và
Button, mỗi khi người sử dụng nhập dữ liệu vào Textbox và nhấn vào
Button sự kiện Button1_Click được đưa ra và điền dữ liệu từ TextBox và
Label.
d. Hiểu về View State
Giao thức http là giao thức nền móng của WWW, là một giao thức chuẩn
thực tế.mỗi lần ta request một trang từ website, một dữ liệu mới được
đưa ra, ASP.NET Framework có thể quản lý được vượt ra ngoài giới hạn của
giao thức http, ví dụ ta điền dữ liệu vào một Control Label với thuộc
tính Text của nó, dữ liệu này sẽ được lưu trữ qua nhiều trang web và chỉ
thay đổi khi nó được gán lại giá trị.
Ví dụ sau sẽ đưa một một trang asp.net trong đó gồm 2 Control Button
và Label(Text của nó hiển thị số đếm), mỗi lần nhấn vào Button thì giá
trị của Label tăng lên 1.
Ví dụ trang Understandstate.aspx:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Understandstate.aspx.cs" Inherits="Understandstate" %>
<!DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">
<script runat="server">
protected void Button1_Click(object sender,EventArgs e)
{
Label1.Text = Convert.ToString(int.Parse(Label1.Text) + 1);
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Under Stand State</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="Label1" runat="server" Text="0"></asp:Label>
<asp:Button ID="Button1" OnClick="Button1_Click" runat="server" Text="Button" />
</div>
</form>
</body>
</html>
Nếu ta mở View Source code của trang Understandstate.aspx trên ta sẽ thấy như sau:
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE"
value="/wEPDwULLTE4OTg4OTc0MjUPZBYCAgQPZBYCAgEPDxYCHgRUZXh0BQEzZGRkz0aTZTJffZRUP11aiDXbPGQGitk="
/>
<input type="hidden" name="__EVENTVALIDATION"
id="__EVENTVALIDATION"
value="/wEWAgKK7LjKBwKM54rGBgzCWqbCIzq33uVXHF19FzfdGPsJ" />
Đây là 2 file hidden trong form nó chứa giá trị Text của Label khi
trang được postback nó sẽ ghi nhớ text đó và sẽ khởi tạo lại giá trị của
Label khi trang Load.
e. Các sự kiện của trang asp.net
Khi chạy trang asp.net thì vòng đời của trang asp.net gồm các sự kiện
1.PreInit
2. Init
3. InitComplete
4. PreLoad
5. Load
6. LoadComplete
7. PreRender
8. PreRenderComplete
9. SaveStateComplete
10. Unload
Sử dụng thuộc tính Page.IsPostBack
Với sự kiện Load của trang thì khi tải trang lên thì có một sự kiện
nào đó được đưa ra, nếu có nghĩa mỗi lần load lại trang nó lại thực hiện
công việc đó, còn nếu ta đưa thêm vào thuộc tính Page.IsPostBack thì ta
có thể Control được sự kiện nào được thực hiện và sự kiện nào không khi
trang đựơc tải lại.
Phần II. Tìm hiểu và sử dụng các Server Controls
1. HTML Server Controls
Đây là các Control được tạo bằng cách thêm thuộc tính ID
và RUNAT = "Server" bên trong mỗi thẻ HTML thông thường. Cách này thường
được dùng khi muốn chuyển đổi một trang ASP trước đây sang ASP.NET. Tuy
nhiên, các Control loại này không có nhiều thuộc tính phục vụ công việc
lập trình. So với ASP Server Control (hay web server control) thì được
dùng ít hơn, do web server control tương thích với nhiều trình duyệt hơn
và tập thuộc tính, phương thức cũng phong phú hơn rất nhiều.
Vì lý do đó và cũng để tránh sự lẫn lộn giữa HTML Server control và web server control,
kể từ nay về sau chúng ta thống nhất chỉ sử dụng web server control
mà không sử dụng đến HTML Server control (trừ những ngoại lệ).
2. Web server Controls
Để có thể sử dụng code bên phía server truy xuất tới các
phần tử trong webform, ASP.NETcung cấp cho chúng ta một số phần tử đặc
biệt, gọi là web server control hay ASP Server controls. Với các phần tử
loại này, chúng ta có thể tạo ra các phần tử rất phức tạp chỉ với
một hoặc vài dòng code. Ví dụ phần tử Calendar, phần tử GridView,
Container,….Các phần tử này hỗ trợ phong cách lập trình theo mô hình
hướng đối tượng.
- a. Khai báo (tạo các phần tử web server control)
Cú pháp khai báo thường có dạng:
Dạng 1 (Không có thẻ đóng) Dạng 2 (có thẻ đóng tường minh)
<asp: Tên_Điều_Khiển
ID = "Định danh duy nhất"
runat = "Server"
tt1="gt1"
tt2="gt2" …
/>
<asp: Tên_Điều_Khiển
ID = "Định danh duy nhất"
runat = "Server"
tt1="gt1"
tt2="gt2" …
> </ asp: Tên_Điều_Khiển>
Trong đó: 2 thuộc tính thường bắt buộc phải có là ID và runat. Thuộc tính ID là tên duy
nhất được dùng để tham chiếu khi viết code phía server. Thuộc tính runat="Server" chỉ ra
rằng phần tử này cần phải được xử lý phía server trước khi gửi về cho Client.
Có thể đặt giá trị cho các thuộc tính ở ngay bên trong các thẻ này, thậm chí có thể đưa các
mã JavaScript ! …
b. Cơ chế xử lý các phần tử web server control
Cơ chế xử lý các phần tử này như sau: Phía máy chủ sẽ đọc
những thẻ nào có thuộc tính runat = "Server" và đem xử lý, kết quả sau
khi xử lý sẽ được gửi trả về cho phía trình duyệt.
Ta xét một ví dụ cụ thể dưới đây để hiểu rõ cơ chế xử lý các phần tử webserver control bên phía máy chủ:
Ví dụ 1: Xử lý thẻ form có thuộc tính runat="Server"
<form runat="server">
</form>
Server sẽ đọc thẻ form này và xử lý (vì có thuộc tính runat = "server"), và cho kết quả là:
<form name="ctl01" method="post" action="Default.aspx" id="ctl01">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE"
value="/wEPDwUJNzgzNDMRYrsdybepETo3ZpHQh9iJeRBA=="
/>
</div>
</form>
Như vậy, rõ ràng là server đã "chế biến" thêm một chút trước khi trả
về cho trình duyệt, đó là bỏ thuộc tính runat="Server" nhưng thêm thuộc
tính name="ct01", method, action, id… ngoài ra còn thêm các thẻ
<div>, <input>. Nói cách khác là server đã biến cái ban đầu
mà trình duyệt không thể hiểu được (phần có runat="server" ở trên) thành
cái mà trình duyệt có thể xử lý được (phần kết quả ở dưới).
Ví dụ 2: Xử lý phần tử TextBox:
<asp:TextBox ID="HVT" runat="server" Text="Hello" BackColor="blue"></asp:TextBox>
Server sẽ chế biến (gender) thành:
<input name="HVT" type="text" value="Hello" id="HVT" style="background- color:blue;" />
Ở ví dụ này, sau khi xử lý server đã bỏ thuộc tính runat, asp:TextBox, BackColor… và tạo ra thẻ tương đương mà trình duyệt có thể hiểu là input, type="text", background- color, name…
Ví dụ 3: Xử lý phần tử Calendar
Với các phần tử phức tạp hơn thì Server sẽ phải mất nhiều công chế biến hơn. Ví dụ đối với thẻ Calendar như sau (chỉ có 1 dòng):
<asp:Calendar ID="Cal" runat="server"> </asp:Calendar>
Thì server sẽ tạo ra đoạn code HTML rất "khủng" !!!:
<table id="Table1" cellspacing="0" cellpadding="2" title="Calendar" border="0"
style="border- width:1px;border- style:solid;border- collapse:collapse;">
<tr>
<td colspan="7" style="background- color:Silver;">
<table cellspacing="0" border="0" style="width:100%;">
<tr>
<td style="width:15%;">
<a href="javascript:__doPostBack('cal','V3074')"
style="color:Black" title="the previous month"><
</a>
</td>
<td align="center" style="width:70%;">July 2008</td>
<td align="right" style="width:15%;">
<a href="javascript:__doPostBack('cal','V3135')"
style="color:Black" title="Go to the next month">>
</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<th align="center" abbr="Sunday" scope="col">Sun</th>
<th align="center" abbr="Monday" scope="col">Mon</th>
<th align="center" abbr="Tuesday" scope="col">Tue</th>
<th align="center" abbr="Wednesday" scope="col">Wed</th>
<th align="center" abbr="Thursday" scope="col">Thu</th>
<th align="center" abbr="Friday" scope="col">Fri</th>
<th align="center" abbr="Saturday" scope="col">Sat</th>
</tr>
<tr>
<td align="center" style="width:14%;">
<a href="javascript:__doPostBack('cal','3102')"
style="color:Black" title="June 29">29</a>
</td>
<td align="center" style="width:14%;">
<a href="javascript:__doPostBack('cal','3104')"
style="color:Black" title="July 01">1</a>
</td>
<td align="center" style="width:14%;">
<a href="javascript:__doPostBack('cal','3105')"
style="color:Black" title="July 02">2</a>
</td>
<td align="center" style="width:14%;">
<a href="javascript:__doPostBack('cal','3106')"
style="color:Black" title="July 03">3</a>
</td>
<td align="center" style="width:14%;">
<a href="javascript:__doPostBack('cal','3107')"
style="color:Black" title="July 04">4</a>
</td>
<td align="center" style="width:14%;">
<a href="javascript:__doPostBack('cal','3108')"
style="color:Black" title="July 05">5</a>
</td>
</tr>
>>>>> Còn gấp khoảng 5 lần đoạn code ở trên nữa >>>>>
Vì trang HTML truyền thống không có một phần tử nào có thể hiển thị
đầy đủ một lịch biểu (Calendar) nên ASP.NET đã phải tạo ra phần tử đó
bằng cách kết hợp từ rất nhiều thẻ HTML đơn giản (table, th, tr, td, a,…
) như ở trên.
Ví dụ này là một minh chứng cho thấy ASP.NET đã làm đơn giản hóa quá
trình phát triển ứng dụng. Giảm thiểu việc phải viết code và bảo trì
chương trình dễ dàng hơn rất nhiều.
Ví dụ 4: Xử lý phần tử web server control nhưng có
thêm thuộc tính phía client là một đoạn script (Lưu ý: Thuộc tính
onClick không có trong danh sách thuộc tính của asp:label):
<asp:Label
runat="server" ID="lblHello"
Text="Hello world"
onClick="alert('Hello world');">
</asp:Label>
Kết quả server xử lý phần tử Label ở trên là:
<span id="Span1" onClick="alert('Hello world');">Hello world</span>
Ta biết rằng phần tử asp:Label không có thuộc tính onClick (bằng
chứng là khi gõ không thấy xuất hiện trong danh sách). Nhưng khi chạy
trang web không thấy có báo lỗi. Vậy cơ chế xử lý của ASP.NET là như thế
nào đối với những phần tử như thế này?
Cách thức như sau: Khi các thẻ có runat="server" thì sẽ được web
server đọc và xử lý tất cả các nội dung nằm bên trong thẻ đó. Tuy nhiên,
nếu gặp thẻ nào đó mà có thể nó chưa hiểu (ví dụ chỉ client hiểu được)
thì nó trả nguyên phần đó cho phía client.
Chính vì vậy mà ta thấy kết quả trả về cho phía client vẫn chứa nguyên phần onClick="alert('Hello world');".
Đây cũng là cách mà người ta hay sử dụng để đan xen các đoạn code vừa được xử lý phía server, vừa xử lý phía client.
Ví dụ 5: Xử lý các phần tử server mà trong đó có chứa mã của Client.
<asp:TextBox runat="server" ID="ht" Text="Hello"
onmousemove="document.bgColor='blue';"
onmouseout="document.bgColor='yellow';"
/>
Kết quả mà server gửi trả về trình duyệt sau khi xử lý là:
<input name="ht" type="text" value="Hello" id="Text1"
onmousemove="document.bgColor='blue';"
onmouseout="document.bgColor='yellow';"
/>
Vì hai sự kiện omMouseMove và onMouseOut không có trên server nên nó
sẽ gửi nguyên giá trị đó cho phía trình duyệt. Đối với trình duyệt thì 2
sự kiện này đã quá quen thuộc: omMouseMove xuất hiện khi người dùng di
chuột trên phần tử textbox và sự kiện onMouseOut xuất hiện khi người
dùng di chuyển chuột ra ngoài textbox.
- b. Thực thi các câu lệnh tại phía server
Trong rất nhiều trường hợp chúng ta muốn thực thi
một số câu lệnh ngay tại phía server khi người dùng thực hiện một thao
tác nào đó – ví dụ click chuột – thì có thể viết sẵn các thủ tục sự kiện
để thực thi ứng với các sự kiện này.
Để gọi một thủ tục (phương thức) phía server khi một sự kiện xảy ra đối với phần tử web server control, thì viết như sau:
<asp:Tên_Phần_Tử runat = "Server" onClick = "Tên_Phương_Thức" ….>
Ví dụ: Gọi phương thức KiemTra khi người dùng nhấn vào nút "cmdKiemTra":
<asp:Button ID="cmdKiemTra" runat="server" OnClick="KiemTra" />
Lưu ý: Tên của phương thức trong phần OnClick không chứa tham số và dấu ngoặc.
Nhưng khi định nghĩa phương thức này thì thường phải có 2 tham số như ví dụ sau:
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
public partial class _default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void KiemTra (object sender, EventArgs e)
{
/// Đặt câu lệnh ở đây !
}
}
d. Mô hình xử lý sự kiện trong ASP.NET
1. Lần đầu tiên khi trang web được chạy. ASP.NET tạo trang và các đối
tượng và thực hiện khởi tạo, sau đó trang sẽ được chuyển đổi (rendered)
thành trang HTML để trả về cho phía client. Các đối tượng của trang sau
đó cũng được giải phóng khỏi bộ nhớ của server.
2. Tại một thời điểm nào đó, nếu người dùng thực hiện một số công
việc (ví dụ click chuột lên button có runat = "Server") khi đó hệ thống
sẽ tự động thực hiện hành động gọi là "Postback" (Dịch là gửi/gọi trở
lại Server) và lúc đó toàn bộ dữ liệu trong phần tử form sẽ được gửi về
Server.
3. ASP.NET tạo lại các đối tượng của trang và trả về client trạng thái cuối cùng khi chúng được gửi đi.
4. Tiếp theo, ASP.NET sẽ kiểm tra xem thao tác nào đã gây ra sự kiện
postback đó và kích hoạt (gọi) sự kiện tương ứng (ví dụ Button.Click).
Thông thường, trong phần xử lý sự kiện này chúng ta thường thực hiện một
số xử lý như cập nhật CSDL, kiểm tra,….
5. Trang này sau đó được biến đổi (chuyển đổi) thành trang HTML và
gửi về cho client (trình duyệt). Tiếp theo các đối tượng của trang (như
asp:Button; asp:ListBox,…) sẽ được giải phóng khỏi bộ nhớ. Nếu có sự
kiện Postback khác xuất hiện thì ASP.NET sẽ lặp lại xử lý ở bước 2 cho
đến bước 4.
Chú ý: Khi tạo một số phần tử như Button thì mặc định hệ thống sẽ tự động Postback mỗi
khi người dùng click chuột. Đối với một số phần tử khác như TextBox
thì mặc định là không Postback. Nếu muốn Postback thì đặt thuộc tính
AutoPostback = "true", ví dụ:
<asp:DropDownList runat="server" ID="ds" AutoPostBack="true"></asp:DropDownList>
Hay : <asp:TextBox runat="server" ID="txtHVT" AutoPostBack="true"></asp:TextBox>
Khi đã đặt AutoPostBack = "true" thì mỗi khi người dùng chọn một mục
khác (đối với DropDownList) và thay đổi nội dung (đối với TextBox) thì
hệ thống sẽ PostBack trang web về bên Server. Và sự kiện
SelectedIndexChanged và TextChanged tương ứng sẽ được gọi:
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
public partial class _default : System.Web.UI.Page
{
protected void ds_SelectedIndexChanged (object sender, EventArgs e)
{
}
protected void txtHVT_TextChanged (object sender, EventArgs e)
{
}
}
3. Sử dụng các Control Standard
Trong chương này các ta sẽ học các Control cở bản của ASP.NET
Framework, đây là những Control mà ta thường xuyên sử dụng trong ứng
dụng web của mình.
a. Control hiển thị thông tin
Label
Một số thuộc tính
Tuy Control Label chứa đựng rất nhiều thuộc tính để kết xuất hiển thị
nhưng với kinh nghiệm trong quá trình thiết kế Web nên sử dụng thuộc
tính cssClass để sử dụng một lớp css.
Ví dụ:
Gán thuộc tính trực tiếp
<asp:Label ID="Label1" BackColor="ActiveBorder" BorderColor="ActiveCaption"
ForeColor="Blue" Font- Size="12pt" runat="server" Text="Diễn đàn Đại Học Hoa Sen" />
Sử dụng cssClass
<asp:Label ID="Label2" CssClass="label"
runat="server" Text="Diễn đàn Đại Học Hoa Sen" />
Click phải vào tên ứng dụng trên cửa sổ Solution Explorer - > Add - > New Item - > Style Sheet
Copy đoạn mã sau:
.label
{ background- color:ActiveBorder; border- color:ActiveCaption; font- size:"12pt"; color:Blue; }
Thêm vào dưới
<title></title>
<style type="text/css">
@import url('Stylesheet1.css');
</style>
Kết quả
Control Literal
Giống với Control Label ta có thể dùng Literal để trình bày Text hoặc
nội dung Html. Literal hỗ trợ một thuộc tính mà Label không hỗ trợ đó
là: thuộc tính Mode gồm 3 giá trị là: Pass through, Endcode, transform.
Ví dụ
<asp:Literal ID="lit1" runat="server" Text="<hr/>" Mode="PassThrough" />
<asp:Literal ID="lit2" runat="server" Text="<hr/>" Mode="Encode" />
<asp:Literal ID="lit3" runat="server" Text="<hr/>" Mode="Transform" />
Hiên thị:
b. Control cho phép người dùng nhập liệu
Control TextBox
Bảng các thuộc tính:
Control TextBox hỗ trợ phương thức và sự kiện sau:
- Focus: cho phép thiết lập form khởi tạo ưu tiên tới TextBox
- TextChanged: Xảy ra trên Server khi nội dung TextBox thay đổi. để
sự kiên này xảy ra ta cần thiết đặt thuộc tính AutoPostback là true.
Sử dụng Control CheckBox
Các thuộc tính
CheckBox hỗ trợ phương thức va sự kiện
- Focus: Enables you to set the initial form focus to the check box.
- CheckedChanged: Raisedontheserverwhenthecheckboxischeckedorunchecked.
Control RadioButton
Control RadioButton luôn được sử dụng trong một nhóm và trong nhóm đó chỉ một RadioButton được chọn
Các thuộc tính
Thuộc tinh
RadioButton hỗ trợ các phương thức và sự kiện
- Focus: Enables youto set the initial form focus to the RadionButton control.
- CheckedChanged: Raised on the server when the unchecked.
c. Submitting Form Data
Control Button
Các thuộc tính:
Các phương thức và sự kiện
- Focus: Cho phép thiết lập khi khơi tạo Form ưu tiên Control TextBox.
- Click: Xảy ra khi Control Button được nhấn.
- Command: Xảy ra khi Control Button được nhấn. CommandName và CommandArgument được truyền qua sự kiện.
Control LinkButton: các phương thức và thuộc tính
giống với Control Button nhưng cách hiển thị của nó dưới dạng Text giống
như thẻ <a> của HTML và có thể áp dụng thuộc tính css của thể
<a> cho đối tượng LinkButton.
Học viên tự tìm hiểu thêm
Control ImageButton
Các thuộc tính và phương thức của Control Button và thêm vào một số thuộc tính
Sử dụng Client Scripts với Control Button
Cả ba Control Button trên đều có thuộc tính OnClientClick, ta có thể
sử dụng thuộc tính này để thực hiện mã phía Client mà ta cần khi Control
Button được nhấn.
Ví dụ.
<%@ Page Language="C#"%>
<!DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">
<script runat=”server”>
protected void btnDelete_Click(object sender, EventArgs e)
{
lblResult.Text = “All pages deleted!”;
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>HiepGia</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="Button1" OnClick="Button1_Click"
OnClientClick="return confirm('Ta có chắc chắn?');" runat="server"
Text="Button" /><br />
<asp:Label ID="Label1" runat="server" Text="HiepGia" />
</div>
</form>
</body>
</html>
Giải thích ví dụ: trên đoạn mã trên trong form gồm 2 Control Button
và Label. Trong Control Button ta gán vào 2 sự kiện: OnClientClick phía
Clien, và OnClick phía Server.
OnClientClick sẽ thực hiện khi người dùng phía Client nhấn vào
Button, trong mã Client trình bày một hàm confirm trong javascript với
mục đính hỏi người dùng xác nhận việc thực hiện nào đó “Ta có chắc
chắn?” nếu người dùng chọn OK thì Sự kiện thứ 2 OnClick sẽ được thực
hiện còn nếu chọn Cancel thì sự kiện phía Server không được thực hiện.
Thực hiện chuyển trang
Mặc định khi ta nhấn vào Button nó sẽ thực hiện công việc ngay trên
trang và trang của chúng ta sẽ Load lại một lần nhưng ta có thể sử dụng
thuộc tính PostBackUrl để chuyển sang một trang khác.
Ví dụ ta có một trang ButtonSearch.aspx
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>HiepGia</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="lblSearch" runat="server" Text="Search:" />
<asp:TextBox ID="txtSearch" runat="server" />
<asp:Button ID="btnSearch" Text="GO!" runat="server" PostBackUrl="ButtonSearchResult.aspx" />
</div>
</form>
</body>
</html>
Trong thuộc tính PostBackUrl của Control btnSearch sẽ chuyển sang trang ButtonSearchResult
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">
<script runat="server">
void Page_Load(object sender, EventArgs e)
{
if (PreviousPage != null)
{
TextBox txtSearch = (TextBox)PreviousPage.FindControl("txtSearch");
lblSearch.Text = txtSearch.Text;
}
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>HiepGia</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="lblSearch" runat="server" />
</div>
</form>
</body>
</html>
Trong đoạn mã trên ta để ý phương thức FindControl của PreviousPage
nó sẽ tìm đến Control trên trang ButtonSearch.aspx mà ta cung cấp ID của
nó.
Chỉ định một Button mặc định.
Ví dụ trên trang của ta có nhiều Control Button, khi nhập dữ liệu ta
lại quen nhập xong dữ liệu và nhấn nút Enter trên bàn phím, ta có thể để
mặc định nút cập nhật dữ liệu làm mặc định khi nhấn phím Emter. Như ví
dụ dưới đây.
<%@ Page Language="C#" %>
<script runat="server">
void btnXacnhan_Click(object sender,EventArgs e)
{
lblThongbao.Text = txtHoten.Text;
}
</script>
<!DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>HiepGia</title>
</head>
<body>
<form id="form1" runat="server" defaultbutton="btnXacnhan">
<div>
<asp:Label ID="lblHoten" runat="server" Text="Nhập họ tên" />
<asp:TextBox ID="txtHoten" runat="server" />
<hr />
<asp:Button ID="btnXacnhan" OnClick="btnXacnhan_Click" runat="server" Text="Xác nhận" />
<asp:Button ID="btnBoqua" runat="server" Text="Bỏ qua" />
<hr />
<asp:Label ID="lblThongbao" runat="server" Text="" />
</div>
</form>
</body>
</html>
Control Command Event
Sự khác nhau giữa Command Event và Command Click là trong Command Event ta có thể cung cấp Command Name và Command argument
Trong các ví dụ trước ta đã lấy ví dụ về sự kiện Command Click nên bây giờ ta sẽ lấy một ví dụ về Command Event để ta so sánh.
Ví dụ trên trang ta có 3 Control Button như ví dụ dưới đây:
<%@ Page Language="C#"%>
<script runat="server">
void hcubiuChon(object sender, CommandEventArgs e)
{
if (e.CommandName == "language")
{
switch (e.CommandArgument.ToString())
{
case "C#":
lblComandEvent.Text = "CShap";
break;
case "VBNET":
lblComandEvent.Text = "VB.NET";
break;
case "JAVA":
lblComandEvent.Text = "Java";
break;
}
}
}
</script>
<!DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>HiepGia</title>
</head>
<body>
<form id="form1" runat="server">
<div>
Ta chọn ngôn ngữ:
<asp:Label ID="lblComandEvent" runat="server" Text=""></asp:Label>
<br />
<asp:Button ID="btna" OnCommand="hcubiuChon" CommandName="language" CommandArgument="C#" runat="server" Text="C#" />
<asp:Button ID="btnb" OnCommand="hcubiuChon"
CommandName="language" CommandArgument="VBNET" runat="server"
Text="VB.NET" />
<asp:Button ID="btnc" OnCommand="hcubiuChon" CommandName="language" CommandArgument="JAVA" runat="server" Text="Java" />
</div>
</form>
</body>
</html>
Cả ba Control Button trên đều chứa Tên lệnh và đối số lệnh và tuỳ
thuộc vào đối số lệnh khác nhau để ta có thể thực hiện một công việc
tương ứng.
d. Control hiển thị ảnh
ASPNET bao gồm 2 Control hiển thị ảnh. Control Image và ImageMap.
Control Image.
Control này dùng để hiển thị ảnh giống với thẻ <Img> trong HTML
Các thuộc tính quan tâm
Ví dụ
<%@ Page Language="C#" %>
<script runat="server">
void Page_Load(object sender, EventArgs e)
{
Random rnd = new Random();
switch (rnd.Next(3))
{
case 0:
Image1.ImageUrl = "Images/images1.jpg";
Image1.AlternateText = "Picture 1";
break;
case 1:
Image1.ImageUrl = "Images/images2.jpg";
Image1.AlternateText = "Picture 2";
break;
case 2:
Image1.ImageUrl = "Images/images3.jpg";
Image1.AlternateText = "Picture 3";
break;
}
}
</script>
<!DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>HiepGia</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Image ID="Image1" runat="server" />
</div>
</form>
</body>
</html>
Control ImageMap
Cho phép ta tạo bản đồ ảnh trên 1 ảnh hiển thị trên trang web mà
người dùng phía Client có thể chọn vào một vùng của ảnh để thực hiện một
công việc nào đó.
Ví dụ
<%@ Page Language="C#"%>
<script runat="server">
void ImageMap1_Click(object sender, ImageMapEventArgs e)
{
switch (e.PostBackValue)
{
case "top":
lblResult.Text = "Day la phan dau";
break;
case "middle":
lblResult.Text = "day la phan giua";
break;
case "under":
lblResult.Text = "day la phan cuoi";
break;
}
}
</script>
<!DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>HiepGia</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ImageMap ID="ImageMap1" HotSpotMode="PostBack"
OnClick="ImageMap1_Click" ImageUrl="~/Images/jiwoo18034.jpg"
runat="server">
<asp:RectangleHotSpot
PostBackValue="top"
Left="0"
Top="0"
Right="300"
Bottom="150"
AlternateText="Top" />
<asp:RectangleHotSpot
PostBackValue="middle"
Left="0"
Top="150"
Right="300"
Bottom="300"
AlternateText="middle" />
<asp:RectangleHotSpot
PostBackValue="under"
Left="0"
Top="300"
Right="300"
Bottom="450"
AlternateText="Under" />
</asp:ImageMap>
<asp:Label ID="lblResult" runat="server" />
</div>
</form>
</body>
</html>
Các thuộc tính của ImageMap giống với Image và thêm vào hai thuộc tính đó là:
- HotSpots: cho phép ta điền tập hợp thông tin của HotSpots được chứa đựng trong Control ImageMap.
- HotSpotMode:Cho phép ta chỉ định Enables you to specifythe
behavior of the image map when you click a region. Possible values are
Inactive, Navigate, NotSet, and PostBack.
e. Control Panel
Khi ta cần đưa các Control trang vào một nhóm để giải thích nghĩa cho
nhóm đó hoặc có thể là để ần hoặc hiện nhóm điều khi nhấn 1 sự kiện nào
đó trên trang của ta, ta có thể dùng Control panel.
Một số thuộc tính của Control panel mà ta cần lưu ý là:
- DefaultButton: Cho phép ta định nghĩa một button mặc định trong
panel mà button mặc định này sẽ được thực hiện khi ta nhấn phím Enter
- Direction: Cho phép ta gán hoặc thiết đặt hướng hiển thị nội dung
được đưa ra trong panel, có thể là các giá trị:NotSet, LeftToRight, and
RightToLeft.
- GroupingText: Cho phép ta trình bày Panel như 1 Fieldset với một chú giải riêng biệt
- HorizontalAlign: Cho phép ta chỉ ra hướng ngang thể hiện nội dung
của panel và nó có thẻ là các giá trị: Center, Justify, Left, NotSet,
and Right.
- ScrollBars: Cho phép ta hiển thị scrollbars khi ta cố định chiều
cao hoặc chiều rộng của panel và nội dung trong panel vượt quá độ rộng
hoặc độ cao đó, nó có thể là các giá trị: Auto, Both, Horizontal, None,
and Vertical.
Ví dụ
<%@ Page Language="C#" %>
<script runat="server">
void Page_Load(object sender, EventArgs e)
{
for (int i = 1; i < 100; i++)
{
buletnghenghiep.Items.Add("Nghề "+i.ToString());
}
}
void hcubiuSothich(object sender, EventArgs e)
{
if (chkhtsothich.Checked == true)
panelsothich.Visible = true;
else
panelsothich.Visible = false;
}
void hcubiuNghenghiep(object sender, EventArgs e)
{
if (chkhtnghenghiep.Checked == true)
panelnghenghiep.Visible = true;
else
panelnghenghiep.Visible = false;
}
</script>
<!DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>HiepGia</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Panel ID="panelpage" runat="server" GroupingText="HiepGia">
<table>
<tr>
<td>
<asp:Panel ScrollBars="auto" ID="panelsothich" Width="200px" Height="200px" runat="server" GroupingText="Sở thích">
<asp:CheckBox ID="CheckBox1" Text="Bóng đá" runat="server" /><br />
<asp:CheckBox ID="CheckBox2" Text="Xem phim" runat="server" /><br />
<asp:CheckBox ID="CheckBox3" Text="Kinh doanh" runat="server" />
</asp:Panel>
</td>
<td>
<asp:Panel ID="panelnghenghiep" Width="200px" Height="200px"
ScrollBars="Vertical" runat="server" GroupingText="Nghề nghiệp">
<asp:BulletedList ID="buletnghenghiep" runat="server">
</asp:BulletedList>
</asp:Panel>
</td>
</tr>
<tr>
<td>
<asp:CheckBox Checked="true" ID="chkhtsothich" AutoPostBack="true"
OnCheckedChanged="hcubiuSothich" Text="Hiển thị sở thích"
runat="server" /><br />
<asp:CheckBox Checked="true" ID="chkhtnghenghiep"
AutoPostBack="true" OnCheckedChanged="hcubiuNghenghiep" Text="Hiển thị
nghề nghiệp" runat="server" /><br />
</td>
</tr>
</table>
</asp:Panel>
</div>
</form>
</body>
</html>
f. Control HyperLink
Control HyperLink cho phép tạo 1 link tới trang web khác, không giống
với LinkButton, HyperLink không đệ trình dữ liệu lên server.
Phần III.
Sử dụng các control Validation & Master Page & Các đối tượng trong ASP.NET
- 1. Validation control
Ở Chương trước chúng ta đã học về những Control chuẩn của
NetFrameWork3.5, chúng ta có thể dùng những Control đó để thao tác với
Webserver phía Server- Side, có thể để cập nhật dữ liệu. Nhưng có một
tình huống đặt ra là các Control đó có đảm bảo cho chũng ta cập nhật dữ
liệu đúng và không xảy ra lôi?. Ví dụ trên Form của ta có trường nhập số
điện thoại nhưng người sử dụng lại nhập vào là 1 dòng text như vậy sẽ
gây ra lỗi nhập liệu. Với phiên bản trước của ASP.Net là asp thì để khắc
phục lỗi đó chúng ta phải thực hiện viết mã JavaScript để bắt lỗi việc
đó, còn với ASPNET nó đã cung cấp cho ta những Control kiểm tra tính hợp
lệ của các Control nhập liệu trên Form. Trong chương này các ta sẽ học
về những Control đó và tiếp theo là sẽ học cách mở rộng những Control
đó theo ý muốn của chúng ta ví dụ ta sẽ tạo một AjaxValidator để kiểm
tra nhập liệu phía Client.
6 Control Validation trong netframework3.5:
RequiredFieldValidator: Yêu cầu người sử dụng nhập giá trị vào trường chỉ định trên Form
RangeValidator: Kiểm tra giá trị nhập vào có nằm trong một khoảng nhỏ nhất và lớn nhất định trước hay không.
CompareValidator: So sánh giá trị nhập có bằng một giá trị của trường khác trên Form hay không.
RegularExpressionValidator: So sánh giá trị nhập với 1 biểu thức quy tắc nào đấy có thể hòm thư, điện thoại…
CustomValidator: Ta có thể tuỳ chỉnh đối tượng Validator theo ý của mính
ValidationSummary: cho phép hiển thị tổng hợp tất cả các lỗi trên 1 trang.
a. RequiredFieldValidator
Ý nghĩa: với Control này ta có thể yêu cầu người dùng phải nhập giá trị vào 1 trường chỉ định trên Form.
Cách sử dụng:
Đưa Control RequiredFieldValidator từ ToolBox(trong phần Validation) vào trong Form và thêm vào cho nó 2 thuộc tính
ControlToValidate: chỉ đến Control sẽ được kiểm tra
Text(hoặc ErrorMessage): Thông báo lỗi khi kiểm tra
Ví dụ
Code 1: Trang RequiredValidator.aspx
<%@ Page Language="C#" %>
<script runat="server">
void btnAccept_Click(object sender, EventArgs e)
{
if (Page.IsValid)
{
this.lblResult.Text = txtHoten.Text;
this.txtHoten.Text = "";
}
}
</script>
<!DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Validator</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="lblHoten" runat="server" Text="Nhập vào họ tên" />
<asp:TextBox ID="txtHoten" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldtxtHoten"
ControlToValidate="txtHoten" runat="server" Text="* Ta phải nhập họ
tên"></asp:RequiredFieldValidator><br />
<asp:Button ID="btnAccept" OnClick="btnAccept_Click" runat="server" Text="Accept" /><br />
<asp:Label ID="lblResult" runat="server" Text="" />
</div>
</form>
</body>
</html>
b. Control CompareValidator
Ý nghĩa
Ta có thể sử dụng CompareValidator để Kiểm tra giá trị nhập vào có
nằm trong một khoảng nhỏ nhất và lớn nhất định trước hay không.
Cách sử dụng
Ta đưa Control CompareValidator từ hộp ToolBox vào Form và thiết lập cho nó một số thuộc tính sau:
· ControlToValidate: chỉ đến Control cần kiểm tra
· Text(ErrorMessage): Nội dung thông báo lỗi
· MinimumValue: Giá trị nhỏ nhất thiết lập cho đối tượng
· MaximumValue: Giá trị lớn nhất thiết lập cho đối tượng
· Type: Kiểu so sánh, Có thể là các giá trị Interger,String, Double, Date và Currency.
Ví dụ
Code 2: Trang CompareValidator.aspx
<%@ Page Language="C#" %>
<script runat="server">
void btnAccept_Click(object sender,EventArgs e)
{
if (Page.IsValid)
{
this.lblThongbao.Text = txtDiem.Text;
}
}
</script>
<!DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>RangeValidator</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td>Vào điểm</td>
<td><asp:TextBox ID="txtDiem" runat="server"></asp:TextBox></td>
<td>
<asp:RequiredFieldValidator ID="RequiredFieldDiem"
ControlToValidate="txtDiem" runat="server" ErrorMessage="Ta phải nhập
điểm"></asp:RequiredFieldValidator>
<asp:RangeValidator ID="RangeDiem" runat="server"
ControlToValidate="txtDiem" Type="Integer" MinimumValue="0"
MaximumValue="10" ErrorMessage="Điểm phải nằm trong khoảng từ 0 đến
10"></asp:RangeValidator>
</td>
</tr>
<tr>
<td colspan="3">
<asp:Button ID="btnAccept" OnClick="btnAccept_Click" runat="server" Text="Thực hiện" />
</td>
</tr>
<tr>
<td colspan="3">
<hr />
<asp:Label ID="lblThongbao" runat="server" />
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
Trong ví dụ trên ta dùng hai đối tượng Validator cùng kiểm tra giá
trị nhập trên Control txtDiem, Control RequiredFieldDiem dùng đề kiểm
tra và yêu cầu nhập giá trị cho txtDiem còn Control RangeDiem yêu cầu
nhập giá trị trong txtDiem phải nằm trong khoảng từ 0 đến 10.
c. Control RegularExpressionValidator
Ý nghĩa
Control RegularExpressionValidator cho phép ta so sánh giá trị nhập
tại 1 trường nào đó trên Form với một quy tắc định trước. ta có thể sử
dụng các biểu thức quy tắc để đưa ra các chuỗi mẫu như là email
addresses, Social Security numbers, phone numbers, dates, currency,
amounts, and product codes.
Cách sử dụng
Ta đưa Control RegularExpressValidator vào Form của mình và thiết lập cho nó một số thuộc tính sau:
· ID: tên của Control
· ControlToValidate: trỏ đến Control cần kiểm tra
· Text(ErrorMessage): nội dung thông báo khi có lỗi
· ValidatorExpression: quy định mẫu nhập liệu như là hòm thư, số điện thoại…
Ví dụ
Sau đây sẽ là một ví dụ về việc yêu cầu người sử dụng phải cập nhật đúng địa chỉ của hòm thư.
Code 3: trang RegularExpressionValidator.aspx
<%@ Page Language="C#"%>
<script runat="server">
void btnAccept_Click(object sender, EventArgs e)
{
if (Page.IsValid)
{
lblThongbao.Text = txtEmail.Text;
}
}
</script>
<!DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>RegularExpressionValidator</title>
</head>
<body>
<form id="form1" runat="server">
<div>
Email:<asp:TextBox ID="txtEmail" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ControlToValidate="txtEmail"
ID="RequiredFieldValidator1" runat="server" ErrorMessage="Ta phải nhập
địa chỉ hòm thư"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server"
ErrorMessage="Ta nhập không đúng định dạng hòm thư"
ControlToValidate="txtEmail"
ValidationExpression="\w+([- +.']\w+)*@\w+([- .]\w+)*\.\w+([- .]\w+)*"></asp:RegularExpressionValidator>
<br />
<asp:Button ID="btnAccept" OnClick="btnAccept_Click" runat="server" Text="Accept" />
<asp:Label ID="lblThongbao" runat="server"></asp:Label>
</div>
</form>
</body>
</html>
d. Control CompareValidator
Ý nghĩa
Control CompareValidator có 3 kiểu khác nhau để kiểm tra giá trị nhập:
Sử dụng để kiểm tra kiểu dữ liệu.
Sử dụng để so sánh giá trị nhập với một giá trị cố định.
Sử dụng để so sánh gia trị nhập với giá trị của một Control khác trên Form.
Cách sử dụng
Ta đưa Control CompareValidator vào Form và thiết lập cho nó một số thuộc tính sau:
· ControlToValidate: điểu khiển của Form sẽ được kiểm tra.
· ControlToCompare: Điểu khiển dùng để so sánh giá trị.
· Text(ErrorMessage): hiển thị nội dung thông báo lỗi kho có lỗi.
· Type: Kiểu của giá trị sẽ được so sánh.
· Operator: Toán tử so sánh. Có thể là các giá trị:
DataTypeCheck, Equal, GreaterThan, GreaterThanEqual, LessThan,
LessThanEqual, NotEqual.
Ví dụ
Ví dụ 4 sau sẽ yêu cầu nhập vào ngày sinh, nếu người sử dụng nhập vào không đúng dữ liệu dạng ngày thì sẽ có lỗi thông báo.
Code 4: Trang CompareValidator.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CompareValidator.aspx.cs" Inherits="CompareValidator" %>
<!DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>CompareValidator</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="Label1" runat="server" Text="Ngày sinh"></asp:Label>
<asp:TextBox ID="txtNgaysinh" runat="server" Width="154px"></asp:TextBox>
<asp:CompareValidator ID="CompareValidator1" runat="server"
ControlToValidate="txtNgaysinh"
ErrorMessage="Sai dữ liệu phải là kiểu ngày tháng" Operator="DataTypeCheck"
Type="Date"></asp:CompareValidator>
<br />
<asp:Button ID="Button1" runat="server" Text="Accept" />
</div>
</form>
</body>
</html>
Ví dụ sau đây sẽ hướng đưa ra trường hợp với Form tạo tài khoản trên
một trên Web yêu cầu người đăng ký phải nhập mật khẩu 2 lần.
Code 5 trang
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CompareValidator.aspx.cs" Inherits="CompareValidator" %>
<!DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>CompareValidator</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="Label2" runat="server" Text="Nhập mật khẩu "></asp:Label>
<asp:TextBox ID="txtPass" runat="server" TextMode="Password"></asp:TextBox>
<br />
<asp:Label ID="Label3" runat="server" Text="Nhập lại mật khẩu"></asp:Label>
<asp:TextBox ID="txtrePass" runat="server" TextMode="Password"></asp:TextBox>
<asp:CompareValidator ID="CompareValidator2" runat="server"
ControlToCompare="txtPass" ControlToValidate="txtrePass"
ErrorMessage="Nhập mật khẩu 2 lần phải giống nhau"></asp:CompareValidator>
<br />
<asp:Button ID="Button2" runat="server" Text="Accept" />
</div>
</form>
</body>
</html>
e. Control CustomValidator
Ý nghĩa
Nếu những Control Validator trên chưa đủ với ta hoặc ta muốn tạo một
Validator riêng theo ý mình, ta có thể dụng Control CustomValidator, ta
có thể kết hợp CustomValidator với một hàm.
Cách sử dụng và Ví dụ
CustomValidator có 3 thuộc tính hay sử dụng là:
· ControlToValidator: điểu khiển của Form sẽ được kiểm tra
· Text(ErrorMessage): hiển thị nội dung thông báo lỗi kho có lỗi
· ClientValidationFunction: tên của một hàm client- side để thực hiện kiểm tra trên client- side
CustomValidator hỗ trợ 1 sự kiện
ServerValidate: Sự kiện được đưa ra khi CustomValidator thực hiện kiểm chứng.
Ví dụ sau sẽ sử dụng sự kiện ServerValidate để kiểm tra độ dài của
chuỗi được nhập trong Control TextBox, nếu người nhập, nhập vào chuỗi có
độ dài lớn hơn 20 ký tự thì Control CustomValidator sẽ đưa ra thông báo
lỗi.
Ví dụ:
Code 6 trang CustomValidator.aspx
<%@ Page Language="C#" %>
<script runat="server">
void CustomValidator1_ServerValidate(object source, ServerValidateEventArgs e)
{
if (e.Value.Length > 20)
e.IsValid = false;
else
e.IsValid = true;
}
</script>
<!DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>CustomValidator</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="Label1" runat="server" Text="Ghi chú"></asp:Label>
<br />
<asp:TextBox ID="TextBox1" runat="server" Height="95px" TextMode="MultiLine"
Width="218px"></asp:TextBox>
<asp:CustomValidator ID="CustomValidator1" runat="server"
ErrorMessage="Độ dài ghi chú phải nhỏ hơn 20 ký tự"
ControlToValidate="TextBox1" OnServerValidate="CustomValidator1_ServerValidate"></asp:CustomValidator>
<br />
<asp:Button ID="Button1" runat="server" Text="Accept" />
</div>
</form>
</body>
</html>
Ở ví dụ 6 trong hàm “CustomValidator1_ServerValidate” Tham số thứ 2
được truyền tới sự kiện ServerValidator để xử lý. Trong thực thể của lớp
ServerValidateEventArgs có hai thuộc tính
- Value: Giá trị của trường trên Form sẽ được kiểm chứng.
- IsValid: Diễn tả việc kiểm chứng cho kết quả thành công hoặc sai.
Trong ví dụ tiếp theo ta sẽ đưa ra cách sử dụng hàm kiểm chứng
Client- side kết hợp với CustomValidator như thế nào, Trang này chỉ kiểm
tra độ dài của chuỗi nhập vào bên trong TextBox, nhưng nó sẽ kiểm tra
trên cả Server và Client.
Code 7.
<%@ Page Language="C#" %>
<script runat="server">
void CustomValidator1_ServerValidate(object source, ServerValidateEventArgs e)
{
if (e.Value.Length > 20)
e.IsValid = false;
else
e.IsValid = true;
}
</script>
<!DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>CustomValidator</title>
<script language="javascript" type="text/javascript">
function valComments_ClientValidate(source, args)
{
if (args.Value.length > 20)
args.IsValid = false;
else
args.IsValid = true;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="Label1" runat="server" Text="Ghi chú"></asp:Label>
<br />
<asp:TextBox ID="TextBox1" runat="server" Height="95px" TextMode="MultiLine"
Width="218px"></asp:TextBox>
<asp:CustomValidator ID="CustomValidator1" runat="server"
ErrorMessage="Độ dài ghi chú phải nhỏ hơn 20 ký tự" ClientValidationFunction="valComments_ClientValidate"
ControlToValidate="TextBox1" OnServerValidate="CustomValidator1_ServerValidate"></asp:CustomValidator>
<br />
<asp:Button ID="Button1" runat="server" Text="Accept" />
</div>
</form>
</body>
</html>
f. Control ValidationSummary
Ý nghĩa
ValidationSummary cho phép ta liệt kê tất cả các các lỗi kiểm tra
trên trang từ những Control validator vào một vị trí. Control này đặc
biệt tiện ích với Form có độ rộng lớn.
Cách sử dụng
Ta đưa Control ValidationSummary vào Form và thiết lập cho nó một số thuộc tính sau:
· DisplayMode: Cho phép ta chỉ rõ định dạng hiển thị lỗi, nó
có thể là các giá trị như BulletList, List, và SingleParagraph.
· HeaderText: Cho phép ta hiển thị tiêu đề tóm tắt cho các lỗi.
· ShowMessageBox: Cho hiện thị một popup thông báo
· ShowSummary: Cho phép ta ẩn ValidationSummary trên trang.
Ví dụ
Code 8 Trang ValidationSummary.aspx
<%@ Page Language="C#" AutoEventWireup="true" %>
<!DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>ValidationSummary</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ValidationSummary ID="ValSummary" runat="server" />
<table>
<tr>
<td>
<asp:Label ID="Label1" runat="server" Text="Họ tên"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtHoten" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
ErrorMessage="Ta phải nhập họ tên" ControlToValidate="txtHoten">*(Yêu cầu)</asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label2" runat="server" Text="Email"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtEmail" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server"
ErrorMessage="Ta phải nhập hòm thư" ControlToValidate="txtEmail">*(Yêu cầu)</asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server"
ErrorMessage="Hòm thư ta nhập không đúng định dạng"
ControlToValidate="txtEmail"></asp:RegularExpressionValidator>
</td>
</tr>
<tr>
<td colspan="2">
<asp:Button ID="Button1" runat="server" Text="Accept" />
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
Code 8
Chạy ví dụ trên nếu ta không nhập dữ liệu cho các trường nó sẽ thông báo lỗi như sau:
Cũng với ví dụ trên nếu trên Control ValSummary ta thiết lập thuộc
tính ShowMessageBox bằng True và ShowSummary với giá trị bằng False thì
kết xuất của ví dụ thay vì hiển thị là một danh sách lỗi trên Form thì
nó hiển thị một popup thông báo những lỗi trên trang.
Code 9
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ValidationSummary.aspx.cs" Inherits="ValidatorSummary" %>
<!DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>ValidationSummary</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ValidationSummary ShowMessageBox="true" ShowSummary="false" ID="ValSummary" runat="server" />
<table>
<tr>
<td>
<asp:Label ID="Label1" runat="server" Text="Họ tên"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtHoten" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
ErrorMessage="Ta phải nhập họ tên" ControlToValidate="txtHoten">*(Yêu cầu)</asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label2" runat="server" Text="Email"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtEmail" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server"
ErrorMessage="Ta phải nhập hòm thư" ControlToValidate="txtEmail">*(Yêu cầu)</asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server"
ErrorMessage="Hòm thư ta nhập không đúng định dạng"
ControlToValidate="txtEmail"></asp:RegularExpressionValidator>
</td>
</tr>
<tr>
<td colspan="2">
<asp:Button ID="Button1" runat="server" Text="Accept" />
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
Kết xuất của nó:
- 2. Sử dụng Master Page
Ta đang gặp vấn đề thiết kế layout chung cho website của mình?
MasterPage có thể là một đáp án tốt cho ta giải quyết bài toán trên.
Với MasterPage để tạo một giao diện chung nhất cho Website của mình.
Ví dụ website của ta có layout gồm 5 phần banner, footer, left, right
Và content(phần chứa nội dung hiển thị cho các tin). Như vậy ta có
thể thấy trên trang web có các phần có cách trình bầy không thay đổi
trong quá trình duyệt tin. banner, footer, left, right: ta có thể để các
phần này vào một MasterPage và tất các trang web trong website của ta
sẽ áp dụng layout này thông qua contentpage
a. Tạo MasterPage
Các bước tạo MasterPage giống với tạo các trang aspx bình thường
nhưng trên hộp Add New Item ta chọn MasterPage ta thấy dưới ô đặt tên
phần mở rộng của nó sẽ là Master. Ta có thể tạo nhiều MasterPage cho ứng
dụng web của mình.
Ví dụ:
Code 1.
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>MasterPage</title>
<style type="text/css">
html{ background- color:#e5e5e5; font- family:Verdana;}
.content{ background- color:White; border:black 1px solid; width:700px; margin:auto;}
.leftcolumm{ float:left; border- right:black 1px solid; width:200px; padding:5px; height:300px}
.rightcolumm{ float:left; padding:5px; height:300px}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<div>
<asp:ContentPlaceHolder ID="contentplace1" runat="server"></asp:ContentPlaceHolder>
</div>
<div>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
</form>
</body>
</html>
Để sử dụng MasterPage cho các trang aspx ta cần khai báo trên chỉ dẫn
<%@ Page %> với thuộc tính MasterPageFile=”Tên _MasterPage của
ta”
ví dụ
code 2
<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" %>
<asp:Content ID="contentleft" ContentPlaceHolderID="contentplace1" runat="server">
Trinh bay menu Left<br />
Trinh bay menu Left<br />
Trinh bay menu Left<br />
Trinh bay menu Left<br />
</asp:Content>
<asp:Content ID="content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
Trinh bay noidung<br />
Trinh bay noidung<br />
Trinh bay noidung<br />
Trinh bay noidung<br />
</asp:Content>
Trên trang aspx ta khai báo 2 Control asp:content và trong thuộc tính
của nó ta thiết lập ContentPlaceHolderID=”Ten_Placeholder trong trang
masterPage”.
Tạo một Content mặc định
Ta không thể kết hợp một Control Content với tất cả các Control
ContentPlaceHolder. Khi trên trang MasterPage của ta có 3
ContentPlaceHolder mà trong trang aspx của ta chỉ sử dụng hai Control
aspContent và chỉ đến 2 ContentPlaceHolder trên trang MasterPage khi đó
mặc định ContentPlaceHolder thứ 3 vẫn được hiển thị.
b. Đăng ký Master Page trong WebConfiguration
Ta có thể áp dụng MasterPage cho tất cả các trang trong một Folder hay tất cả các Content trong ứng dụng web của mình.
Thay vì việc trong mỗi trang aspx ta phải gọi lời chỉ dẫn trang thẻ
chỉ dẫn <%@ Page %> thì ta có thể thêm nó vào trong file
webconfiguration
Trong ví dụ dưới đây là cách ta sẽ đăng ký một trang SimpleMasterPage
vào ứng dụng web của mình để có thể áp dụng cho tất cả các trang trong
foder(Sub Folder) chứa
Chú ý rằng file web.config này phải cùng nằm trong foleder đó:
<system.web>
<pages masterPageFile="~/SimpleMasterPage.master" />
</system.web>
Sử dụng FindControl trong MasterPage.
Khi ta cần chỉnh sửa hay lấy thông tin của 1 Control từ MasterPage ta
có thể sử dụng phương thức FindControl() trong một Content Page
Ví dụ
Trang Findcontrol.master
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Findcontrol.master.cs" Inherits="Findcontrol" %>
<!DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Findcontrol</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="lblTitle" runat="server" /><br />
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
Trang Findcontrol.aspx
<%@ Page Language="C#" MasterPageFile="~/Findcontrol.master"%>
<script runat="server">
void Page_Load(object sender, EventArgs e)
{
Label lbl = (Label)Master.FindControl("lblTitle");
lbl.Text = "Diễn đàn đại học Hoa Sen";
}
</script>
<asp:Content ID="content" runat="server" ContentPlaceHolderID="ContentPlaceHolder1">
Lay gia tri tu masterpage<br />
Lay gia tri tu masterpage<br />
Lay gia tri tu masterpage<br />
Lay gia tri tu masterpage<br />
Lay gia tri tu masterpage<br />
</asp:Content>
Trình bày thuộc tính MasterPage
Ta có thể trình bày thuộc tính , phương thức từ MasterPage và có thể chỉnh sửa thuộc tính hay phương thức từ trang Content.
Ví dụ
Trang Expose.master
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Expose.master.cs" Inherits="Expose" %>
<script runat="server">
public string BodyTitle
{
get { return lblBody.Text; }
set { lblBody.Text = value; }
}
</script>
<!DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Expose MasterPage Property</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<h1><asp:Label ID="lblBody" runat="server" Text="Sinh Viên Hoa Sen"></asp:Label></h1>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
Trang Expose.aspx
<%@ Page Language="C#" MasterPageFile="~/Expose.master" AutoEventWireup="true" %>
<%@ MasterType VirtualPath="~/Expose.master" %>
<script runat="server">
void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
Master.BodyTitle = "Diễn Đàn Sinh Viên Hoa Sen";
}
}
</script>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
Property, Property, Property, Property, Property, <br />
Property, Property, Property, Property, Property, <br />
Property, Property, Property, Property, Property,<br />
Property, Property, Property, Property, Property<br />
</asp:Content>
Trong ví dụ trên ta sẽ thấy một điểm mới đó là chỉ dẫn MasterType, để
sử dụng được thuộc tính hay phương thức từ MasterPage ta phải thêm vào
chỉ dẫn MasterType và đặt thuộc tính VirtualPath=”Ten_Mastepage”.
- 3. Các đối tượng trong ASP.NET
Trong bất kỳ ứng dụng nào, dù là winform based hay webform based thì
việc giao tiếp (tương tác) với người dùng và giữa các webform với nhau
là điều bắt buộc. Ví dụ ta cần phải lấy thông tin đặt hàng do người dùng
nhập vào và hiển thị trở lại người dùng một số thông tin hữu ích khác,
như kết quả thanh toán…hay một trang chuyển tiếp kết quả cho một trang
khác để xử lý v.v…
Ở các bài trước, để làm điều này chúng ta thực hiện dễ dàng thông qua
các server controls như textbox, listbox, dropdownlist, label,… Tuy
nhiên những Control này chỉ có tác dụng trong một Page còn các trang
khác thì hoàn toàn không thể đọc/ghi giá trị nằm trong các Control này.
Để thực hiện việc giao tiếp (truyền dữ liệu) giữa các webform ASP.NET cung cấp một tập
các Control giúp ta làm việc đó một cách dễ dàng, đó là: Đối tượng Request và đối tượng Response.
Trong phần này, chúng ta cũng tìm hiểu thêm một số đối tượng khác
cũng rất hay dùng khi xây dựng ứng dụng là đối tượng Server, Application
và Session.
a. Request Object
Request là một đối tượng của ASP.NET, nó cho phép đọc các thông tin do các trang khác gửi (Submit) đến.
Các thành phần (thuộc tính và phương thức) chính
Phương thức:
Request.QueryString.Get("Tên_Phần tử cần đọc"): Để đọc giá
trị của một phần tử được gửi theo phương thức Get (Method = "Get")
Phương thức Request.Form.Get("Tên_Phần tử cần đọc"): Để
đọc giá trị của một phần tử được gửi theo phương thức Post (Method =
"Post").
Chú ý: Có thể dùng Request.Form.GetValues và Request.Form.GetValues để đọc.
b. Response Object
Đối tượng này được dùng để gửi nội dung (một xâu) bất kỳ về cho trình duyệt.
Các thành phần (thuộc tính và phương thức) chính
Phương thức: Response.write(<Biểu thức>) dùng để gửi giá trị biều thức truyền vào cho phía trình duyệt.
Phương thức: Flush dùng để đưa dữ liệu còn trong bộ đệm phía server về cho phía trình duyệt.
Phương thức Response.Redirect(“địa chỉ URL”): Chuyển tới một trang khác.
c. Server Object
Dùng để tạo các đối tượng COM
Lấy thông tin về tên máy
Ánh xạ đường dẫn ảo thành đường dẫn vật lý.
Các thành phần (thuộc tính và phương thức) chính
CreateObject(“COM Specification”) Ít dùng trong ứng dụng .NET
MachineName: String; Trả về tên của máy tính server đang chạy.
Mappath(“Virtual path”): Trả về đường dẫn vật lý của đường dẫn ảo tương ứng.
d. Session Object
Biến Sesstion
Khi vào một website, người dùng có thể duyệt rất nhiều trang web của website đó.
Nếu muốn lưu trữ thông tin về khách thăm này trong cả phiên làm việc thì có thể lưu vào các biến, gọi là biến Session.
Nói cách khác, biến session là một biến mà mọi trang trong một phiên (Session) đều có thể truy xuất.
Đối tượng Session
Là đối tượng dùng để quản lý (tạo, đọc, ghi) các biến sesstion và một số thông số khác.
+ Cú pháp để tạo biến Session như sau:
Session.Add("Tên_Biến","Giá trị khởi tạo");
Lưu ý: Tên biến phải đặt trong cặp dấu nháy kép. <Giá trị> có thể là xâu ký tự hoặc số...
Ví dụ : Tạo một biến tên là MaNguoiDung và gán giá trị là TK34
Session.Add(“MaNguoiDung”,“TK34”);
+ Cú pháp để đọc giá trị của một biến sesstion như sau:
Session.Contents[“Tên_Biến”] hoặc dùng chỉ số: Session.Contents[i];
+ Cú pháp để ghi (thay đổi) giá trị của biến session:
Session.Contents[“Tên_Biến”] = <Giá trị mới>
Ví dụ:
Response.write(“Mã người dùng là : “ &Session.Contents[“MaNguoiDung”])
Riêng với đối tượng Session, nó còn có các sự kiện. Các sự kiện này
tự động được gọi mỗi khi một phiên làm việc được tạo ra. Các sự kiện này
có tên là On_Start và On_End. Các sự kiện này được đặt trong file Global.asax.
e. Application Object
Dùng để quản lý các biến có phạm vi toàn ứng dụng. Có tác dụng đến mọi người dùng.
Khái niệm biến toàn ứng dụng
Biến toàn ứng dụng là biến có tác dụng đối với mọi người dùng truy
cập vào website. Mọi trang aspx.cs đều có thể truy cập đến biến này và
dù ở bất kỳ thời điểm nào.
Đối tượng Application
Dùng để quản lý (Tạo, đọc, ghi) các biến có phạm vi toàn ứng dụng.
+ Cú pháp tạo biến Application:
Application.Add(“Tên_Biến”, <Giá trị khởi tạo>);
+ Ví dụ: Tạo biến So_Nguoi_Truy_Cap
Application.Add(“So_Nguoi_Truy_Cap”, 0)
+ Truy xuất đến biến Application:
Application.Contents[“Tên_Biến”] hoặc chỉ số: Application.Contents[i]
+ Ví dụ : Đọc và ghi biến Application.
Application.Contents[“So_Nguoi_Truy_Cap”] =
Application.Contents[“So_Nguoi_Truy_Cap”] + 1
Response.write(“Ta là vị khách thứ: “ &
Application.Contents[“So_Nguoi_Truy_Cap”])
Ngoài ra, đối tượng Application còn có 2 phương thức thường dùng là
Application.Lock(): Để khóa không cho người khác sửa đổi các biến toàn cục và
Application.UnLock() để mở khóa .
Đối tượng Application cũng có 2 sự kiện đó là Application_OnStart và Application_OnEND. Sự kiện OnStart chỉ được kích hoạt duy nhất một lần khi yêu cầu đầu tiên phát sinh. Sự kiện OnEND được
kích hoạt khi dịch vụ web dừng (unload). Đối tượng Application có 2
phương thức là Lock và Unlock. Khi gọi phương thức Lock (khóa) thì tất
cả các ứng dụng không được phép thay đổi các giá trị Application. Để các
ứng dụng khác được phép thay đổi các biến Application thì gọi phương
thức Unlock.
Mã lệnh viết cho 2 sự kiện này cũng được đặt trong file Global.asa.
0 comments:
Post a Comment