ASP.NET AJAX示例：鏈接的下拉列表

本文的開始簡要地討論了用于鏈接兩個 DropDownList 的兩種傳統方法。當選定的索引更改時，返回頁；或者將所有可能的數據加載到 JavaScript 數組并動態顯示。希望您可以看到 AJAX 如何替代這兩種解決方案。

首先，讓我們來看一下我們的數據界面，并從該數據界面驅動示例。我們的數據訪問層將提供兩種方法：***種方法將檢索系統支持的國家/地區的列表，第二種方法將獲取國家/地區 ID 并返回州/省的列表。由于這是純數據訪問，因此我們只需要使用方法。

//C#  
public static DataTable GetShippingCountries();  
public static DataView GetCountryStates(int countryId);  
'VB.NET  
Public Shared Function GetShippingCountries() As DataTable  
Public Shared Function GetCountryStates(ByVal countryId As Integer)  
As DataView  

現在，讓我們轉到相反面，創建簡單的 Web 窗體。

< asp:DropDownList ID="countries" Runat="server" /> 
< asp:DropDownList ID="states" Runat="server" /> 
< asp:Button ID="submit" Runat="server" Text="Submit" /> 

Page_Load 事件同樣簡單，和前述的 Web 窗體一樣。我們使用數據訪問層來檢索可用的國家/地區，并將其綁定到 countriesDropDownList 中。

//C#：ASP.NET AJAX示例  
if (!Page.IsPostBack)  
{  
countries.DataSource = DAL.GetShippingCountries();  
countries.DataTextField = "Country";  
countries.DataValueField = "Id";  
countries.DataBind();  
countries.Items.Insert(0, new ListItem("Please Select", "0"));  
}  

通常，代碼到此為止。首先，我們將創建要從 JavaScript 調用的服務器端函數。

'VB.NET：ASP.NET AJAX示例  
< Ajax.AjaxMethod()> _  
Public Function GetStates (ByVal countryId As Integer) As DataView  
Return DAL.GetCountryStates(countryId)  
End Function 

這與您通常使用的任何其他函數一樣：它需要我們想要獲得的國家/地區的 ID，并將該請求傳遞給 DAL。唯一的不同是我們已使用 AjaxMethodAttribute 標記了該方法。***剩余的服務器端步驟是通過調用 RegisterTypeForAjax 使用 Ajax.NET 來注冊包含上述方法的類（在此情況下，是我們的下面的代碼）。

//C#  
Ajax.Utility.RegisterTypeForAjax(typeof(Sample));  

'VB.NET  
Ajax.Utility.RegisterTypeForAjax(GetType(Sample))  

我們已基本完成；剩余的就是從 JavaScript 調用 GetStates 方法和處理響應。當用戶從國家/地區列表中選擇新項時，我們想在邏輯上調用 GetStates。為此，我們將觸發 JavaScript onChange 事件。這樣就稍微更改了我們的 Web 窗體代碼。

< asp:DropDownList onChange="LoadStates(this)"   
ID="countries" Runat="server" /> 

JavaScript LoadStates 函數將負責通過由 Ajax.NET 創建的代理發出異步請求。請記住，默認情況下，Ajax.NET 創建的代理的格式為 < RegisteredTypeName>.< ServerSideMethodName>。在我們的示例中，將為 Sample.GetStates。我們還想傳入國家/地區 ID 參數和完成服務器端函數后 Ajax.NET 應調用的回調函數。

//JavaScript：ASP.NET AJAX示例  
function LoadStates(countries)  
{  
var countryId = countries.options[countries.selectedIndex].value;  
Sample.GetStates(countryId, LoadStates_CallBack);  
}  

***一個步驟是處理我們的 LoadStates_CallBack 函數中的響應。Ajax.NET 最有用的功能大概是它支持很多 .NET 類型（我已經多次提到這一點）。回顧一下返回 DataView 的服務端函數。JavaScript 知道 DataView 什么？什么也不知道，但是 JavaScript 是面向對象的語言，而且 Ajax.NET 不只能夠創建與 .NET DataView 相似的對象，還能將該函數返回的值映射到 JavaScript 副本。您應該記住 JavaScript DataView 只不過是實際 DataView 的副本，目前除了能夠遍歷行和訪問列值以外不支持其他更多功能（例如設置 RowFilter 或 Sort 屬性的功能）。

function LoadStates_CallBack(response)  
{  
//如果服務器端代碼出現異常  
if (response.error != null)  
 {  
//我們應該能做得更好  
alert(response.error);   
return;  
 }  
var states = response.value;  
//如果不是我們所希望的響應  
if (states == null || typeof(states) != "object")  
 {  
return;  
 }  
//獲得州下拉列表  
var statesList = document.getElementById("states");  
statesList.options.length = 0; //重置州下拉列表  
//記住，其長度不是 JavaScript 中的 Length  
for (var i = 0; i <  states.length; ++i)  
 {  
//如命名屬性一樣公開行的列  
statesList.options[statesList.options.length] =  
new Option(states[i].State, states[i].Id);  
 }  
}  

經過一些錯誤檢查之后，前面的 JavaScript 獲得州下拉列表，遍歷響應的值，并動態地將選項添加到該下拉列表中。代碼清晰、簡單并與 C# 和 Visual Basic .NET 非常相似。就我個人而言（作為基于服務器端變量創建了 JavaScript 數組并將它們鏈接在一起的開發人員），我還要一段時間才能相信它真的起作用了。

有一個可能不太明顯的主要問題。由于 DropDownList 是在 JavaScript 中動態創建的，因此它的項不屬于 ViewState，并且不被維護。這意味著按鈕的 OnClick 事件處理程序需要進行一些額外的修改。

'VB.NET  
Private Sub submit_Click(sender As Object, e As EventArgs)  
Dim selectedStateId As String = Request.Form(states.UniqueID)  
'應進行一些用戶驗證...  
states.DataSource =  
DAL.GetCountryStates(Convert.ToInt32(countries.SelectedIndex))  
states.DataTextField = "State" 
states.DataValueField = "Id" 
states.DataBind()  
states.SelectedIndex =   
states.Items.IndexOf(states.Items.FindByValue(selectedStateId))  
End Sub 

首先，我們不能使用 states.SelectedValue 屬性，而必須使用 Request.Form。其次，如果我們想向用戶重新顯示該列表，需要重新使用相同的數據訪問方法綁定州 DropDownList。***，必須以編程方式設置選定的值。

以上就是ASP.NET AJAX示例：鏈接的下拉列表的實現。

【編輯推薦】

1. AJAX.NET安裝配置全指南
2. Ajax.Net快速入門
3. ASP.NET AJAX軟件下載
4. ASP.NET之父強烈推薦:ASP.NET AJAX著作
5. Asp.net Ajax控件之AutoComplete控件幾點淺析