I. PHÂN TÍCH MÃ Ở TRANG ASP.NET ÐẦU TIÊN
J. XÂY DỰNG MỘT TRANG ASP.NET ÐƠN GIẢN
Bài Tập 1:
Mục đích:
Trong bài tập này, ta sẽ xây dựng một trang ASP.NET dùng một hộp chữ để tiếp nhận tên của khách vãng lai và in ra (hay hiển thị) lời chào người khách đó.
Các bước thứ tự như sau:
1. Chạy ứng dụng Notepad và gõ những hàng chữ lập trình y chang như mã dưới đây và lưu trữ (Save As) trong folder D:\Net\Vovisoft ASPNET\Bai02\baitap01\simple.aspx với encoding UTF-8 (hay bất cứ đâu tùy theo cách xếp đặt Virual Directory mà ta bố trí với IIS). Nếu muốn gõ tiếng Việt, ta dùng VPSKeys Version 4.0 như đã trình bày ở Bài Học 01. Trong bài học này, ta tạm thời chấp nhận các mệnh lệnh và cú pháp trong trang ASP.NET và sẽ tham khảo chi tiết các Server Controls ở bài học kế.
<%@ Page Language="VB" %>
<script runat="server">
Sub tbMessage_Change (Sender AS Object, E As EventArgs) lblmessage.Text = "Chào bạn " + tbMessage.Text
End Sub </script>
<html> <body>
<font size="5">Simple Application</font><hr><p>
<form runat="server"> Please enter your name: <asp:textbox id="tbMessage"
OnTextChanged="tbMessage_Change" runat=server/>
<asp:button id="btSubmit" Text="Submit" runat=server/><p>
<asp:label id="lblMessage" font-size="20pt" runat=server/>
</form>
</body> </html>
2. Hiển thị trang ASP.NET này với IE Client Browser và gõ hàng chữ dưới đây vào hộp địa chỉ (Address):
http://cantho/VovisoftASPNET/Bai02/baitap01/simple.aspx rồi nhấn nút <Enter>. Ta có
thể gõ tên của mình vào hộp chữ kế bên hàng danh hiệu (label) "Please enter your name:" và nhấp vào nút Submit, ta sẽ có 1 trang ASP.NET chào mừng khách vãng lai như sau:
Phần Chú Thích:
<%@ Page Language="VB" %>
Ðược dùng để chỉ thị cho ASP.NET ta dùng VB.NET làm ngơn ngữ lập trình mặc định.
<script runat="server">
Sub tbMessage_Change (Sender AS Object, E As EventArgs) lblmessage.Text = "Chào bạn " + tbMessage.Text
End Sub </script>
Khi sự cố tbMessage_Change khởi động, ta dùng lblmessage.Text để hiển thị hàng chữ
"Chào bạn " + tbMessage.Text ở trang ASP.NET.
<form runat="server"> Please enter your name: <asp:textbox id="tbMessage"
OnTextChanged="tbMessage_Change" runat=server/>
<asp:button id="btSubmit" Text="Submit" runat=server/><p>
<asp:label id="lblMessage" font-size="20pt" runat=server/>
Phần HTML này dùng để trình bày các Server Controls trong trang ASP.NET theo thứ tự từ trên xuống dưới, các thay đổi khác (tỷ như thay đổi do việc khởi động 1 sự cố nào đó) sẽ do phần Script chăm nom và thi hành.
Mỗi Server Control đều mang 1 ID quy ước và duy nhất, thí dụ:
<asp:textbox có ID duy nhất là tbMessage trong đó quy ước tb được phổ biến và chấp
nhận riêng biệt cho cơng cụ textbox, sự cố OnTextChanged có tên gọi là 'tbMessage_Change' và Server Control này <asp:textbox được thi hành ở Server Side.
Các Server Control kế gồm có <asp:button (ID btSubmit) và <asp:label (ID lblMessage) dùng cho nút bấm (ta cũng có thể dùng quy ước btn hay bt cho nút bấm) và nhãn hiệu với quy ước lbl.
Bài Tập 2:
Mục đích:
Trong bài tập này, ta sẽ xây dựng một trang kiểm tra vài phép toán đơn giản tỷ như phép cộng, phép trừ, phép nhân và phép chia với 2 con số nguyên. Ngưòi dùng sẽ gõ vào 2 con số ngun và sau đó chọn phép tính bằng cách nhấn nút bấm có dấu +, -, * hay / để hiển thị kết quả.
1. Chạy ứng dụng Notepad và gõ những hàng chữ lập trình y chang như dưới đây và lưu trữ (Save As) trong folder D:\Net\Vovisoft ASPNET\Bai02\baitap02\math.aspx với encoding UTF-8:
<HTML> <HEAD>
<script language="VB" runat="server">
Sub btAdd_Click(Sender As Object, E As EventArgs)
lblMessage.Text = "Addition Result: " & Cint(tbNumber1.Text) + Cint(tbNumber2.Text) End Sub
Sub btSubtract_Click(Sender As Object, E As EventArgs)
lblMessage.Text = "Substraction Result: " & Cint(tbNumber1.Text) - Cint(tbNumber2.Text) End Sub
Sub btMultiply_Click(Sender As Object, E As EventArgs)
lblMessage.Text = "Multiplication Result: " & Cint(tbNumber1.Text) * Cint(tbNumber2.Text) End Sub
Sub btDivide_Click(Sender As Object, E As EventArgs)
lblMessage.Text = "Division Result: " & Cint(tbNumber1.Text) / Cint(tbNumber2.Text) End Sub
</script>
</HEAD>
<BODY>
<form runat="server">
Number 1: <asp:textbox id="tbNumber1" runat=server/><br> Number 2: <asp:textbox id="tbNumber2" runat=server/><p>
<asp:button id="btAdd" Text=" + " OnClick="btAdd_Click" runat=server/>
<asp:button id="btSubtract" Text=" - " OnClick="btSubtract_Click" runat=server/> <asp:button id="btMultiply" Text=" * " OnClick="btMultiply_Click" runat=server/> <asp:button id="btDivide" Text=" / " OnClick="btDivide_Click" runat=server/><p> <asp:label id="lblMessage" font-size="15pt" runat=server/>
</form>
</BODY> </HTML>
2. Hiển thị trang ASP.NET này với IE Client Browser và gõ hàng chữ dưới đây vào hộp địa chỉ (Address): http://cantho/VovisoftASPNET/Bai02/baitap02/math.aspx rồi nhấn nút <Enter>. Trong trang kiểm tra này, ta gõ số 100, 200 vào trong các hộp chữ Number 1, Number 2 rối nhấn nút bấm + chẳng hạn để hiển thị hàng chữ 'Addition Result: 300'
Phần Chú Thích:
<script language="VB" runat="server">
Sub btAdd_Click(Sender As Object, E As EventArgs)
lblMessage.Text = "Addition Result: " & Cint(tbNumber1.Text) + Cint(tbNumber2.Text) End Sub
... ...
</script>
Phần script này dùng để thi hành các phép toán cộng, trừ, nhân và chia các số nguyên tùy theo sự chọn lựa của user, trong đó nút có dấu (+) sẽ khởi động sự cố btAdd_Click và subroutine btAdd_Click đáp ứng bằng cách cộng 2 số nguyên đã được đưa vào ở 2 hộp chữ Number 1 và Number 2 với nhau, sau đó lưu trữ kết quả ở lblMessage.
Lưu ý ở đây, ta dùng nhóm từ 'lưu trữ kết quả' chứ khơng 'hiển thị kết quả' ở phần script này. Lưu trữ bằng cách ấn định lblMessage.Text bằng "Addition Result: " và kết quả phép cộng, cịn phần trình bày, ta phó mặc cho mã HTML.
<BODY>
<font size="5">Simple Mathematics</font><hr><p> <form runat="server">
Number 1: <asp:textbox id="tbNumber1" runat=server/><br> Number 2: <asp:textbox id="tbNumber2" runat=server/><p>
<asp:button id="btSubtract" Text=" - " OnClick="btSubtract_Click" runat=server/> <asp:button id="btMultiply" Text=" * " OnClick="btMultiply_Click" runat=server/> <asp:button id="btDivide" Text=" / " OnClick="btDivide_Click" runat=server/><p> <asp:label id="lblMessage" font-size="15pt" runat=server/>
</form> </BODY>
Phần mã HTML này chỉ dùng để trình bày các controls trong trang web mà thơi, ở đây dưới hình thức 1 form, ta bố trí 2 textbox cho Number 1 và Number 2, 4 nút bấm Cộng, Trừ, Nhân, Chia và 1 nhãn hiệu lblMessage để hiển thị kết quả phép toán đơn giản. Tất cả đều được thi hành ở Server Side.