本文的開始簡要地討論了用於鏈接兩個 DropDownList 的兩種傳統方法當選定的索引更改時返回頁或者將所有可能的數據加載到 JavaScript 數組並動態顯示希望您可以看到 AJAX 如何替代這兩種解決方案
首先讓我們來看一下我們的數據界面並從該數據界面驅動示例我們的數據訪問層將提供兩種方法第一種方法將檢索系統支持的國家/地區的列表第二種方法將獲取國家/地區 ID 並返回州/省的列表由於這是純數據訪問因此我們只需要使用方法
//C# public static DataTable GetShippingCountries();
public static DataView GetCountryStates(int countryId);
VBNET 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#ASPNET AJAX示例 if (!PageIsPostBack)
{
countriesDataSource = DALGetShippingCountries();
countriesDataTextField = Country;
countriesDataValueField = Id;
countriesDataBind();
countriesItemsInsert( new ListItem(Please Select ));
}
通常代碼到此為止首先我們將創建要從 JavaScript 調用的服務器端函數
VBNETASPNET AJAX示例 < AjaxAjaxMethod()> _ Public Function GetStates (ByVal countryId As Integer) As DataView Return DALGetCountryStates(countryId) End Function 這與您通常使用的任何其他函數一樣它需要我們想要獲得的國家/地區的 ID並將該請求傳遞給 DAL唯一的不同是我們已使用 AjaxMethodAttribute 標記了該方法最後剩余的服務器端步驟是通過調用 RegisterTypeForAjax 使用 AjaxNET 來注冊包含上述方法的類（在此情況下是我們的下面的代碼）
//C# AjaxUtilityRegisterTypeForAjax(typeof(Sample)); VBNET AjaxUtilityRegisterTypeForAjax(GetType(Sample)) 我們已基本完成剩余的就是從 JavaScript 調用 GetStates 方法和處理響應當用戶從國家/地區列表中選擇新項時我們想在邏輯上調用 GetStates為此我們將觸發 JavaScript onChange 事件這樣就稍微更改了我們的 Web 窗體代碼
< asp:DropDownList onChange=LoadStates(this) ID=countries Runat=server /> JavaScript LoadStates 函數將負責通過由 AjaxNET 創建的代理發出異步請求請記住默認情況下AjaxNET 創建的代理的格式為 < RegisteredTypeName>< ServerSideMethodName>在我們的示例中將為 SampleGetStates我們還想傳入國家/地區 ID 參數和完成服務器端函數後 AjaxNET 應調用的回調函數
//JavaScriptASPNET AJAX示例 function LoadStates(countries)
{
var countryId = countriesoptions[countriesselectedIndex]value;
SampleGetStates(countryId LoadStates_CallBack);
}
最後一個步驟是處理我們的 LoadStates_CallBack 函數中的響應AjaxNET 最有用的功能大概是它支持很多 NET 類型（我已經多次提到這一點）回顧一下返回 DataView 的服務端函數JavaScript 知道 DataView 什麼？什麼也不知道但是 JavaScript 是面向對象的語言而且 AjaxNET 不只能夠創建與 NET DataView 相似的對象還能將該函數返回的值映射到 JavaScript 副本您應該記住 JavaScript DataView 只不過是實際 DataView 的副本目前除了能夠遍歷行和訪問列值以外不支持其他更多功能（例如設置 RowFilter 或 Sort 屬性的功能）
function LoadStates_CallBack(response)
{
//如果服務器端代碼出現異常 if (responseerror != null)
{
//我們應該能做得更好 alert(responseerror);
return;
}
var states = responsevalue;
//如果不是我們所希望的響應
if (states == null || typeof(states) != object)
{
return;
}
//獲得州下拉列表 var statesList = documentgetElementById(states);
statesListoptionslength = ; //重置州下拉列表 //記住其長度不是 JavaScript 中的 Length
for (var i = ; i < stateslength; ++i)
{
//如命名屬性一樣公開行的列 statesListoptions[statesListoptionslength] = new Option(states[i]State states[i]Id);
}
}
經過一些錯誤檢查之後前面的 JavaScript 獲得州下拉列表遍歷響應的值並動態地將選項添加到該下拉列表中代碼清晰簡單並與 C# 和 Visual Basic NET 非常相似就我個人而言（作為基於服務器端變量創建了 JavaScript 數組並將它們鏈接在一起的開發人員）我還要一段時間才能相信它真的起作用了
有一個可能不太明顯的主要問題由於 DropDownList 是在 JavaScript 中動態創建的因此它的項不屬於 ViewState並且不被維護這意味著按鈕的 OnClick 事件處理程序需要進行一些額外的修改
VBNET Private Sub submit_Click(sender As Object e As EventArgs)
Dim selectedStateId As String = RequestForm(statesUniqueID) 應進行一些用戶驗證 statesDataSource = DALGetCountryStates(ConvertToInt(countriesSelectedIndex))
statesDataTextField = State statesDataValueField = Id statesDataBind()
statesSelectedIndex = statesItemsIndexOf(statesItemsFindByValue(selectedStateId))
End Sub 首先我們不能使用 statesSelectedValue 屬性而必須使用 RequestForm其次如果我們想向用戶重新顯示該列表需要重新使用相同的數據訪問方法綁定州 DropDownList最後必須以編程方式設置選定的值
以上就是ASPNET AJAX示例鏈接的下拉列表的實現
From:http://tw.wingwit.com/Article/program/net/201311/12117.html
