[ASP.NET 教程] 二. Web Forms
最後更新:2017-02-28
來源:互聯網
上載者:User
asp.net|web|教程 1. 伺服器端處理
雖然form.html能夠通過post或者get方法產生回傳,但是它仍然不能夠處理使用者輸入,仍然是一個靜態頁面,現在我們需要在伺服器端處理使用者輸入及回傳。
在伺服器端處理使用者輸入有很多方式,因為本文是ASP.NET教程,故只談ASP.NET。
ASP.NET使用Web Form來描述Web頁面,通過物件導向的編程方式,配合.NET Framework,使Web應用程式設計變得更簡單,更高效,功能更為強大。
2. Web Forms
先從一個簡單的樣本程式開始:
doadd.aspx
HTML 程式碼:
<html>
<head>
<title>web form</title>
</head>
<body>
<form runat="server">
<asp:TextBox runat="server" id="value1" />
+ <asp:TextBox runat="server" id="value2" />
<asp:Button runat="server" Text=" = " OnClick="Add" />
<asp:Label runat="server" id="result" />
</form>
</body>
</html>
<script language="c#" runat="server">
void Add(object sender, EventArgs e)
{
if(value1.Text == "")
value1.Text = "0";
if(value2.Text == "")
value2.Text = "0";
try
{
result.Text = (int.Parse(value1.Text) + int.Parse(value2.Text)).ToString();
}
catch
{
result.Text = "Error";
}
}
</script>
這裡假設讀者已經正確安裝IIS和ASP.NET,且Web伺服器的主目錄為C:\Inetpub\wwwroot\,以後如無特殊說明,均如此。
將該檔案放在C:\Inetpub\wwwroot\,儲存為doadd.aspx,然後在瀏覽器的地址欄輸入http://localhost/doadd.aspx ,Web Form即呈現在瀏覽器中。
頁面上有2個輸入框,一個按鈕,當使用者單擊“=”按鈕時,程式會將2個輸入框中的值相加,然後將結果顯示在等號按鈕之後,如果輸入了錯誤的值,結果顯示“Error”。
這個程式十分簡單,但是它卻是一個完整的動態Web程式。它在伺服器端處理使用者輸入,然後動態產生HTML頁面。
使用IE開啟頁面後,選擇菜單【查看】|【源檔案】,會看到下面的HTML原始碼:
HTML 程式碼:
<html>
<head>
<title>web form</title>
</head>
<body>
<form name="_ctl0" method="post" action="1.aspx" id="_ctl0">
<input type="hidden" name="__VIEWSTATE" value="dDwxOTE0NDY4ODE2Ozs+yeczcNbLHD6d7s7+Uue+wrxR/6I=" />
<input name="value1" type="text" id="value1" />
+ <input name="value2" type="text" id="value2" />
<input type="submit" name="_ctl1" value=" = " />
<span id="result"></span>
</form>
</body>
<html>
可以看出來TextBox控制項變成了<input type=”text” />標記,Button控制項變成了<input type=”submit” />標記,Label控制項變了<span></span>標記,其中還有一個奇怪的<input type=”hidden”>標籤,名為__VIEWSTATE,現在只需要知道它是ASP.NET用來處理伺服器和瀏覽器間往返資料的一種機制,以後會詳細介紹。
觀察aspx檔案,可以看到form標籤和其中的所有控制項都有一個屬性:runat=”server”,這表示這個標籤在伺服器端運行,而不是直接發送到用戶端瀏覽器。
一個<asp:...>控制項實際上是對應於一個System.Web.UI.WebControls中的類,比如<asp:TextBox />對應於System.Web.UI.WebControls.TextBox,<asp:Button />對應於System.Web.UI.WebControls.Button,這些標籤中還可以包含一些其他屬性,例如<asp:Button/>的Text屬性對應了System.Web.UI.WebControls.Button類中的Text屬性,比較特殊是id屬性,它表示該控制項的可程式化名稱,用於在代碼中訪問該控制項。
<script></script>指令碼塊也標記為了runat=”server”,因為這是在伺服器端啟動並執行代碼,而不是用戶端指令碼。
觀察<asp:Button />標籤,其中有一個屬性:OnClick=”Add”,它指定了一個事件處理常式,當使用者點擊按鈕時,會觸發該Click事件,於是程式調用<script></script>塊中的Add方法。添加事件處理的規則是:將事件名稱加上首碼“On”,作為控制項標記的一個屬性。例如:<asp:Button OnLoad=”button_load” runat=”server” />,其中的事件名稱,可以查閱.NET Framework SDK文檔中對應類的公用事件。
下面簡單描述一下事件模型的底層原理,在伺服器返回給用戶端的HTML中,有一個html form,其中有一個提交按鈕,單擊這個按鈕時,瀏覽器利用POST方法將<input>控制項中的輸入傳回伺服器,ASP.NET知道使用者單擊了“=”按鈕而產生了回傳 ,在伺服器端響應Click事件,於是ASP.NET調用Add方法,然後再一次產生HTML頁面,因為調用Add方法時對Label控制項的Text屬性賦了值,所以產生的HTML中<span></span>標記包含了一個字串,對應Label控制項的Text屬性值。