建站
咨詢
售后
建站咨詢
新聞中心
ASP.NET AJAX示例：鏈接的下拉列表
創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供疊彩網(wǎng)站建設(shè)、疊彩做網(wǎng)站、疊彩網(wǎng)站設(shè)計、疊彩網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、疊彩企業(yè)網(wǎng)站模板建站服務(wù)，十年疊彩做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。
本文的開始簡要地討論了用于鏈接兩個 DropDownList 的兩種傳統(tǒng)方法。當(dāng)選定的索引更改時，返回頁；或者將所有可能的數(shù)據(jù)加載到 JavaScript 數(shù)組并動態(tài)顯示。希望您可以看到 AJAX 如何替代這兩種解決方案。
首先，讓我們來看一下我們的數(shù)據(jù)界面，并從該數(shù)據(jù)界面驅(qū)動示例。我們的數(shù)據(jù)訪問層將提供兩種方法：***種方法將檢索系統(tǒng)支持的國家/地區(qū)的列表，第二種方法將獲取國家/地區(qū) ID 并返回州/省的列表。由于這是純數(shù)據(jù)訪問，因此我們只需要使用方法。
- //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
現(xiàn)在，讓我們轉(zhuǎn)到相反面，創(chuàng)建簡單的 Web 窗體。
- < asp:DropDownList ID="countries" Runat="server" />
- < asp:DropDownList ID="states" Runat="server" />
- < asp:Button ID="submit" Runat="server" Text="Submit" />
Page_Load 事件同樣簡單，和前述的 Web 窗體一樣。我們使用數(shù)據(jù)訪問層來檢索可用的國家/地區(qū)，并將其綁定到 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"));
- }
通常，代碼到此為止。首先，我們將創(chuàng)建要從 JavaScript 調(diào)用的服務(wù)器端函數(shù)。
- 'VB.NET：ASP.NET AJAX示例
- < Ajax.AjaxMethod()> _
- Public Function GetStates (ByVal countryId As Integer) As DataView
- Return DAL.GetCountryStates(countryId)
- End Function
這與您通常使用的任何其他函數(shù)一樣：它需要我們想要獲得的國家/地區(qū)的 ID，并將該請求傳遞給 DAL。唯一的不同是我們已使用 AjaxMethodAttribute 標(biāo)記了該方法。***剩余的服務(wù)器端步驟是通過調(diào)用 RegisterTypeForAjax 使用 Ajax.NET 來注冊包含上述方法的類（在此情況下，是我們的下面的代碼）。
- //C#
- Ajax.Utility.RegisterTypeForAjax(typeof(Sample));
- 'VB.NET
- Ajax.Utility.RegisterTypeForAjax(GetType(Sample))
我們已基本完成；剩余的就是從 JavaScript 調(diào)用 GetStates 方法和處理響應(yīng)。當(dāng)用戶從國家/地區(qū)列表中選擇新項時，我們想在邏輯上調(diào)用 GetStates。為此，我們將觸發(fā) JavaScript onChange 事件。這樣就稍微更改了我們的 Web 窗體代碼。
- < asp:DropDownList onChange="LoadStates(this)"
- ID="countries" Runat="server" />
JavaScript LoadStates 函數(shù)將負(fù)責(zé)通過由 Ajax.NET 創(chuàng)建的代理發(fā)出異步請求。請記住，默認(rèn)情況下，Ajax.NET 創(chuàng)建的代理的格式為 < RegisteredTypeName>.< ServerSideMethodName>。在我們的示例中，將為 Sample.GetStates。我們還想傳入國家/地區(qū) ID 參數(shù)和完成服務(wù)器端函數(shù)后 Ajax.NET 應(yīng)調(diào)用的回調(diào)函數(shù)。
- //JavaScript：ASP.NET AJAX示例
- function LoadStates(countries)
- {
- var countryId = countries.options[countries.selectedIndex].value;
- Sample.GetStates(countryId, LoadStates_CallBack);
- }
***一個步驟是處理我們的 LoadStates_CallBack 函數(shù)中的響應(yīng)。Ajax.NET 最有用的功能大概是它支持很多 .NET 類型（我已經(jīng)多次提到這一點）?；仡櫼幌路祷?DataView 的服務(wù)端函數(shù)。JavaScript 知道 DataView 什么？什么也不知道，但是 JavaScript 是面向?qū)ο蟮恼Z言，而且 Ajax.NET 不只能夠創(chuàng)建與 .NET DataView 相似的對象，還能將該函數(shù)返回的值映射到 JavaScript 副本。您應(yīng)該記住 JavaScript DataView 只不過是實際 DataView 的副本，目前除了能夠遍歷行和訪問列值以外不支持其他更多功能（例如設(shè)置 RowFilter 或 Sort 屬性的功能）。
- function LoadStates_CallBack(response)
- {
- //如果服務(wù)器端代碼出現(xiàn)異常
- if (response.error != null)
- {
- //我們應(yīng)該能做得更好
- alert(response.error);
- return;
- }
- var states = response.value;
- //如果不是我們所希望的響應(yīng)
- 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);
- }
- }
經(jīng)過一些錯誤檢查之后，前面的 JavaScript 獲得州下拉列表，遍歷響應(yīng)的值，并動態(tài)地將選項添加到該下拉列表中。代碼清晰、簡單并與 C# 和 Visual Basic .NET 非常相似。就我個人而言（作為基于服務(wù)器端變量創(chuàng)建了 JavaScript 數(shù)組并將它們鏈接在一起的開發(fā)人員），我還要一段時間才能相信它真的起作用了。
有一個可能不太明顯的主要問題。由于 DropDownList 是在 JavaScript 中動態(tài)創(chuàng)建的，因此它的項不屬于 ViewState，并且不被維護。這意味著按鈕的 OnClick 事件處理程序需要進(jìn)行一些額外的修改。
- 'VB.NET
- Private Sub submit_Click(sender As Object, e As EventArgs)
- Dim selectedStateId As String = Request.Form(states.UniqueID)
- '應(yīng)進(jìn)行一些用戶驗證...
- 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。其次，如果我們想向用戶重新顯示該列表，需要重新使用相同的數(shù)據(jù)訪問方法綁定州 DropDownList。***，必須以編程方式設(shè)置選定的值。
以上就是ASP.NET AJAX示例：鏈接的下拉列表的實現(xiàn)。
網(wǎng)頁名稱：ASP.NETAJAX示例：下拉列表
URL標(biāo)題：http://www.dlmjj.cn/article/dpjcsoe.html
