在Dynamic Data網站的Insert.aspx加入AutoCompleteExtender

Dynamic Data網站範本，強調的就是資料導向網頁的快速開發。

但有時還是需加入一些自訂功能。

今天我想要在新增資料時，在IssuedBy(輸入員工工號的TextBox)項目，

能有自動完成(AutoComplete | AutoSuggest)的功能：

如下圖，輸入"L"，L開頭的員工代號及名字都會自動出現。

1.新增Dynamic Data網站

2.在專案中加入新項目LINQ to SQL 類別

然後會自動新增這三個項目DataClasses.dbml、DataClasses.dbml.layout

DataClasses.dbml.designer.cs

點兩下DataClasses.dbml，把在資料庫總管內的CCNM資料表拉到左方，就如下圖

。(CCNM是我要使用的資料表，請你選擇自己要的資料表然後拉到左方)

然後打開DataClasses.dbml.designer.cs，資料表相關的實體類別都定義在此。

看到下面這一串，把DataClassesDataContext 複製下來

public partial class DataClassesDataContext : System.Data.Linq.DataContext

打開Global.asax，來註冊上面產生的 Linq to Sql 類別。先把下面這行的註解拿掉

//model.RegisterContext(typeof(YourDataContextType), new ContextConfiguration() { ScaffoldAllTables = false });

把”YourDataContextType”換成上方的DataClassesDataContext ，

ScaffoldAllTables = false 改成 False，結果如下：

model.RegisterContext(typeof(DataClassesDataContext), new ContextConfiguration() { ScaffoldAllTables = true });

因為我要在新增資料時才加入AutoComplete的功能，為了不影響自動產生的

頁面範本(PageTemplates/Insert.aspx)而使用自訂的頁面範本，

規則如下：1.在CustomPages資料夾下，新增和CCNM資料表相同名稱的資料夾。

2.把PageTemplates/Insert.aspx這個檔案，複製一份到CCNM資料夾內。

完成後就如下圖。請遵照上方的規則，再編輯CCNM內的Insert.aspx為自訂。

打開CCNM內的Insert.aspx，有看到DetailsView1控制項

在DetailsView1控制項的DataBound事件內，加入處理函式

protected void DetailsView1_DataBound(object sender, EventArgs e)
   {       //找出DetailsView1內的IssuedBy使用者欄位範本控制項

 var issued = DetailsView1.FindFieldTemplate("IssuedBy") as FieldTemplateUserControl;
       if (issued != null)   {

//宣告一個AutoCompleteExtender實例，它的 TargetControlID就是issued.DataControl.ID

AjaxControlToolkit.AutoCompleteExtender ac = new        AjaxControlToolkit.AutoCompleteExtender();
           ac.TargetControlID = issued.DataControl.ID;
           ac.ServiceMethod = "DoWork";  //webmethod用來傳回員工代號及姓名
           ac.ServicePath = "~/Service.svc";  //所使用的webservice

           ac.MinimumPrefixLength = 1;  //下面都是AutoCompleteExtender的參數值
           ac.CompletionInterval = 500;
           ac.CompletionSetCount = 20;
           ac.EnableCaching = true;
     
       }
   }

結果就是如下：