My Profile

  • 暱稱:gipi
    現職:某軟體公司研發主管
    專長:軟體架構設計、產品開發、產品整合
    Plurk:http://www.plurk.com/gipi

My Awards

  • (ASP.NET 2009第四季)

最新回應

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

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

image

他已經包好控制項的專案跟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中很像,不得不說寫這個控制項的人確實是挺行的。

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

image

拖拉中:

image

拖拉後:

image

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


分享
推到 Plurk!

2009/9/5 23:02| 閱讀數 : 1122 | 2 人推薦 我要推薦 | 4 Comments | 文章分類: ASP.NET 訂閱


關連文章

回應

  • hatelove 2009/9/6 上午 03:39 回覆

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

    說到這我就汗顏了,
    果然行動力還是沒gipi哥高。

    這邊有一篇文章是小的快一年前就發現的,
    東西跟gipi哥這一篇文章講的很像,只是沒封裝過,相對的應該也算是乾淨的多。

    附上來給gipi哥當個參考:

    dotnetslackers.com/articles/ajax/ASPNETAjaxGridAndPager.aspx

  • hatelove 2009/9/6 上午 03:43 回覆

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

    看起來好像是同一個作者...ㄎㄎ

    anyway...那個網站上好文章真是不少...
    常年在那邊挖寶感覺很不錯

  • jimmyyu 2009/9/6 上午 09:14 回覆

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

    所以是我晚了一年,哈..我大概看了一下這個作者寫的架構算蠻乾淨的,不過javascript用的超兇的,遇到爛電腦應該會掛點才對... 因為我比較少用這些東西,我們的產品有自己的Gridview,不過因為要做拖拉還有點麻煩,想要找一下現成的。
  • hunterpo 2009/10/26 下午 03:58 回覆

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

    這東西拿原始碼來研究一下也不錯,應該可以學到一些東西。

標題 *
名稱 *
Email (將不會被顯示)
Url
回應
登入後使用進階評論
Please add 3 and 3 and type the answer here: