摘要:[VB][jQuery] 使用 ajax+ashx+json 做下拉選單連動效果(DropDownList Ajax)
原本是使用aspx做ajax取得資料的頁面
但是後來覺得aspx要新增2隻aspx跟aspx.vb,感覺有點煩雜所以改用ashx(泛型處理)試試
下面紀錄一下使用方法
首先建立一隻Address.aspx放下拉選單
Address.aspx
在head之間寫入以下程式碼:
在body中加入以下代碼,內含有1個button跟2個dropdownlist
<form id="form1" runat="server">
<div>
jQuery 使用ajax + json + ashx產生下拉動態連動效果範例 By Arvin Hsieh<br />
<input id="btnCreatorDiv" type="button" value="產生縣市" /><br />
<asp:DropDownList ID="ddlDiv" runat="server">
</asp:DropDownList>
<br />
<asp:DropDownList ID="ddlVil" runat="server">
</asp:DropDownList>
<br />
</div>
</form>
接下來建立2隻ashx
JSON的輸出格式為:
{Name:[{"KEY":"VALUE","KEY":"VALUE"},{"KEY":"VALUE","KEY":"VALUE"}]}
GetAddrDiv.ashx
從資料庫中取得縣市代碼:
Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest
context.Response.ContentType = "text/plain"
'If Not String.IsNullOrEmpty(context.Request.Form("q")) Then
Dim tmpStr As New StringBuilder
Dim ds As New DataSet
'qryStr = context.Request.Form("q")
'qryTbl = context.Request.Form("t")
'qryCol = context.Request.Form("c")
ds = GetObject(qryStr, qryTbl, qryCol)
tmpStr.Append("{'" & qryTbl & "':[")
For i As Integer = 0 To ds.Tables(0).Rows.Count - 1
If i <> ds.Tables(0).Rows.Count - 1 Then
tmpStr.Append(GetJsonStr(ds.Tables(0).Rows(i).Item(qryCol).ToString.Trim, ds.Tables(0).Rows(i).Item(qryCol).ToString.Trim) & ",")
Else
tmpStr.Append(GetJsonStr(ds.Tables(0).Rows(i).Item(qryCol).ToString.Trim, ds.Tables(0).Rows(i).Item(qryCol).ToString.Trim))
End If
Next
tmpStr.Append("]}")
context.Response.Write(tmpStr.ToString)
'End If
End Sub
Public Function GetJsonStr(ByVal item As String, ByVal value As String) As String
Return "{'name':'" & item & "','code':'" & value & "'}"
End Function
這裡只放出主要的Code,簡單的說就是從資料庫撈出縣市名稱組成JSON字串後丟回來
GetAddrVil.aspx
這裡是取得縣市名稱後去資料庫撈出鄉鎮代碼
Public Class GetAddrVil : Implements IHttpHandler
Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest
context.Response.ContentType = "text/plain"
If Not String.IsNullOrEmpty(context.Request.Form("q")) Then
Dim tmpStr As New StringBuilder
Dim ds As New DataSet
ds = GetObject(context.Request.Form("q"))
tmpStr.Append("{'AddrCode':[")
For i As Integer = 0 To ds.Tables(0).Rows.Count - 1
If i <> ds.Tables(0).Rows.Count - 1 Then
tmpStr.Append(GetJsonStr(ds.Tables(0).Rows(i).Item("vil").ToString.Trim, ds.Tables(0).Rows(i).Item("vil").ToString.Trim) & ",")
Else
tmpStr.Append(GetJsonStr(ds.Tables(0).Rows(i).Item("vil").ToString.Trim, ds.Tables(0).Rows(i).Item("vil").ToString.Trim))
End If
Next
tmpStr.Append("]}")
context.Response.Write(tmpStr.ToString)
End If
End Sub
Public Function GetJsonStr(ByVal item As String, ByVal value As String) As String
Return "{'name':'" & item & "','code':'" & value & "'}"
End Function
在Page頁執行後通過非同步處理先取得縣市名稱,
當縣市名稱變動時會觸發取得鄉鎮資料的ajax,
如此就可以產生連動效果。
不使用 autopostback = true 跟 SelectedIndexChanged 事件就完成連動效果。
寫的可能不是很好,在此紀錄一下。
附上範例檔案: WebjQueryTest.rar
以上文章敘述如有錯誤及觀念不正確,請不吝嗇指教
如有侵權內容也請您與我反應~謝謝您 :)