[ASP.NET]介紹一款好用的AJAX控制項-AjaxDataControls

2009-09-05

10242
0
ASP.NET

前陣子在網路上查一下有沒有人寫好的Grid可拖拉控制項可參考，結果查到這個好東西：Ajax Data Controls，看它線上的demo並玩了一下，感覺好像很不錯，馬上下載了它的source來玩玩看，其實我只想要可以讓使用者拖拉欄位並自訂順序、長寬、前背景色就好，而這個Ajax Data Controls在拖拉欄位這個功能上實在簡單到不行，下面是我下載下來的Source雨專案內容：

他已經包好控制項的專案跟demo的站台囉，而因為我想要自己試看看Grid拖拉他是怎麼做的，我就自己新增了一個網頁，先在畫面上拉一個ScriptManger，並拉了一個他提供的Gridview，如下：


    <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要取得哪些資料，這邊的寫法異常的特別，我們看一下：



    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中很像，不得不說寫這個控制項的人確實是挺行的。

接著我們來demo一下實際view是怎麼樣，套了CSS後看起來還可以：

拖拉中：

拖拉後：

確實是蠻順暢的，功能上也大致滿足了，不過更讓我好奇的是它的架構，或許Javascript的強弱分別在這一點上就已經看出來了，不過有source可以trace真好..

游舒帆 (gipi)

探索原力Co-founder，曾任TutorABC協理與鼎新電腦總監，並曾獲選兩屆微軟最有價值專家 ( MVP )，離開職場後創辦探索原力，致力於協助青少年培養面對未來的能力。認為教育與組織育才其實息息相關，都是在為未來儲備能量，2018年起成立為期一年的專題課程《職涯躍升的關鍵24堂課》，為培養台灣未來的領袖而努力。

回首頁