[VB][jQuery] 使用 ajax+ashx+json 做下拉選單連動效果(DropDownList Ajax)

摘要:[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

 

 


以上文章敘述如有錯誤及觀念不正確,請不吝嗇指教
如有侵權內容也請您與我反應~謝謝您 :)