紀錄一下在ASP.Net 上使用AJAX呼叫Webmethod方法，做這個是因為有一項需求是要在Textbox下方，顯示資料庫搜尋的內容，依據每次在TextBox輸入的值，大概類似Google搜尋效果。
事實是JQuery的AutoComplete方法簡易實現，但AutoComplete需要事先將資料寫入前端，在這個需求中不是用的原因是：
1. 需求希望能開發出一公用的呼叫方式，每次只需在資料邏輯綁定Textbox即可，而不是每次寫死在前端中。
2.不同TextBox藉由綁定不同的Key讓DB識別要綁定那些內容到此Textbox下方。
3.每次在Textbox中輸入值會重新對DB獲取資料。
這有一缺點是經常性對DB取資料，可能會造成網路不佳的使用者在此功能的體驗不佳，若要避免此缺點，必須在畫面初始時把所有資料全部寫入前端畫面，但在我的情況來說，所有的資料過於龐大，不建議使用這個方法。
依我的例子來說使用XML傳輸DB資料，只要超過三百筆就會出現明顯卡頓，有三百筆以上的需求的可以使用JSON NET這方法實現，需要先把Newtonsoft.JSON加入參考。
首先是實作對DB取資料的function，所有WebMethod呼叫的方法一定要是Static。
[WebMethod]
public static string Search(string Key, string Text)
{
假設dtData為資料庫取回的資料
//JOSN NET
string xmlInput = dtData.DataSet.GetXml();
// 透過XmlDocument讀入
System.Xml.XmlDocument xmlDoc = new System.Xml.XmlDocument();
xmlDoc.LoadXml(xmlInput);
// 透過Json.NET將XmlNode轉為Json格式字串
string jsonText = Newtonsoft.Json.JsonConvert.SerializeXmlNode(xmlDoc);
return jsonText;
//XML
return dtData.DataSet.GetXml();
}
}
前端透過AJAX呼叫 ，Key是DB識別使用哪個SQL的值，Text 是被綁定TextBox的內容，的作法是將這個AJAX呼叫寫在該TextBox的onKeyup，即可每次被鍵入值時重新綁定值。
var key = 'Key_1';
var Text = $('#Textbox_1').val();
$.ajax({
type: "POST",
url: "Default.aspx/Search",
data: "{Key : '" + Key + "' ,Text : '" + Text + "'"},
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
console.log(r);
//實作透過回傳XML動態生成TABLE，要先寫出一個TABLE只有一列 和N個欄位，接著再用JQuery append加入TABLE以新增列。
這部分網上有其他更詳細的介紹，這裡就不示範不然文章太長。
}, ,
failure: function (request) {
console.log(request);
},
error: function (response) {
console.log(response);
}
我的作法是同時只會有一個搜尋結果視窗，每當搜尋結果被點擊後回寫內容到TEXTBOX，並且把TABLE物件刪除，每次呼叫AJAX時才會新增TABLE以供塞入資料。
用意是方便使用同一個ID進行控制，也更好理解。
這個東西挺有趣的，可以加入很多其他功能，例如固定標題列、擊搜尋結果後觸發 特定控制項的postback、Textbox間的相依性、依照搜尋結果每一欄位的型態自動定義寬度、每次固定搜尋N筆當ScrollBar捲到底時候再多搜尋N筆，以此類推。
得到的反饋有
1. 大小和位置必須控制得好才方便他人呼叫這個公用工具，盡量要做到呼叫少參數卻好，可以多載提供較多參數，比較細節的呼叫，但要提供一個簡易個呼叫方法。
2. DB邏輯寫得好的話，可以讓使用者在系統操作上，每次要輸入資訊時省下許多時間。
在寫這個時遇到最大的困擾是
顯示搜尋結果的位置，要控制得好不能使用CSS position absolute的top,left ，尤其是在你的網頁是由框架組合而成的，TOP LEFT位置並不準確，最後的辦法是使用margin。
小提醒：前端生成element時候要定義高度和寬度，否則怎麼樣都會看不見。
以上，希望能幫到大家。
留言
張貼留言