.NET(ASP.NET-Ajax篇)

jQuery透過ajax取得yahoo新聞Rss範例

topcat — Fri, 08 Aug 2008 13:39:00 GMT

這個範例是使用jQuery 的.ajax，從Yahoo新聞的Rss擷取後，產生超連結在自己的網頁中。測試的時候只需要一個html與jQuery.js即可。

<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<Script Language="JavaScript" type="text/javascript" Src="jQuery.js"></Script>
<Script Language="JavaScript">
<!--
$(document).ready(function(){
    $('#button1').click(function(){
        var strURL='http://tw.news.yahoo.com/rss/tech_3c';
        $.ajax({
            type:'GET',
            dataType:'xml',
            url:strURL,
            success:function(xml){
                var myTitle;
                var myLink;
                $('item',xml).each(function(e){
                    myTitle=$('title',this).text();
                    myLink=$('link',this).text();
                    $('<a/>').attr('href',myLink).attr('target','_blank').text(myTitle).appendTo($('#div1'));
                    $('<br/>').appendTo($('#div1'));
                });
                alert($('#div1').html());
            }
        })
    })
})

//-->
</Script>
<TITLE></TITLE>
</HEAD>
<body onbeforeunload="RunOnBeforeUnload()">
<FORM action="" method=POST id=form1 name=form1>
<INPUT type="button" value="Button" id=button1 name=button1>
</FORM>
<div id="div1"></div>
</BODY>
</HTML>

Ajax Control Toolkits 3.5 於VWD2008 安裝初體驗

topcat — Thu, 13 Dec 2007 12:18:00 GMT

Ajax Control Toolkits提供了許多的方便控制項，讓開發者可以簡單快速的使用以前要許多程式碼的功能。以往小喵在VS2005裡面使用，現在VS2008已經出來了，當然要來體驗看看在VS2008使用上如何。

如果有興趣想了解1.0的初體驗，請參考以下網址
http://blog.blueshop.com.tw/topcat/archive/2007/06/12/51376.aspx

當然初步還是要到官方網站下載相關的檔案，官方網址如下
http://www.asp.net/ajax/ajaxcontroltoolkit/

Ajax Control Toolkit是有許多高手所共同製作出來的，也會不定時的有新的版本出現，建議各位小喵的好友每隔一段時間可以去看一下是否有新的版本出來，下載最新的版本。目前小喵初體驗的版本是2007/11/19 Release出來的11119

照慣例小喵下載Non-Source的那一份下來，並解壓縮，解壓縮後，找到SampleSite裡面的bin，等一下安裝的時候會用到他

接著就請看以下這個小喵安裝的錄影過程!!

AJAX Control Toolkit 3安裝試用初體驗 In VWD2008

看完了這個過程，這個版本的又進步了不少

安裝可以用拖拉的方式
控制項有Extender Wizard幫助使用Extender
Extender的設定變為原本控制項的屬性(整合的更完整)

以上的體驗過程分享給大家參考

^_^

解決使用Ajax Extension的UpdatePanel後focus失效問題

topcat — Wed, 14 Nov 2007 10:05:00 GMT

ASP.NET 2.0有個新的方法，可以在後端程式中直接下
Me.TextBox1.Focus()
這樣就可以控制游標要停留在哪個控制項上，他主要是會動態的產生相對應的Client端JavaScript來設定游標，不過一旦使用Ajax後，Client端的JavaScript的產生轉由ScriptManager來處理，因此這樣的設定會失效。

解決方式，就是自己產生一段Client端的JavaScript由ScriptManager來註冊，這樣就可以運作了，相關程式碼如下：

'Me.TextBox.Focus() Dim sScript As String sScript = "setTimeout(""$get('" & TextBox1.ClientID & "').focus(); "", 100);" ScriptManager.RegisterStartupScript(Me, Me.GetType(), "focus", sScript, True)

參考Jeff大大的網頁內容

Ajax Control Toolkit新版本(10920)開放下載了

topcat — Thu, 27 Sep 2007 15:35:00 GMT

Ajax Control Toolkit使用上非常的方便，但是裡面有些Bug使用上會覺得怪怪的!!

所幸這個東西不斷的在改進中，此次的版本，是針對一些控制項的錯誤修正(Calendar, PopupBehavior, AutoComplete, Accordion, ConfirmButton, ModalPopup, MaskedEdit and Slider)

另外如果是使用VS2008 Beta2再測試功能的使用者，也有提供AjaxControlToolkit-Framework3.5.zip 的版本可下載測試使用

相關下載網址請參考以下

10920版本下載

Ajax Control Toolkit 官方網頁

CalendarExtender顯示中文設定

topcat — Fri, 14 Sep 2007 12:01:00 GMT

在初次接觸Ajax Control Toolkit之後，發現裡面的東西真的還蠻方便使用的，最簡單的例子是CalendarExtender，只要拉一拉物件就能夠讓TextBox可以彈出挑選日期。

不過不知道大家是否有跟小喵一樣的困擾，那就是...怎麼都是英文的，這樣我的使用者一定會抱怨的啦!!

其實要解決這個問題很簡單，拉Ajax Control Toolkit的控制項之前，我們會拉一個【ToolkitScriptManager】，裡面有兩個屬性【EnableScriptGlobalization】、【EnableScriptLocalization】，只需要把這兩個屬性預設False改為True，神奇的事情發生了，他就會自動顯示為中文。

原來這麼簡單啊!!分享給大家參考!!

Ajax Control Toolkit初體驗之下載，安裝

topcat — Tue, 12 Jun 2007 11:30:00 GMT

在ASP.NET Ajax Extension 1.0出來之際，同時也由一些網路上的高手共同為他開發了許多的控制項，稱之為Ajax Control Toolkit

這些控制項是可以免費下載使用的，如有需要請到以下官方網址下載
http://ajax.asp.net

本篇要提的是如何下載這些控制項，以及如何安裝到我們的系統中。在使用Ajax Control Toolkit之前，您必須先完成ASP.NET 2.0 Ajax Extension 1.0的安裝。這個部分請參考小喵之前的【ASP.NET Ajax 1.0 初體驗 (安裝、試用) 】這篇文章

回到Ajax Control Toolkit的主題，下載Control Toolkit的(NoSource)那個後，將壓縮檔解開，發現裡面並沒有安裝的程式可以裝。他的安裝並不是透過封裝好的安裝程式，安裝的過程小喵把它錄下來，提供大家參考，網址如下：

Ajax Control Toolkit 安裝試用過程

ASP.NET Ajax 1.0 初體驗 Part2 (範例：多層式下拉與3+2郵遞區號查詢撰寫錄影檔)

topcat — Wed, 04 Apr 2007 21:32:00 GMT

??????? 繼上一篇初體驗(安裝、試用http://blog.blueshop.com.tw/topcat/archive/2007/03/28/50300.aspx)，接著這篇就來實際舉個例子體驗一下。

??????? 一直以來有許多人在問多層式下拉(DropDownList)要如何設定，最基本的範例就是3+2的郵遞區號查詢這個範例，小喵特別把設定的過程錄製下來給大家參考。順便套用一下ASP.NET Ajax 1.0的UpdatePanel的威力。

??????? 先來看一下【多層式下拉】的設定方式，要做到這個功能，基本上幾乎可以不用寫任何程式，只要動動滑鼠設定一些動作唷。看官們請看以下這個示範鏈結。

http://vip2.blueshop.com.tw/topcat/ajaxdemo/AjaxZipCode_viewlet_swf.html

??????? 很簡單吧，接著怎麼把這樣的功能變成Ajax，讓他不會因為PostBack而造成畫面一閃一閃呢？其實很簡單，拉一個UpdatePanel，然後將所有控制項【剪下貼上】到UpdatePanel裡面。這樣就可以了。另外，如果一開始就選了某個選項，好像不像一般的操作習慣，因此每個下拉選項再加上個【請選擇】的項目。這個可以放在DropDownList控制項的DataBound事件中即可。相關的設定過程請參考以下示範。

http://vip2.blueshop.com.tw/topcat/ajaxdemo/AjaxZipCode2_viewlet_swf.html

相關的Source Code如果需要下載，煩請等幾天上傳後給大家下載參考。

另外推薦一本不錯的書，有興趣大家可以買來參考，裡面把ASP.NET AJAX鉅細靡遺的描述。書名是【ASP.NET 2.0應用程式開發：與AJAX共舞】，是由小舖的榔頭大撰寫。請參考http://www.books.com.tw/exep/prod/booksfile.php?item=0010358507

ASP.NET Ajax 1.0 初體驗 (安裝、試用)

topcat — Wed, 28 Mar 2007 11:45:00 GMT

ASP.NET Ajax還在測試階段時(當時的代號是Atlas)，小喵試用了MagicAjax.NET使用上感覺還蠻容易使用的。有興趣請參考這一篇(http://blog.blueshop.com.tw/topcat/archive/2006/07/06/31989.aspx)

現在官方的測試版本已經出來了，小喵覺得也是時候測試一下官方正式版本的威力了(下一個版本的VS將會內建在裡面唷!!)，所以就到官方往站下載了相關程式安裝並進行測試，有需要的請到官方網站下載(http://ajax.asp.net)

下載安裝上應該沒有什麼特別要注意的事項，很簡單的執行安裝完成即可。安裝完成後，在開啟新網站的時候，會發現有個項目【ASP.NET Ajax-Enabled web site】初體驗嘛，就從這個先開始。

開啟專案後，會看到Default.aspx的畫面中自動多了一【Script Manager】在畫面上，看一下Web.Config裡面則是多了許多的設定，暫時不研究這些東西是什麼，先來寫一下簡單的程式來測試一下Ajax的公用如何使用以及效果如何。

首先在畫面上安排一個TextBox與Button，然後雙擊Button寫一下CodeFile相關程式

<asp:ScriptManager ID="ScriptManager1" runat="server" /> <div> <br /> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <asp:Button ID="Button1" runat="server" Text="Button" /></div>

Me.TextBox1.Text = Now.ToLongTimeString

程式很簡單，就是Server端抓取時間並顯示在TextBox上，當然這樣的結果，使用起來會PostBack

接著就來測試一下Ajax的使用方式，首先先在工具列中找到【Ajax Extensions】的區塊，並且拉一個【UpdatePanel】進入畫面中(操作的時候最吼都切換到【設計】模式)，接著一樣，拉一個TextBox一個Button【放到到UpdatePanel】中，一樣雙擊Button切換到CodeFile撰寫相同的程式

<asp:ScriptManager ID="ScriptManager1" runat="server" /> <div> <br /> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <asp:Button ID="Button1" runat="server" Text="Button" /><br /> <br /> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox> <asp:Button ID="Button2" runat="server" Text="Button" /> </ContentTemplate> </asp:UpdatePanel> </div>

Me.TextBox2.Text = Now.ToLongTimeString

然後開始執行看看，比較一下，包再UpdatePanel中的物件相同，後端程式一模一樣的狀況下，竟然就不會再PostBack了!!這個使用的方式跟MagicAjax.NET用法幾乎是一模一樣的，也就是說，不用改變撰寫ASP.NET的習慣與方式，只要把相關的控制項包在UpdatePanel之後，就可以輕鬆的達到Ajax的效果了。

另外再觀察一下工具箱中的另一個物件【UpdateProgress】，這個東西的功用是，當Ajax需要做比較久的運作時，您可以把想要顯示的訊息設定在裡面，那麼當Ajax開始運作到運作完成這段時間，就能夠出現您指定的訊息(這部分比MagicAjax.NET不容易更改的Loading...字樣好多了)

待續.....

MagicAjax.Net初體驗(設定，試用)

topcat — Thu, 06 Jul 2006 23:09:00 GMT

雖然ASP.NET 2.0已經內建了CallBack的機制，但是設計起來其實還有些麻煩

在網站上看到其他的大大們在玩MagicAjax.NET，聽說能夠在不改寫原本的寫法下，就能夠使用Ajax的好處，這讓小喵很好奇，不過小喵稍微搜尋了一下，卻沒有詳細的說明怎麼起頭，所以小喵把小喵的初體驗過程分享給各位網友

首先要先下載MagicAjax.NET，相關的檔案可從官方網站下載，網址如下：

http://www.magicajax.net/

下載好後，解開後會有許多的檔案，其中最最重要的，就是BIN中的【MagicAjax.dll】

接著可以開啟已經開好的站台，或者新增一個新的站台，開好後，先把Bin以及內部的MagicAjax.dll複製到您的專案中

接著，就是開始把修改Web.Config的內容

先是再一開頭的地方(<configuration>後)加入以下的東西

再來是在<pages>中加入以下這個語法

接著則是在</system.web>之前放以下這些語法

以上加入這些語法就設定好了Web.config了
由於是初體驗，小喵直接參考解壓縮後的範例的內容修改的，還沒有詳細的去研究每個語法的意義與用途，有些語法可能可以不需要，這些過陣子小喵研究過後再向大家報告

接著就來試試看他的威力囉

接著在default.aspx來試試看如何設計，為了要比較出PostBack的方式以及使用MagicAjax的方式，所以把相同的功能分別設計在同一個畫面中，而兩者在畫面上安排時，唯一的不同在於，使用MagicAjax的方式，需要把控制項放在<ajax:AjaxPanel runat="Server"></ajax:AjaxPanel>之間，請參考以下的畫面原始碼

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %> <!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> PostBack:<br />  <asp:Button ID="Button1" runat="server" Text="Button" /> <br /> <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label><br /> <hr /> Ajax:<br /> <ajax:AjaxPanel ID="AjaxPanel1" runat="Server"> <asp:Button ID="Button2" runat="server" Text="Button" /><br /> <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label></ajax:AjaxPanel></div> </form> </body> </html>

接著是兩者的CodeFile中的內容

Partial Class _Default Inherits System.Web.UI.Page Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click 'PostBack的部份 Me.Label1.Text = Now.ToString End Sub Protected Sub Button2_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button2.Click 'MagicAjax的部份 Me.Label2.Text = Now.ToString End Sub End Class

各位看官可以看到兩者的程式碼是一模一樣的，卻可以達到Ajax的CallBack方式

以上是小喵對MagicAjax.NET的初體驗
使用起來真的非常方便
他的原理是透過MagicAjax以及Client端的Script來攔截.NET的PostBack的語法，可以不改寫法的方式直接達到相同的效果。

初體驗的分享就先到這邊囉。

^_^

CallBack多層式選單3+2郵遞區號查詢程式範例(ASP.NET 2.0 CallBack範例)

topcat — Fri, 28 Apr 2006 14:55:00 GMT

由於正式官方的Ajax Extenstion已經出來了，並且使用上比起CallBack方便許多。對於系統的維護也會變得比較簡單。因此小喵在此強烈的建議不要再使用CallBack，改用Ajax Extension來處理

有需要的請參考以下連結

http://blog.blueshop.com.tw/topcat/category/1012.aspx

以下的文章還是保留

Callback是ASP.NET 2.0針對撰寫AJAX方式的支援

前言：

此範例(3+2郵遞區號查詢)是多層式選單的一個粉好的範例，Client端使用者在挑選資料的過程中，透過Atlas的CallBack機制啟動Server端的程式撈取相關資料，送回Client端，並且維護畫面。過程中沒有任何的PostBack或者Submit，畫面沒有做Reflash或者Reload的動作，使用者察覺不到程式已經與後端的程式溝通並且撈取資料。

畫面安排：

縣市：<asp:DropDownList ID="ddlCity" runat="server" DataSourceID="SqlDataSource1" DataTextField="城市" DataValueField="城市"> </asp:DropDownList> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ZipCodeConnectionString %>" ProviderName="<%$ ConnectionStrings:ZipCodeConnectionString.ProviderName %>" SelectCommand="SELECT DISTINCT [城市] FROM [台灣郵遞區號]"></asp:SqlDataSource> <br /> 鄉鎮市區：<span id="spanArea" runat="server"></span><br /> 路：<span id="spanRoad" runat="server"></span><br /> 號：<span id="spanNum" runat="server"></span><br /> 郵遞區號：<asp:TextBox ID="txtPost" runat="server"></asp:TextBox><br />

後端撰寫：

步驟二：Implements ICallbackEventHandler

首先在CodeBehide的vb上，加上Implements ICallbackEventHandler

Implements ICallbackEventHandler

按下Enter後，會自動產生一個Function與一個Sub

Public Function GetCallbackResult() As String Implements System.Web.UI.ICallbackEventHandler.GetCallbackResult End Function Public Sub RaiseCallbackEvent(ByVal eventArgument As String) Implements System.Web.UI.ICallbackEventHandler.RaiseCallbackEvent End Sub

步驟三：定義整體變數ret用於傳回Server端CallBack後運作的結果，並且在傳回的Function中設定傳回ret

Dim ret As String '定義整體變數，用於傳回結果 Public Function GetCallbackResult() As String Implements System.Web.UI.ICallbackEventHandler.GetCallbackResult '@@Implements ICallbackEventHandler後產生的介面程式 Return ret '回傳CallBack後Server端運作的結果 End Function

步驟四：PageLoad事件程式

在PageLoad事件中，設定程式下拉選單的Client端OnChange事件設定執行CallBack的Client端Script

'設定【城市】的Select控制項OnChange的時候執行CallBack的Client Script Dim cbRef1 As String = "" cbRef1 = Page.ClientScript.GetCallbackEventReference(Me, "'City$$$'+" + Me.ddlCity.ClientID + ".value", "RecvData", "") Me.ddlCity.Attributes("onchange") = cbRef1

並且安排Client端Script用於承接Server端傳入的資料並作畫面的處理

'設定取得Server端回傳的資料，處理畫面的Client Script Dim RDataScrp As String = "" RDataScrp += "<script>" + vbCrLf RDataScrp += " function RecvData(DataFromServer){" + vbCrLf 'RDataScrp += " window.alert(DataFromServer);" + vbCrLf RDataScrp += " var dfsa = DataFromServer.split('@@@'); " + vbCrLf RDataScrp += " var itm = dfsa[0]; " + vbCrLf RDataScrp += " var spnArea = window.document.getElementById('" + Me.spanArea.ClientID + "'); " + vbCrLf RDataScrp += " var spnRoad = window.document.getElementById('" + Me.spanRoad.ClientID + "'); " + vbCrLf RDataScrp += " var spnNum = window.document.getElementById('" + Me.spanNum.ClientID + "'); " + vbCrLf RDataScrp += " var txtPost = window.document.getElementById('" + Me.txtPost.ClientID + "'); " + vbCrLf RDataScrp += " switch(itm) " + vbCrLf RDataScrp += " { " + vbCrLf RDataScrp += " case 'City' : " + vbCrLf RDataScrp += " spnArea.innerHTML = dfsa[1] ;" + vbCrLf RDataScrp += " spnRoad.innerHTML = ''; " + vbCrLf RDataScrp += " spnNum.innerHTML = ''; " + vbCrLf RDataScrp += " txtPost.value=''; " + vbCrLf RDataScrp += " break; " + vbCrLf RDataScrp += " " + vbCrLf RDataScrp += " case 'Area' : " + vbCrLf RDataScrp += " spnRoad.innerHTML = dfsa[1]; " + vbCrLf RDataScrp += " spnNum.innerHTML = ''; " + vbCrLf RDataScrp += " txtPost.value=''; " + vbCrLf RDataScrp += " break; " + vbCrLf RDataScrp += " " + vbCrLf RDataScrp += " case 'Road' : " + vbCrLf RDataScrp += " spnNum.innerHTML = dfsa[1]; " + vbCrLf RDataScrp += " txtPost.value=''; " + vbCrLf RDataScrp += " break; " + vbCrLf RDataScrp += " " + vbCrLf RDataScrp += " case 'Num' : " + vbCrLf RDataScrp += " txtPost.value=dfsa[1]; " + vbCrLf RDataScrp += " break; " + vbCrLf RDataScrp += " " + vbCrLf RDataScrp += " default : " + vbCrLf RDataScrp += " alert('None'); " + vbCrLf RDataScrp += " " + vbCrLf RDataScrp += " } " + vbCrLf RDataScrp += " " + vbCrLf RDataScrp += " }" + vbCrLf RDataScrp += "</script>" + vbCrLf '將相關Client端Script註冊為StartupScript Me.Page.ClientScript.RegisterStartupScript(Me.GetType, "", RDataScrp)

步驟五：撰寫CallBack後的處理

由於3+2郵遞區號的處理必須傳回1~4個不等的參數，所以必須判斷傳入的是從哪個物件傳入，然後依照不同的物件項目處理資料並回傳，相關的程式如下

Public Sub RaiseCallbackEvent(ByVal eventArgument As String) Implements System.Web.UI.ICallbackEventHandler.RaiseCallbackEvent '@@Implements ICallbackEventHandler後產生的介面程式 '@@eventArgument為CallBack後，Client傳入的參數 Dim InData As String = eventArgument '取得傳入的參數 Dim InDataA() As String '定義陣列，承接傳入參數的Split Dim Itm As String '運作的控制項目 InDataA = Split(InData, "$$$") 'Split傳入參數，拆解為Itm,資料 Itm = InDataA(0) '取得運作的控制項目 Dim sdsrc As New SqlDataSource Dim slt1 As New DropDownList '宣告並實體化DopDownList控制項 Dim City As String = "" Dim Area As String = "" Dim Road As String = "" Dim Num As String = "" Dim ds As DataSet Dim SqlTxt As String = "" Try '依不同的控制項目，執行不同的運作 Select Case Itm Case "City" City = InDataA(1) '取得查詢的結果並傳入DataSet ds = GetData(Itm, City, Area, Road, Num) slt1.DataTextField = "區域" '指定DropDownList結合DataSet的欄位名稱 slt1.ID = "ddlArea" '指定物件的ID '設定【地區】的Select控制項OnChange的時候執行CallBack的Client Script Dim cbRef2 As String = "" cbRef2 = Page.ClientScript.GetCallbackEventReference(Me, "'Area$$$" + City + ",' + " + slt1.ClientID + ".value", "RecvData", "") slt1.Attributes("onchange") = cbRef2 Case "Area" City = Split(InDataA(1), ",")(0) Area = Split(InDataA(1), ",")(1) '取得查詢的結果並傳入DataSet ds = GetData(Itm, City, Area, Road, Num) slt1.DataTextField = "路名" '指定DropDownList結合DataSet的欄位名稱 slt1.ID = "ddlRoad" '指定物件的ID '設定【路】的Select控制項OnChange的時候執行CallBack的Client Script Dim cbRef3 As String = "" cbRef3 = Page.ClientScript.GetCallbackEventReference(Me, "'Road$$$" + City + "," + Area + ",' + " + slt1.ClientID + ".value", "RecvData", "") slt1.Attributes("onchange") = cbRef3 Case "Road" City = Split(InDataA(1), ",")(0) Area = Split(InDataA(1), ",")(1) Road = Split(InDataA(1), ",")(2) '取得查詢的結果並傳入DataSet ds = GetData(Itm, City, Area, Road, Num) slt1.DataTextField = "其他" '指定DropDownList結合DataSet的欄位名稱 slt1.ID = "ddlNum" '指定物件的ID '設定【號】的Select控制項OnChange的時候執行CallBack的Client Script Dim cbRef4 As String = "" cbRef4 = Page.ClientScript.GetCallbackEventReference(Me, "'Num$$$" + City + "," + Area + "," + Road + ",' + " + slt1.ClientID + ".value", "RecvData", "") slt1.Attributes("onchange") = cbRef4 Case "Num" City = Split(InDataA(1), ",")(0) Area = Split(InDataA(1), ",")(1) Road = Split(InDataA(1), ",")(2) Num = Split(InDataA(1), ",")(3) '取得查詢的結果並傳入DataSet ds = GetData(Itm, City, Area, Road, Num) End Select If Itm <> "Num" Then 'CallBack啟動的項目不是Num，DataSet作DataBind slt1.DataSource = ds slt1.DataBind() '在最前面補一個空白選項 Dim Itm1 As New ListItem("", "") slt1.Items.Insert(0, Itm1) '轉換控制項取得執行結果的HTML，指定給ret傳回 ret = Itm + "@@@" + My.StudyHost20.WebControl.GetHTML(slt1) Else 'CallBack啟動的項目是Num，傳回郵遞區號 ret = Itm + "@@@" + ds.Tables(0).Rows(0).Item(0).ToString ds.Dispose() ds = Nothing End If Catch ex As Exception ret = Itm + "@@@" + ex.Message.ToString End Try End Sub

其中對於資料讀取的部分，將之獨立出來在另外的Function中，程式如下：

'讀取資料傳回DataSet Function GetData(ByVal RunType As String, ByVal City As String, ByVal Area As String, ByVal Road As String, ByVal Num As String) As DataSet Dim ConnStr As String = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=\\10.1.42.8\wwwroot\AtlasDemo2\App_Data\ZipCode.mdb" Dim Conn As New OleDbConnection(ConnStr) Try Conn.Open() Dim SqlTxt As String = "" Select Case RunType Case "City" SqlTxt += " SELECT DISTINCT 區域 " SqlTxt += " FROM 台灣郵遞區號 " SqlTxt += " WHERE (城市 = '" + City + "') " SqlTxt += " " Case "Area" SqlTxt += " SELECT DISTINCT 路名 " SqlTxt += " FROM 台灣郵遞區號 " SqlTxt += " WHERE (城市 = '" + City + "' And 區域 = '" + Area + "') " Case "Road" SqlTxt += " SELECT DISTINCT 其他 " SqlTxt += " FROM 台灣郵遞區號 " SqlTxt += " WHERE (城市 = '" + City + "' And 區域 = '" + Area + "' And 路名 = '" + Road + "') " Case "Num" SqlTxt += " SELECT DISTINCT 郵遞區號 " SqlTxt += " FROM 台灣郵遞區號 " SqlTxt += " WHERE (城市 = '" + City + "' And 區域 = '" + Area + "' And 路名 = '" + Road + "' And 其他 = '" + Num + "') " End Select Dim Cmmd As New OleDbCommand(SqlTxt, Conn) Dim da As New OleDbDataAdapter(Cmmd) Dim ds As New DataSet da.Fill(ds) da.Dispose() da = Nothing Cmmd.Dispose() Cmmd = Nothing Return ds Catch ex As Exception Response.Write(ex.Message.ToString) Finally Conn.Dispose() Conn = Nothing End Try End Function

當畫面一開始時，由於從sqlDataSouce中Bind資料，所以一開始就選擇了其中一筆，我們希望一開始的時候為空白讓使用者挑選，才啟動OnChange事件，所以針對程式的DropDownList的DataBind事件中，用程式插入一個空白選項在最開始處，程式如下：

Protected Sub ddlCity_DataBound(ByVal sender As Object, ByVal e As System.EventArgs) Handles ddlCity.DataBound '於【城市】Select，設定一開始，結合資料後，新增空白項目 Dim Itm1 As New ListItem("", "") Me.ddlCity.Items.Insert(0, Itm1) End Sub

於是相關程式就大公告成啦

為了大家方便起見，將相關的程式壓縮後讓大家下載參考，網址如下

http://www.blueshop.com.tw/download/show.asp?pgmcde=PGM20060428142758VXV