用一個案例看懂ASP.NET頁面處理流程

2018-12-10 11:05:58王雅新

科技視界 2018年21期

王雅新

【摘要】Web頁面是asp.net應用程序的重要組成部分，理解頁面生命周期中執行的一系列步驟對軟件代碼的設計和優化非常重要。文章通過對單選按鈕功能調試的案例剖析，分析和演示了Web頁面處理過程中幾個重要的生命周期階段對頁面交互數據的影響以及相關的代碼處理。

【關鍵詞】案例；頁面生命周期

中圖分類號： TP393.092 文獻標識碼： A 文章編號： 2095-2457（2018）21-0071-002

DOI：10.19694/j.cnki.issn2095-2457.2018.21.032

【Abstract】Web Form are an important part of ASP.Net applications，and it is important to understand the sequence of steps that are executed in the Asp.Net Form life cycle for the design and optimization of software code.This paper analyzes and demonstrates the influence of several important life cycle stages of Web Form processing on page interaction data and relevant code processing through case analysis of the function debugging of radio buttons.

【Key words】Case；Web Form Life Cycle

1 案例調試中的排錯處理

在一個用于教學的軟件系統的設計中，要完成一個從數據庫中獲取信息并在頁面中顯示的功能。在Web頁面設計中，性別數據使用了兩個單選按鈕控件RadioButton，其他數據都用TextBox控件顯示。數據庫信息的檢索和顯示是通過按鈕的事件來處理的，頁面結構如下圖所示：

圖1

從圖中可以看出，當在學號文本框中輸入學號信息，點擊提交按鈕后，數據庫中的查詢結果信息就應該正確顯示出來了。但是，在實際調試運行中，查詢結果中性別信息的顯示令人迷茫，我用了三個學號測試數據，對應的數據庫中的性別字段值分別是“男，女，男”，第一次輸入關鍵字，提交查詢，頁面能夠正確顯示數據庫中的數據信息；然后，修改查詢關鍵字，再次提交，頁面也能夠正確顯示查詢結果；再輸入第三個學號信息，提交后，單選按鈕顯示的是“女”被選中，除了單選按鈕信息不正確外，其他信息都正確顯示。換一組學號測試數據，對應的數據庫中的性別字段值分別是“女，男”，結果顯示，第一次提交查詢，能夠正確顯示數據庫信息，但是，第二次輸入對應性別為“男”的學號信息時，查詢結果顯示的還是“女”單選按鈕選中的狀態，除了性別信息顯示不正確外，其他數據庫信息顯示都正確。在按鈕事件代碼中，依據數據庫的查詢結果設置單選按鈕的代碼如下：

if （dr.GetBoolean（2） == true）

RadioButton1.Checked = true；

else

RadioButton2.Checked = true；

通過測試和分析，我們找到了問題的原因，由于忽視了頁面處理流程中生命周期事件的處理順序，導致代碼設計上的漏洞。對按鈕事件代碼做了一點修改，測試結果能正確顯示數據庫查詢信息了。

2 頁面生命周期各個階段的處理步驟

ASP.NET頁面是Web應用程序的可編程用戶接口，當ASPX頁面被客戶端請求時，頁面的服務器端代碼被執行，執行結果被送回到瀏覽器端；當頁面提交時，Form表單的action屬性默認為本提交頁面，HTTP協議是一個無狀態協議，在服務器端重建頁面時，如何保證提交頁面的所有視圖狀態信息（頁面對象的屬性和頁面控件的屬性）與重建頁面的視圖狀態信息的之間的完整性呢？其實，不論頁面是首次被請求，還是頁面事件被提交到服務器后重建的頁面，服務器在把結果頁面送到瀏覽器前都會把當前頁面的所有視圖狀態封裝到一個隱藏的輸入域VIEWSTATE中，和HTML輸出流一起發送到客戶端瀏覽中。因此，當頁面被提交到服務器時，上傳到服務器的信息包括當前Form表單中用戶選擇或輸入的數據，隱藏的輸入域中頁面視圖狀態信息以及用戶交互的事件信息。這三類信息被服務器接收后，會在頁面生命周期中不同階段觸發不同的服務器端生命周期事件來處理這些信息，同時也實現了在不同的頁面之間傳遞頁面視圖狀態信息。頁面生命周期包括以下幾個重要階段：

（1）頁面初始化階段：此階段，通過依次執行的三個事件，頁面自身以及頁面中的控件被首次初始化。PreIntit事件是頁面生命周期的進入點，依據請求頁面的類型設置頁面屬性的值（包括IsCallBack、IsCrossPagePostback及IsPostback），實例化頁面控件；Init 事件是以一種上下文相關的方法加載頁面和控件部分狀態，為控件集合中的每個控件設置命名容器和一個具體的ID；IntiComplete事件是只有頁面才有的事件，表明初始化階段結束，頁面及控件的視圖狀態變更跟蹤功能已被打開。

Page_Init事件事件只是在第一次載入頁面時被調用，這之后每次重新載入頁面首先觸發的會是Page_Load事件。

（2）視圖狀態恢復階段：本階段僅在頁面回發時才執行。如果頁面是回發請求，則在LoadViewState事件中恢復VIEWSTATE隱藏字段內容，_VIEWSTATE隱藏字段保存著上一個請求結束時所有控件視圖狀態。通過控件ID為每個控件加載視圖的狀態，使頁面視圖狀態恢復到上一次提交保留在服務器上的每個控件的狀態信息。

（3）處理表單數據階段：HTTP請求中包裝的所有用戶數據，即用

標簽定義的所有輸入字段的內容，都在這時進行處理。當頁面提交Form時，激發LoadPostData事件，該方法會比較控件的舊值和新值返回一個bool類型值，標識其自上一次提交后該控件的數據是否被修改，具體說，如果LoadPostData（）方法返回true，說明控件的數據被修改。則頁面加載后會執行RaisePostDatachangedEvent方法更新控件里的值，既用正確的回傳數據更新控件狀態。

（4）頁面加載階段：頁面中的控件在此時創建。如果當前請求是回發請求，則將使用從視圖狀態和控件狀態恢復的信息加載控件屬性，使他們的狀態完全反映前一個狀態以及從客戶端發送的任何數據的狀態。頁面裝載時調用Page_Load（）事件，再依次調用各個控件OnLoad方法。在這個階段你可以為頁面上所有的服務端控件設置屬性，執行所有與頁面邏輯和行為有關的初始化代碼。

（5）回發的客戶端事件處理階段：ASP.NET服務器控件事件處理模型中，產生于客戶端的事件，通過HTTP的post方法將客戶端發生的事件發送給服務器，由服務器判斷什么事件將被觸發，并執行相應的代碼處理該事件。

（6）頁面呈現階段：處理回發事件以后，頁面準備為瀏覽器生成輸出。在呈現之前，會針對該頁和所有控件保存視圖狀態，當頁面上的控件狀態已經全部保存到持久性介質時，會觸發SaveStateComple事件。在呈現階段中，頁對象會針對每個控件調用Render方法，它會提供一個文本編寫器，并由它產生HTML標記給瀏覽器。被請求Web頁經過ASP.NET處理，一個服務器網頁變成一個客戶端網頁，一個控件可能變成一個或多個HTML標記。

（7）頁面卸載：完全呈現頁并已將頁發送至客戶端后，服務器端的Web頁面會被丟棄。首先為每個控件引發Unload事件，并最終為頁面引發Unload事件。Unload事件存在的目的是在釋放頁面對象之前執行所有最后的清除工作。

3 頁面控件狀態和控件事件處理分析

從前面的頁面生命周期各個階段的處理過程可以看出，當頁面被提交到服務器時，上傳到服務器的數據在頁面重建時的處理是有嚴格的時間順序的：首先，在視圖狀態恢復階段處理提交的_VIEWSTATE隱藏字段保存中保存的頁面視圖狀態信息；接著，在處理表單數據階段處理提交的Form表單中的數據；最后，引起頁面回發的用戶交互事件是在回發的客戶端事件處理階段完成。下面設計了一個簡單的單選按鈕選擇頁面進行印證分析

在此頁面中，我們點選第一個單選項“大學生”，然后點擊提交按鈕，頁面數據上傳到服務器，在頁面重建過程中，首先恢復隱藏控件中的狀態信息，接著處理表單提交的數據，用表單中的數據更新控件的狀態，在頁面加載時，第一個單選按鈕的Checed屬性為true，第三個單選按鈕的Checked屬性為false，最后，在執行提交按鈕的事件代碼時，第二個單選按鈕的Checed屬性被設置為true，這樣，頁面呈現之前，有兩個單選按鈕的Checed屬性被設置為true，回發頁面的HTML代碼也證實了這一點：

至此，上述案例中的設計錯誤就已經很顯然了。在頁面第一次查詢完成后，頁面上顯示的是數據庫中的查詢信息。之后，修改查詢關鍵字，再次提交后，當前頁面顯示的信息隨著Form一起提交到服務器，雖然這些數據連同隱藏控件中的數據在頁面重建時會被恢復，就我們的設計目的而言，實際上已經沒有什么意義，因為在服務器端的事件代碼中，我們用新的數據庫查詢結果重新設置了各個控件的顯示值。由于在頁面中有多個單選按鈕控件，所以性別信息的顯示處理比其他的控件處理稍顯復雜，在服務器端的事件處理代碼中，依據客戶端的信息重新進行數據庫查詢，用新的查詢信息設置單選按鈕的Checked屬性值，這時，如果新查詢的性別信息和前一次的性別信息不一樣，在服務端頁面重建中會出現有兩個單選按鈕的Checked屬性值都為true的情況：一個是頁面提交時，在Form表單中的單選按鈕設置的值，另一個是事件代碼中依據數據庫查詢結果新設置的單選按鈕狀態。這樣，在瀏覽器頁面的源代碼中，我們看到至少有兩個類型為radio的input控件的checked屬性值都被設置為選中狀態checked，所以就出現了單選按鈕顯示混亂的情況了。

基于以上分析可以看出，asp.net Web應用開發中，如果在頁面中有多個單選按鈕，即使設置了同樣的groupname屬性值，在服務器端多個RadioButton的checked屬性都可以設置為true，單選的效果不是在服務器端實現的，而是在客戶端瀏覽器中由HTML中的控件實現的。因此，如果單選按鈕的選擇狀態是通過頁面回發的事件代碼動態設置的，那么有兩種方式可以初始化單選按鈕控件。一是在事件代碼中，在設置單選按鈕的新值之前，現將Form中的所有單選按鈕的Checked設置為false，保證事件代碼中單選按鈕設置的唯一性；另外一種方法是在Page_load事件中完成，由于Page_load會在控件事件之前觸發，也可以將按鈕初始化代碼放在這里。

protected void Page_Load（object sender，EventArgs e）

{if（IsPostBack）

RadioButton1.Checked = false；

RadioButton2.Checked = false；}

4 結論

理論上，只需設置客戶端提交的那個RadioButton控件的checked屬性值為false就可以了，出于簡化代碼的考慮，將所有的RadioButton的checked屬性值都設置為false。如果單選的項目較多，用單選按鈕列表RadioButtonList控件替換RadioButton控件是最簡單和實用的方式，但是對頁面生命周期的展示和分析就沒有這么直觀了。

【參考文獻】

[1]https：//www.cnblogs.com/zze46/p/7269733.html.

[2]http：//www.cnblogs.com/couhujia/archive/2010/04/23/1718405.html.