首頁 »
2011/03/30

由Javascript呼叫Webservice產生動態選單

要做到由JavaScript呼叫Webservice的方法,並放到下拉選單的作法:
1.加入一個WebService,選擇 Web Service,檔案名稱輸入LocationService.asmx

1.1 加入 using System.Web.Script.Services;
1.2 為類別標上 [ScriptService] attribute:

[ScriptService()]
public class LocationService : System.Web.Services.WebService
1.3 撰寫可供 JavaScript 呼叫的 Web 方法:
[WebMethod]
[System.Web.Script.Services.ScriptMethod]
1.4 撰寫取得資料庫的函式,運作JSON的結構產生陣列:
[WebMethod]
[System.Web.Script.Services.ScriptMethod]
public string GetCounty(string area)
{
OleDbDataReader dr = null;
string json = "";
json = "[{text:'Please Select',value:'0'},"
....
....
json += "{text:'" + dr["name"] + "',value:'" + dr["id"] + "'}";
....
....
return json;
}

2.建立WebForm程式:JsCallWebService.aspx

2.1 從工具的 AJAX Extensions 面板中拉一個 ScriptManager 控制項到網頁上,然後修改其標籤內容,如下:
<asp:ScriptManager ID="ScriptManager1" runat="server">
    <services>
        <asp:servicereference path="~/LocationService.asmx" />
    </services>
</asp:ScriptManager>

2.2 再拉一個DropDownList
<asp:DropDownList ID="DropDownList1" runat="server">
</asp:DropDownList>

2.3 呼叫webservice的javascript的元件或按鈕
onclick="getList('abc')"

3.建立JavaScript
function getList(para) 
{
    // 呼叫 Web service 方法。
    MyServices.LocationService.GetCounty(para);
}

function pageLoad()
{
    // 指定 Web service 方法呼叫完成時的預設 callback。
    MyServices.LocationService.set_defaultSucceededCallback(methodComplete);
}

function methodComplete(results, context, methodName)
{
    var json = "json="+results;
    json = eval(json);
    var obj = document.getElementById('ctl00_ContentPlaceHolder1_DropDownList1');
    for (i = 0; i < json.length; i++) { 
        obj.options[i] = new Option(json[i].text, json[i].value); 
    }
}    

參考網址:
1.http://dev.yesky.com/0/3462500.shtml
2.http://huanlin.dyndns.org/cs/blogs/huan-lins_blog/rss.aspx?Tags=AJAX&AndTags=1
3.http://tw.myblog.yahoo.com/class2u-com/article?mid=2&sc=1


這是預止XSS攻擊的語法←上一篇 │首頁│ 下一篇→DropDownList下拉的作法
本文引用網址: