ASP.NET 網頁製作教本 -- 從基本語法學起 第5章 ASP.NET 網頁
Download
Report
Transcript ASP.NET 網頁製作教本 -- 從基本語法學起 第5章 ASP.NET 網頁
ASP.NET 網頁製作教本 –
從基本語法學起
第5章 ASP.NET 網頁
的基本結構
5-1 動態輸出資料的 <% %>
與 HTML 標示混合使用的
Response.Write
<%
Response.Write( "我十八歲，我不抽煙！" )
%>
stupid.aspx
<%
Response.Write(
Response.Write(
Response.Write(
Response.Write(
Response.Write(
Response.Write(
Response.Write(
%>
"<HTML>" )
"<BODY BGCOLOR=""#FFFFFF"">" )
"我的第一個 ASP 網頁" )
"<HR>現在的時間是：" )
Now )
"</BODY>" )
"</HTML>" )
HTML 標示中含有雙引號
遇到 HTML 標示中含有雙引號時(例如
<BODY BgColor= “#FFFFFF”>)，則必須
把 HTML 標示中的雙引號寫成兩個雙引
號，例如：
Response. Write("<BODY BgColor=""#FFFFFF"">" )
因為放在 " " 裡面，所以 " 必須寫成 ""
smart.aspx
<HTML>
<BODY BGCOLOR="#FFFFFF">
我的第一個 ASP 網頁
<HR>現在的時間是：
<%
Response.Write( Now )
%>
</BODY>
</HTML
練習
將以下程式改成類似 smart.aspx 的型式
<%
Response.Write( "<HTML>" )
Response.Write( "<BODY BgColor=""White"">" )
Response.Write( "今天是:" )
Dim Week
Week = DatePart( DateInterval.Weekday, Now )
Response.Write( WeekdayName(Week) )
Response.Write( "</BODY>" )
Response.Write( "</HTML>" )
%>
<%=資料%>：
簡化版的 Response.Write(1)
把 <%、程式、%> 各自寫成獨立的一行，
例如：
<%
…程式第一行
…程式第二行
…
%>
<%=資料%>：
簡化版的 Response.Write(2)
<% 與 %> 可以跟程式寫在同一行，例如：
<% Response.Write( Now ) %>
因為 ASP.NET 能夠加以解讀，所以
跟程式寫在同一行也沒有關係。
如果在 <% … %> 之間的程式只有一行
Response.Write(XXX) (XXX為變數、常數、
或運算式…)，可以將它簡寫成 <%＝
XXX%>：
<%Response.Write( Now )%>
<%=Now%>
simple.aspx
<HTML>
<BODY BGCOLOR="#FFFFFF">
我的第一個 ASP 網頁
<HR>現在的時間是：<%=Now%>
</BODY>
</HTML>
fruit0.aspx 網頁
fruit0.aspx 原始碼
<%
Dim weekstr() = { "日", "一", "二", "三", "四", "五", "六" }
Dim Nweek = DatePart( DateInterval.Weekday, Now ) - 1
Dim Cweek = weekstr(Nweek)
%>
<!-- 以上是 fruit0.aspx 的前半段-->
<!-- 以下是 fruit0.aspx 的後半段-->
<HTML><BODY BGCOLOR="#FFFFFF">
<H2>星期<%=Cweek%>的水果是
<HR WIDTH="100%"></H2>
<CENTER>
<IMG SRC="fruit<%=Nweek%>.gif">
</CENTER>
</BODY>
</HTML>
fruit0.aspx 所輸出的 HTML
檢 視 後 半 段 ， 除 了 < % = Cweek%> 及
<%=Nweek%> 之外，其餘都是標準的
HTML 標 示 ， 假 設 變 數 Cweek 等 於
“三”、而變數 Nweek 等於 3，則此一
網頁輸出之原始碼將如下：
<HTML><BODY BGCOLOR="#FFFFFF">
<H2>星期三的水果是</FONT>
<HR WIDTH="100%"></H2>
<CENTER>
<IMG SRC="fruit3.gif">
</CENTER>
</BODY>
</HTML>
fruit0.aspx 前半段
DatePart( DateInterval.Weekday, Now )
會傳回今日是星期幾(星期日＝1、星期
一＝2、…、星期六＝ 7)，因此 Nweek
及 Cweek 的值會隨著星期幾來變。
結構清晰的ASP 網頁
像 fruit0.aspx 這樣的 ASP.NET 網頁可以說是結
構相當不錯的動態網頁，整個原始檔被分成 VB
程式(fruit0.aspx前半段)及 HTML 標示
(fruit0.aspx後半段)兩部分。
其中 VB 程式部分用來產生 Nweek 及 Cweek 變
數的值，而 HTML 標示部分則會利用
<%=Nweek%> 及 <%=Cweek%> 將 Nweek 及
Cweek 變數的值融入 HTML 標示中而製作出動
態網頁。
練習(1)
將以下程式中的 Response.Write 使用
<%= 資料%> 來取代，並且仿效
fruit0.aspx 將 VB 程式與 HTML 標示明確
地分開。
練習(2)
<HTML>
<BODY>
今天是：
<%
Dim Week
Week = DatePart( DateInterval.Weekday, Now() )
If Week = 1 Then
' 星期日
Response.Write( "<FONT COLOR=Red>" )
ElseIf Week = 7 Then ' 星期六
Response.Write( "<FONT COLOR=Green>" )
Else
Response.Write( "<FONT COLOR=Blue>" )
End If
Response.Write( WeekdayName(Week) )
Response.Write( "</FONT>" )
%>
</BODY>
</HTML>
5-2 Server 控制元件與動態網頁
Server 控制元件的安插
要 Server 控制元件來顯示動態資料，先
將 Server 控制元件安插於 HTML 文件中，
安插之標示如下：(最後的 / 不可省略)
<asp:元件名稱 runat="server" id="ID" 其他屬性="屬性值" …/>
asp:Label runat="server" id="Message" Text="歡迎光臨"
BorderWidth="1" />
以上 Label 控制元件顯示在網頁上的結果
區塊標示
Server 控制元件具備區塊的觀念 (第一行
最後面不再有 / 符號)
<asp:元件名稱 runat="server" id="ID" 其他屬性="屬性值" …>
</asp:元件名稱>
例如 ：
<asp:Label runat="server" id="Message" Text="歡迎光臨"
BorderWidth="1">
</asp:Label>
利用 Page_Load
事件程序動態改變資料(1)
寫程式讓 Server 控制元件動態改變內容：
<HTML>
<BODY BGCOLOR="#FFFFFF">
現在的時間是：
<asp:Label runat="server" id="Message" Text="歡迎光臨"
BorderWidth="1" />
</BODY>
</HTML>
<Script Language="VB" runat="server">
Sub Page_Load(sender As Object, e As EventArgs)
' 改變 Label 的內容
Message.Text = Now
End Sub
</Script>
利用 Page_Load
事件程序動態改變資料(2)
把原本顯示成「歡迎光臨」的文字改變
成「系統時間」，這段標示成粗體字的
程式稱為 Page_Load 事件程序。
Page_Load 事件程序
Page_Load 事件程序是另一種形式的副程
式，副程式的執行是因為被呼叫，而
Page_Load 事件程序的執行則是因為「網
頁被載入」(也就是「網頁被瀏覽」)這個
事件的發生，如下圖：
呼叫
發生網頁被載入事件
副程式
事件程序: Page_Load()
與 <% %> 的比較
如果要使用 <% %> 並且讓時間有外框，
必須藉助 <Span> 標示來設定文字的外框：
<HTML>
<BODY BGCOLOR="#FFFFFF">
現在的時間是：
<Span style="border-width:1px;border-style:solid;">
<%=Now%>
</Span>
</BODY>
</HTML>
練習
將以下網頁的 <% %> 改成 Label 控制元
件：
<HTML>
<BODY BgColor="#FFFFFF">
<%=Request("Name")%> 歡迎您，您喜歡的電腦學科是
<%=Request("Love")%>
</BODY>
</HTML>
5-3 輸入表單的基礎
輸入表單的基本架構(1)
輸入表單必須含有輸入欄位及輸入鈕，
ASP.NET 所提供的輸入欄位很多，包含
TextBox、RadioButton、CheckBox、
ListBox… 等 ， 輸 入 鈕 則 有 Button 及
LinkButton ，它們也都是 Server 控制元
件。
輸入表單的基本架構(2)
輸入欄位
輸入鈕
欲製作出此一輸入表單，安插 Server 控
制元件的標示如下：
<asp:TextBox runat=“server” />
姓名欄位
<asp:TextBox runat=“server” />
興趣欄位
<asp:Button runat=“server” Text=“輸入” /> 輸入鈕
輸入表單的基本架構(3)
<HTML>
<BODY BgColor="#FFFFFF">
<Form runat="server">
姓名：<asp:TextBox runat="server" id="Name" /><P>
興趣：<asp:TextBox runat="server" id="Love" /><P>
<asp:Button runat="server" Text="輸入" OnClick="Button_Click" />
</Form>
</BODY>
</HTML>
<script Language="VB" runat="server">
Sub Button_Click(sender As Object, e As EventArgs)
Dim Output
Output = Name.Text & " 歡迎您, 您喜歡的電腦學科是 " & Love.Text
Response.Write( Output )
End Sub
</script>
輸入表單的基本架構(4)
網頁剛啟動時
輸入資料並且按下輸入鈕
輸入表單的基本架構(5)
<Form runat="server">
id="Name"
2.讀取輸入資料的根據
1. 構成
輸入
表單
</Form>
id="Love"
3.按下按鈕後啟動執行
Sub Button_Click( ... )
...
OnClick="Button_Click" End Sub
練習
完成一個含有「國文」、「英文」、「數
學」欄位的輸入表單，以供輸入「國文」、
「英文」、「數學」成績，而輸入後，要
在網頁上顯示三科的平均成績。
表單資料的輸出
我想把資料輸出在這裡
想要指定輸出的位置，最好的方法是在
欲輸出資料的位置上安插一個 Label 控
制元件，然後利用以下敘述輸出資料：
Label.Text = 欲輸出的資料
表單資料的輸出 -- Form2.aspx
<HTML>
<BODY BgColor="#FFFFFF">
<Form runat="server">
姓名：<asp:TextBox runat="server" id="Name" /><P>
興趣：<asp:TextBox runat="server" id="Love" /><P>
<asp:Button runat="server" Text="輸入" OnClick="Button_Click" />
<HR>
<asp:Label runat="server" id="Msg" />
</Form>
</BODY>
</HTML>
<script Language="VB" runat="server">
Sub Button_Click(sender As Object, e As EventArgs)
Msg.Text = Name.Text & " 歡迎您，您喜歡的電腦學科是 " & Love.Text
End Sub
</script>
5-4 網頁間的資料傳遞
網頁間的資料傳遞
網頁一
輸入資料
網頁二
資料
資料確認
網頁三
資料
處理資料
網頁的切換
切換網頁的方法有兩種：
1. Response.Redirect( "網頁" )
2. Server.Transfer( ".aspx網頁" )
例如：
Response.Redirect( "Show.aspx" )
Server.Transfer( "Show.aspx" )
' 由目前網頁切換到Show.aspx
' 由目前網頁切換到Show.aspx
網頁的切換 --切換對象(1)
對 Response.Redirect 來說，只要是存在
的網頁，都可以成為被切換的對象，例
如：
Response.Redirect( "http://www.microsoft.com")
' 網站
Response.Redirect( "http://211.72.140.2")
' 網址
Response.Redirect( "http://localhost/kjaspx")
' 網站+目錄
Response.Redirect( "../index.htm")
' 相對目錄的網頁
Response.Redirect( "Show.aspx")
' 同目錄的網頁
網頁的切換 --切換對象(2)
對 Server.Transfer 來說，卻只能切換到同
目錄或子目錄的 .aspx 網頁，例如：
Server.Transfer( “Show.aspx”)
‘ 相同目錄的.aspx網頁
Server.Transfer( “01/Show.aspx”) ’ 01子目錄的.aspx網頁
Server.Transfer( "Form1.htm" ) ' 錯誤, 不是.aspx網頁
Server.Transfer( "../index.aspx")
' 錯誤, 不是同目錄或
子目錄
Server.Transfer( "http://www.microsoft.com")
' 錯誤,
網站
Server.Transfer( "http://211.72.140.2")
' 錯誤, 網址
網頁的切換 –
Response.Redirect vs.
Server.Transfer
對 Response.Redirect 來說，切換到另一
個網頁之後，瀏覽器的網址欄將顯示新
網址 。
但是對 Server.Transfer 來說，切換到另
一個網頁之後，瀏覽器的網址欄仍然顯
示舊網址 。
網頁的切換 – 實例一(1)
1.
實例：
瀏覽 Switch1.aspx 網頁，其網頁如下圖，
請在「姓名」及「興趣」欄位輸入
kjwang 及 ASP.NET，然後按下「輸入」
鈕。
網頁的切換 – 實例一(2)
Switch1.aspx
Echo.aspx
網頁的切換 – 實例一(3)
在 Switch1.aspx 之中，切換網頁的程式
如下，我們看到切換網頁的方法是
Response.Redirect：
Sub Button_Click(sender As Object, e As EventArgs)
Dim URL
URL = "Echo.aspx?Name=" & Name.Text & "&Love=" & Love.Text
Response.Redirect( URL )
End Sub
網頁的切換 – 實例一(4)
2.按下「輸入」鈕後，網頁會切換到
Echo.aspx，請檢視瀏覽器的網址欄，可
看到網址欄已經變成 Echo.aspx 及附帶
的資料，如上圖。
網頁的切換 – 實例二(1)
3.接著瀏覽 Switch2.aspx 網頁，其網頁功能與
Switch1.aspx 相同，但是它切換網頁的方法是
Server.Transfer，程式如下：
Sub Button_Click(sender As Object, e As EventArgs)
Dim URL
URL = "Echo.aspx?Name=" & Name.Text & "&Love=" & Love.Text
Server.Transfer( URL )
End Sub
同樣在「姓名」及「興趣」欄位輸入 kjwang 及
ASP.NET，然後按下「輸入」鈕。
網頁的切換 – 實例二(2)
Switch2.aspx
Echo.aspx
網頁的切換 – 實例二(3)
4.結果網頁也會切換到 Echo.aspx，但網址
欄依然是 Switch2.aspx，沒有改變，如
上圖。
網頁間的資料傳遞
網頁間的資料傳遞，指的是切換到新網
頁時，舊網頁傳遞資料給新網頁。
http://localhost/kjaspx/ch05/Echo.aspx?Name=kjwang&Love=ASP.NET
利用附帶在網址後面的參數來傳遞資料
接受資料的一方(以上面這個 Echo.aspx
為例)使用 Request 來讀取資料，例如：
Request("Name") ' 讀取Name參數的資料, 得到kjwang
Request("Love") ' 讀取Love參數的資料, 得到 ASP.NET
網址的編碼 (1)
利用網址來傳遞資料，必須注意的事情
是網址的編碼 。例如：
Switch1.aspx
Echo.aspx
為什麼 Daniel 不見了
網址的編碼 (2)
原因在於「Kitty & Daniel」這份資料中含有 &
符號，但 & 是參數的分隔符號，以致於資料解
讀錯誤。需修改以下敘述：
URL = "Echo.aspx?Name=" & Name.Text & "&Love=" & Love.Text
使成為：
URL = "Echo.aspx?Name=" & Server.URLEncode(Name.Text) & _
"&Love=" & Server.URLEncode(Love.Text)
也就是先呼叫 Server.URLEncode 對欲傳遞的
資料加以編碼。
練習
撰寫一 Input.aspx 網頁供輸入「姓名、
電話、地址」資料，輸入之後傳遞到
Show.aspx 網頁中顯示資料。
Input.aspx
Show.aspx
大量資料的傳遞
網頁間傳遞大量資料時，也要小心，
Response.Redirect 能夠傳遞的資料以
2KB 為限，超過就會產生錯誤，因此，
當所要傳遞的資料超過 2KB 時，務必使
用 Server.Transfer。