他已經包好控制項的專案跟demo的站台囉,而因為我想要自己試看看Grid拖拉他是怎麼做的,我就自己新增了一個網頁,先在畫面上拉一個ScriptManger,並拉了一個他提供的Gridview,如下:
<asp:ScriptManager ID="TheScriptManager" runat="server">
<Services>
<asp:ServiceReference Path="~/DataService.asmx" />
</Services>
<Scripts>
<asp:ScriptReference Path="~/PreviewScripts/PreviewScript.js" />
<asp:ScriptReference Path="~/PreviewScripts/PreviewDragDrop.js" />
<asp:ScriptReference Path="~/PreviewScripts/PreviewGlitz.js" />
</Scripts>
</asp:ScriptManager>
<AjaxData:GridView ID="GridView1" runat="server" CssClass="DataWebControlStyle" Width="381px">
<AlternatingRowStyle CssClass="AlternatingRowStyle" />
<RowStyle CssClass="RowStyle"/>
<HeaderStyle CssClass="HeaderStyle"/>
<Columns>
<AjaxData:GridViewBoundColumn HeaderText="Company" DataField="Company" ColumnID="1"/>
<AjaxData:GridViewBoundColumn HeaderText="Contact" DataField="ContactName" ColumnID="2"/>
<AjaxData:GridViewBoundColumn HeaderText="Title" DataField="ContactTitle" ColumnID="3"/>
</Columns>
</AjaxData:GridView>
ScriptManager還參考了一個DataService.asmx的web service,主要是為了要取得資料庫中的資料,而且還多參考了三個js檔,以上的內容是先宣告好控制項會用到的資源,而以下我們在宣告GridView要取得哪些資料,這邊的寫法異常的特別,我們看一下:
<script type="text/javascript">
var _gridView;
function pageLoad(sender, e)
{
_gridView = $find('<%= GridView1.ClientID %>');
loadSuppliers();
}
function loadSuppliers()
{
DataService.GetAllSupplier(onLoadSuccess);
}
function onLoadSuccess(result)
{
_gridView.set_dataSource(result);
_gridView.dataBind();
}
</script>
所有取得資料的Code都寫在Javascript中,一度讓我懷疑我是不是在寫inline的ASP.NET程式阿,但顯然不是,上面這段的意思是做好GridView的初始化,並開始進行資料的載入,而載入的資料則是取得Supplier的資料(記得安裝Northwind資料庫),成功取得後就將資料放回GridView中,這個寫法跟寫在cs中很像,不得不說寫這個控制項的人確實是挺行的。
確實是蠻順暢的,功能上也大致滿足了,不過更讓我好奇的是它的架構,或許Javascript的強弱分別在這一點上就已經看出來了,不過有source可以trace真好..