ASP.NET For AutoComplete By Page Method

摘要:ASP.NET For AutoComplete By Page Method

最近仔細翻了一本舊書「ASP.NET AJAX經典範例100,使用VC#」這一本書其實也看了蠻多遍的,只是有些上面的範例,
沒有仔細把它一個個拿出來實作罷了,剛好最近有一個機會要實作AutoComplete的效果,因此又拿出來翻了一遍,前些日
子透過Adobe AIR也做過了一個類似的功能,不過因為AIR其實也是一種Window Form的方式,因此開發上遇到的問題也比
較少一些,不過透過Web Form的方式就不是這般簡單了。
透過Ajax Control Toolkit所提供的AutoComplete元件可以快速完成我們所需要的AutoComplete效果,但是找過許多的範例說
明與書本介紹的,大部分都是透過AutoComplete元件配合Web Service透過Web Method的方式,完成AutoComplete效果中推薦
字清單的產生,但是要建立一個Web Service對於ASP.NET並不困難,但如果遇到今天Web Server不是自己管理時候,通常要
請代管公司多加一個Web Service的掛載,他們可能又會要收你一筆費用,但其實Ajax Control Toolkit所提供的AutoComplete
元件其實也支援使用Page Method的方式來完成相同的結果,但根據書上說法透過Page Method是相較於Web Method來的成本
高,但我個人是覺得看需求的使用再於決定,必竟如果你資料量與頁面處理的比例是以資料量大的話,Web Service是個不錯
的選擇,但我自己來說其實我的資料量較少,透過Page Method也是在可以接受的範圍內,因此,我找了二篇對於AutoComplete
這二篇的內容,由於二篇文章都是說明For VB的版本,我另外提供For VC#的版本:
假設我們測試的網頁為:Default.aspx,另外Code-behind的是Default.aspx.cs,分別程式碼內容如下:
‧Default.aspx:主要是將ASP.NET AJAX所需要的ScriptManager元件與AutoCompleteExtener放入,並且設定相關的參數。
   1: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>
   2:  
   3: <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="AjaxControlToolkit" %>
   4:  
   5: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   6:  
   7: <html xmlns="http://www.w3.org/1999/xhtml" >
   8: <head runat="server">
   9:     <title>VIN Test</title>
  10: </head>
  11: <body>
  12:     <form id="form1" runat="server">
  13:     <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
  14:     </asp:ScriptManager>
  15:     VIN#:  <asp:TextBox ID="txtVIN" runat="server"></asp:TextBox> 
  16:     <AjaxControlToolkit:AutoCompleteExtender ID="aceVIN" runat="server" ServiceMethod="GetVINList" TargetControlID="txtVIN" CompletionInterval="100" MinimumPrefixLength="1">
  17:     </AjaxControlToolkit:AutoCompleteExtender>
  18:     </form>
  19: </body>
  20: </html>
‧Default.aspx.cs:要注意與上述二篇內容不同的地方,主要在於設定使用Page Method的Header部分,由於AutoCompleteExtender需要設定ServiceMethod
,因此,要設定今天AutoCompleteExtender在Co-behind的Method有辦法讓它可以認識並且使用。需要注意的寫法是:
 
[WebMethod]
[System.Web.Script.Services.ScriptMethod()]
完整的寫法如下:
   1: using System;
   2: using System.Collections.Generic;
   3: using System.Linq;
   4: using System.Web;
   5: using System.Web.UI;
   6: using System.Web.UI.WebControls;
   7: using System.Web.Services;
   8: using System.Web.Script.Services;
   9:  
  10: namespace WebApplication1
  11: {
  12:     public partial class WebForm1 : System.Web.UI.Page
  13:     {
  14:         protected void Page_Load(object sender, EventArgs e) {}
  15:  
  16:         [WebMethod]
  17:         [System.Web.Script.Services.ScriptMethod()]
  18:         public static String[] GetVINList(String prefixText, Int32 count)
  19:         {
  20:             Int32 iCount = 10;
  22:             for (int intI = 0; intI < iCount; intI++)
  21:             String[] strContent=new String[iCount];
  23:             {
  24:                 strContent[intI] = prefixText + intI.ToString();
  25:             }
  26:             return strContent;
  27:         }
  28:     }
  29: }
希望上述的解釋可以幫助大家更彈性使用Ajax Control Toolkit中的AutoCompleteExtender元件。如果有解釋不足或錯誤的地方,也請大家
熱心提供意見與建議。感謝。
 
<補充 - Ajax Control Toolkit用於Web User Control上的用法>
從上述的例子來看,可以明白它們主要是針對一個Web Page直接嵌入ScriptManager元件、加上Ajax Control Toolkit的元件來使用,
但是這樣的做法,如果遇到需要將一個Web Page透過多個Web User Control物件加以拼湊而成的話,其實就需要仔細分割部分元素,
包括:ScriptManager元件(一個Web Page只能有一個,因此通常會放在Master Page或該Main Page裡) 、Ajax Control Toolkit所對應的Web
Service或Web Method程式碼擺放的位置。如下圖的說明:
‧一般Web Page與Ajax Control Toolkit的使用
000
如上圖可以看出,一般Web Page使用的方式即是需要ScriptManager元件、目標要使用Ajax的物件(Target Component)與Ajax Control Toolkit元件,
三者加以組合,而Ajax所使用的Function或Web Service/Web Method大部分常見是用code-behind的方式直接使用。那麼如果要使用Web User Control
結合Ajax Control Toolkit的話,則需要變動Web Service/Web Method的位置如下圖:
‧結合Web User Control與Ajax Control Toolkit的使用
001
如上圖可得知,我們一樣有一個Web Page但它是用來組合Web User Control與Ajax Control Toolkit所對應的事件或方法,透過Web User Control
將指定需要的Ajax物件與目標加以建立於Web User Control中,但需要注意的是,要把Web Service/Web Method的部分搬動到存在ScriptManager
元件之中所屬的code-behind內,才有辦法正常的使用。
 
範例程式:
 
References:
[[AJAX] 使用 PageMethods 從 JavaScript 中直接呼叫 Server 端函式]http://phone.idv.tw/cs2/forums/thread/621.aspx