[ASP.NET]CascadingDropDown 以郵局街道資料為例

  • 4260
  • 0
  • 2011-03-24

CascadingDropDown 以郵局街道資料為例

實作完成畫面:

cascadingdropdown1

準備作業:

1. 郵局下載最新的zipcode街道資料檔,3+2郵遞區號資料Excel檔 (自解壓縮檔) 99/12

2. 將資料檔匯入sql server資料庫

 

實作一:建立GetRoadDropDown.asmx web service,提供GetCityDropDown, GetRegionDropDown, GetRoadDropDown等method,參考後面程式碼

實作二:建立linetest.aspx webpage,示範cascadingdropdown效果,另外在RoadDropDownList的Init加入onchange的事件動作

 
linetest.aspx:
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        <br />
    
    </div>
    <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
    </asp:ToolkitScriptManager>
    <br />
    <span lang="zh-tw">街道選單:</span><asp:DropDownList ID="cityDropDownList" 
        runat="server">
    </asp:DropDownList>
    <asp:CascadingDropDown ID="cityDropDownList_CascadingDropDown" runat="server" LoadingText="請稍待...." PromptText="請選擇" 
        Enabled="True" TargetControlID="cityDropDownList" ServicePath="GetRoadDropDown.asmx" ServiceMethod="GetCityDropDown" Category="city">
    </asp:CascadingDropDown>
    <asp:DropDownList ID="regionDropDownList" runat="server">
    </asp:DropDownList>
    <asp:CascadingDropDown ID="regionDropDownList_CascadingDropDown" runat="server" 
        Category="region" Enabled="True" LoadingText="請稍待...." 
        ParentControlID="cityDropDownList" PromptText="請選擇" 
        ServiceMethod="GetRegionDropDown" TargetControlID="regionDropDownList"
        ServicePath="GetRoadDropDown.asmx">
    </asp:CascadingDropDown>
    <span lang="zh-tw">&nbsp;</span><asp:DropDownList ID="roadDropDownList" 
        runat="server">
    </asp:DropDownList>
    <asp:CascadingDropDown ID="roadDropDownList_CascadingDropDown" runat="server" 
        Category="road" Enabled="True" LoadingText="請稍待...." 
        ParentControlID="regionDropDownList" PromptText="請選擇" 
        ServiceMethod="GetRoadDropDown" ServicePath="GetRoadDropDown.asmx" 
        TargetControlID="roadDropDownList">
    </asp:CascadingDropDown>
    <br />
    <span lang="zh-tw">地址欄位:</span><asp:TextBox ID="TextBox1" runat="server" 
        Width="300px"></asp:TextBox>
    <br />
    <br />
    <span lang="zh-tw">說明:<br />
&nbsp;&nbsp;&nbsp; 1.街道選單皆為為cascading dropdown(連動選單),透過asmx取得DropDownList項目<br />
&nbsp;&nbsp;&nbsp; 2.選擇街道項目後,自動填入地址欄位<br />
    </span>
    </form>
</body>
</html>

 
linetest.aspx.vb:
    Protected Sub roadDropDownList_Init(ByVal sender As Object, ByVal e As System.EventArgs) Handles roadDropDownList.Init
        CType(sender, DropDownList).Attributes.Add("onchange", "document.forms[0].TextBox1.value=document.forms[0].cityDropDownList.value+document.forms[0].regionDropDownList.value+document.forms[0].roadDropDownList.value;")
    End Sub

 

 

GetRoadDropDown.asmx:
Imports System.Web
Imports System.Web.Services
Imports System.Web.Services.Protocols
Imports System.Data
Imports System.Data.SqlClient
Imports AjaxControlToolkit
Imports System.Collections
Imports System.Collections.Generic
Imports System.Collections.Specialized
 
 
' 若要允許使用 ASP.NET AJAX 從指令碼呼叫此 Web 服務,請取消註解下一行。
<System.Web.Script.Services.ScriptService()> _
<WebService(Namespace:="http://tempuri.org/")> _
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()> _
Public Class GetRoadDropDown
    Inherits System.Web.Services.WebService
 
    <WebMethod()> _
    Public Function GetRoadDropDown(ByVal knownCategoryValues As String, ByVal category As String) As CascadingDropDownNameValue()
        Dim roadsql As New SqlDataSource
        Dim roaddv As DataView
        Dim values As New List(Of CascadingDropDownNameValue)()
        Dim kv As StringDictionary = CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues)
 
        roadsql.ConnectionString = ConfigurationManager.ConnectionStrings("LINEJOBConnectionString").ToString
        roadsql.SelectCommand = "SELECT DISTINCT road FROM zipcode WHERE (city = @city) AND (region = @region) order by road"
        roadsql.SelectParameters.Add("city", System.TypeCode.String, kv("city"))
        roadsql.SelectParameters.Add("region", System.TypeCode.String, kv("region"))
 
        roaddv = roadsql.Select(DataSourceSelectArguments.Empty)
 
        If roaddv.Count > 0 Then
            For Each dr As DataRow In roaddv.Table.Rows
                Dim roaditem As New CascadingDropDownNameValue
                roaditem.name = dr("road")
                roaditem.value = dr("road")
                values.Add(roaditem)
            Next
        End If
 
        Return values.ToArray
    End Function
 
    <WebMethod()> _
    Public Function GetRegionDropDown(ByVal knownCategoryValues As String, ByVal category As String) As CascadingDropDownNameValue()
        Dim roadsql As New SqlDataSource
        Dim roaddv As DataView
        Dim values As New List(Of CascadingDropDownNameValue)()
        Dim kv As StringDictionary = CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues)
 
        roadsql.ConnectionString = ConfigurationManager.ConnectionStrings("LINEJOBConnectionString").ToString
        roadsql.SelectCommand = "SELECT DISTINCT region, LEFT(zipcode, 3) AS zipcode3 FROM zipcode WHERE (city = @city) ORDER BY zipcode3"
        roadsql.SelectParameters.Add("city", System.TypeCode.String, kv("city"))
 
        roaddv = roadsql.Select(DataSourceSelectArguments.Empty)
 
        If roaddv.Count > 0 Then
            For Each dr As DataRow In roaddv.Table.Rows
                Dim roaditem As New CascadingDropDownNameValue
                roaditem.name = dr("region")
                roaditem.value = dr("region")
                values.Add(roaditem)
            Next
        End If
 
        Return values.ToArray
    End Function
 
    <WebMethod()> _
     Public Function GetCityDropDown(ByVal knownCategoryValues As String, ByVal category As String) As CascadingDropDownNameValue()
        Dim roadsql As New SqlDataSource
        Dim roaddv As DataView
        Dim values As New List(Of CascadingDropDownNameValue)()
        Dim kv As StringDictionary = CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues)
 
        roadsql.ConnectionString = ConfigurationManager.ConnectionStrings("LINEJOBConnectionString").ToString
        roadsql.SelectCommand = "SELECT DISTINCT city, LEFT(zipcode, 1) AS zipcode3 FROM zipcode ORDER BY zipcode3"
        roaddv = roadsql.Select(DataSourceSelectArguments.Empty)
 
        If roaddv.Count > 0 Then
            For Each dr As DataRow In roaddv.Table.Rows
                Dim roaditem As New CascadingDropDownNameValue
                roaditem.name = dr("city")
                roaditem.value = dr("city")
                values.Add(roaditem)
            Next
        End If
 
        Return values.ToArray
    End Function
End Class

 

 

postxls

postsql