Alan Tsai 的隨手筆記

Ajax基本使用

Ajax使用不需要說太多，基本上ScriptManager是必備的，UpdatePanel表示那些需要以Ajax來執行，而UpdateProgress則是顯示一段字串當花太多時間。

如果你想要使用Ajax的控制項離你的展示項目太遠，可以使用UpdatePanel裡面的Trigger來設定那些在不在UpdatePanel裡面控制項但是想以Ajax執行。以下圖例表示一個TextBox和Button。Button不在Updatepanel裡面，但使用Trigger來把它加進來。

Ajax Control Toolkit

有些Ajax 控制項可以下載使用，

官網網址是： 下載地址

版本：如果使用VS2010使用.Net Framework 4.0 如果是VS2012則使用 .Net Framework 4.0

如果要使用記得要加上ScriptManager和UpdatePanel

安裝Ajax

我看官網說也可以使用Nuget來安裝，不過我們練習的時候使用的是手動下載，並安裝，因此我也使用這個辦法。

首先，下載以後，解壓出來，然後在VS的Tools Box裡面選擇「Add Tab」，加上一個欄位，然後點右鍵選「Choose Items」，找到解壓下來的資料夾裡面的dll(AjaxControlToolKit.dll)，選擇加入即可：

使用

基本上來說只要是控制項像是TextBox，在Design畫面，滑鼠劃過去，就會出現「Add Extender」即可加上Ajax 功能：

AutoComplete Control

ToolKit裡面有一個叫做AutoComplete的控制項，它能夠使用DB裡面資料來作為Auto Complete內容，基本上來說要使用他需要做一些設定。

首先，需要創建一個Web Service，在這一個web Service（.asmx）裡面有幾項要做：

1. Web Service的Class上面要把[System.Web.Script.Services.ScriptService]給啟用（去掉注解）
2. 加上一個WebMethod：

   [WebMethod] public string[] GetMyFilterList(string prefixText, int count) { DataSet ds = new DataSet(); SqlConnection cn = new SqlConnection(); cn.ConnectionString = "Data Source=.\\SQLEXPRESS;AttachDbFilename=|DataDirectory|\\Northwind.mdf;Integrated Security=True;User Instance=True"; SqlDataAdapter da = new SqlDataAdapter("SELECT 地址 FROM 員工", cn); da.Fill(ds); IList list = new string[ds.Tables[0].Rows.Count]; for (int i = 0; i < ds.Tables[0].Rows.Count; i++) { list[i] = ds.Tables[0].Rows[i]["地址"].ToString(); } List returnlist = new List(list.Count); for (int i = 0; i < list.Count; i++) { if (list[i].Contains(prefixText)) { returnlist.Add(list[i]); } } return returnlist.ToArray(); }
   

   這一個WebMethod將是被用來做Auto Complete搜索所用到。原理也很簡單，他其實只是做SQL查詢。
   如果要做更改只需要改SQL的指令，和DB的鏈接地址。這個例子使用的是Northwind資料庫。

到這裡Web Service準備好了。現在到需要到TextBox附加的AutoComple上面。首先，先選取到 Auto Complete的property，裡面有幾個參數很重要

1. ServicePath：這個將表示Web Service所在的位置，以我們的例子，Web Service和我們的軟件在同一個地方，因此只是把Web Service 的.asmx文件檔案名字帶進去。
2. ServiceMethod：這個表示使用那個Web Method，只要把Method名字帶進去即可，不需要加上兩個掛號（）。
3. MinimumPrefixLen：這表示打了幾個字以後才會開始做AutoComplete，預設是3個字。
4. CompletionInterval：延遲多久顯示AutoComplete。