您正使用訪客身分瀏覽 (登入)
頁面路徑

Lesson11：Access Database 連結與網頁表格資料查詢設計

　

  • 利用Microsoft Office Access匯入您用Excel的表格，建立App_Data\sample29.mdb資料庫，並自動產生主索引欄位(可大幅加快資料的存取速度)，利用鄉鎮X,Y座標的中心點，對GoogleMap地圖中心的控制。

　

primarykey.jpg

　

  • 以Microsoft Visual Web Developer 2008為開發環境

Step1：檔案--> 建立新網站 -->指定Asp.net網站類型 --> 指定檔案系統的開發方式(待開發完畢才利用伺服器的HTTP環境)-->指定一個資料夾(開發完畢可以直接上傳到伺服器)-->指定開發的語言為Visual Basic

mvwd1.jpg

　

Step2：網站-->加入新項目-->選擇視覺化的網路表單設計WebForm-->指定檔案的名稱Default2.aspx-->將VB開發的程式單獨放在個別的檔案中(維持網頁的清楚簡單，容易修改、容易除錯，也能保障程式的安全性Default2.aspx.vb，一般人讀取網頁按滑鼠右鍵"檢視原始檔"，也看不到設計的原始碼)

mvwd2.jpg

　

Step3：網頁編輯模式切換到"設計"-->游標移動到工具箱-->在工具箱中拖曳兩個DropDownList到設計的頁面中-->
在屬性表裡設定這兩個下拉式的ID分別為cboTown、cboVillage

　

mvwd3.jpg

　

Step4：在工具箱中拖曳兩個AccessDataSource到設計的頁面中-->在屬性表裡設定這兩個下拉式的ID分別為adsTown、adsVillage

mvwd4.jpg

　

Step5：設定AccessDataSource的資料來源，產生一個SQL的查詢條件(這個結果會在第七步對應到第一個下拉式選單中)

　

(1)將Step1製作的sample29.mdb複製到網站目錄的App_Data資料夾中-->點選第一個adsTown-->設定資料來源為App_Data資料夾下的sample29.mdb。

(2)指定資料表或檢視的資料行-->指定查詢的欄位為Town-->只傳回不重複的資料列，過濾掉重複的資料項。

(3)利用測試查詢的方式，檢查查詢的正確性。

mvwd5.jpg

　

Step6：設定第二個adsVillage產生的SQL查詢語法，這個語法會參照第一個下拉式選單的結果(這個結果會在第七步對應到第二個下拉式選單)

　

(1)點選第二個adsVillage-->設定資料來源為App_Data資料夾下的sample29.mdb。指定資料表或檢視的資料行-->指定查詢的欄位為Village-->由「where」來設定第二個下拉選單與第一個選單的關係

(2)在SQL裡Where後面接的是查詢條件式，這個條件會以「加入where子句」的對話框呈現。在「資料行」選Town-->「來源」選control -->參數屬性「控制項ID」選cboTown-->接著按「加入」，如此會自動產生where子句的語法

(3)按下確定後，可以看到"select village from center where town=? " 這個Select的陳述式。

(4)完成後也可以利用「測試查詢」來驗證設定的查詢語法有沒有錯誤，按下「測試查詢」可以手動的輸入某一鄉鎮值，看看查詢出來的結果。

mvwd6.jpg

　

選取要顯示在DropDownList中的資料欄位Town選取DropDownList值的資料欄位Town ，這裡我們也只會有Town可以選，因為我們在SQL就只有篩選village表裡的Town欄位。
　

Step7：結合第五步adsTown、第六步adsVillage到對應的下拉式選單cboTown與cboVillage，讓下拉式選單裡可以看到SQL測試的查詢結果。


(1)設定cboTown的資料來源

(2)選取資料來源為adsTown

(3)資料繫結adsTown後，強制每次這個項目被選取時，要回傳一次AutoPostBack(cboTown下拉式選單要連動到cbovillage，在cboTown勾選AutoPostBook後，cbovillage才會連動到Town值的每次改變)。

mvwd7.jpg

(4)設定cboVillage的資料來源-->選取資料來源為adsVillage-->選取要顯示在DropDownList中的資料欄位village選取DropDownList值的資料欄位village 即可，不用再設定AutoPostBack。

　

Step8：AJAX與Access的連結：利用button傳送前述步驟中選擇鄉鎮村里中心點的經緯度，讓Google Map的中心點隨之移動。


在工具箱中在拖曳一個button，針對button 按滑鼠二下，會開啓前述表單設計頁的程式頁面Default2.aspx.vb，可編輯程式。

mvwd8.jpg
　

//ButtonClick Method
//設定資料連結
Dim conn As New Data.OleDb.OleDbConnection(ConfigurationManager.ConnectionStrings("sfConnectionString").ConnectionString)
Dim sql As String = "select * from center" 'SQL查詢語法
Dim kml As String = "<script>var msg='" '組織字串參數
sql &= " where town='" & cboTown.SelectedValue & "' and village='" & cbovillage.SelectedValue & "'"
Dim cmd As New Data.OleDb.OleDbCommand(sql, conn)
conn.Open()
Dim dr As Data.OleDb.OleDbDataReader = cmd.ExecuteReader // dr裡存放的是SQL的查詢結果
While dr.Read // 將 dr的資料讀出
kml &= dr("x") & "^" & dr("y") & "^" & " 鄉鎮村里:" & dr("town") & dr("village")
kml &= "|"
End While
'最後一筆資料不需要'|'
If Right(kml, 1) = "|" Then kml = Left(kml, Len(kml) - 1)
kml &= "'" & vbCrLf & "parent.locate(msg);</script>"
'註冊 javascript: msg 全域變數並呼叫母頁(default.aspx) 的 locate 函式
Page.ClientScript.RegisterClientScriptBlock(Me.GetType, "", kml)
dr.Close()
conn.Close()
conn.Dispose()

　

回到Default.aspx
在<script type="text/javascript">空白處，加入定位功能的function(利用下列式選單篩選資料庫裡的座標，重新呈現地圖的中心點位)

//定位功能
function locate(msg) {
for (i=0; i<marker.length; i++) {
map.removeOverlay(marker[i]);
}
if (msg.length==0) {
alert('查無資料...');
} else {
var arr1 = msg.split('|');
var arr2;
var count = arr1.length;
var x=0;
var y=0;
for(var i=0; i<count; i++) {
arr2 = arr1[i].split('^');
x += parseFloat(arr2[0]);
y += parseFloat(arr2[1]);
//建立村里中心點位
map.addOverlay(createMarker(arr2[0], arr2[1], arr2[2], arr2[3]));
}
x = x / count;
y = y / count;
//移動至 X,Y 坐標
map.setCenter(new GLatLng(y, x), 14);
}
}
　


在Google Map頁的<form></form>中間加入<iframe src="Default2.aspx" height ="200px" width ="200px"></iframe>
　

http://gis.nhlue.edu.tw/gmap/sample29.aspx 

sample29.rar

最後修改: 2013年 12月 18日(三.) 16:49