ASP.NET AJAX 4的Client-Side Template和DataView

iDotNetSpace發表於2009-11-05
ASP.NETclientIDEView

作為一個從事.NET Web技術的開發人員，似乎沒有什麼理由可以不懂微軟自己的AJAX框架，雖然它可能不太好用，或者用起來沒有像jQuery這樣的框架那麼爽。我沒有怎麼用過UpdatePanel來做過複雜的東西，所以對於這個的優缺點就不予置評了。對於客戶端的ASP.NET AJAX的客戶端JS Library，還是有一定了解的，相比於jQuery，總覺得微軟把JS搞得跟C#似的有名稱空間, 介面，繼承這些特性有點彆扭，用起來也還是沒有jQuery順手。

不過在看了ASP.NET AJAX 4.0新新增的一些新特性之後，覺得還是很不錯的，解決了實際開發中經常會遇到的問題，因此值得學習一下。

Client-Side Template

在用AJAX從伺服器端取得資料之後，有時候會讓人頭疼的一個問題就是資料如何展示，尤其是當資料量比較大的時候，這個時候我們就比較想念DataGrid，GridView了。當然，我們可以借用伺服器端控制元件的Render方法，在伺服器端把資料繫結到控制元件上之後，直接寫到Response中。不過這種方法把資料和UI糅合在了一起，不是很令人滿意。現在，微軟為我們帶了Client Site Template，解決了這個問題。

首先，用Html定義一個Template:

01.
02.
03.  
04.
05.   

06.        Details for {{ Name }}
07.   

08.        Department {{ Department }}
                                   
09.        Title {{ Title }}
10.   
11.

而對於sys-template，只是設定 {visibility:hidden; display:none;}

ID為details-container的Div顧名思義，就是包含template的地方。在UI都定義好之後，就可以從伺服器端取資料了。

01.function fetchAndShowDetails(eventElement) {
02.    var container = $get("details-container");
03.    $(container).hide().empty();
04.  
05.    var manager = getDetailWithId(123);
06.    var detailsTemplate = new Sys.UI.Template($get("details-template"));
07.    detailsTemplate.instantiateIn(container, manager);
08.  
09.    $(container).show();
10.}
11.  
12.//stimulate get data from server
13.function getDetailWithId(managerId)
14.{
15.    var person = { Name: "Beckham", Title: "Football Star", Department: "Man United", Fans: [{Name:"Beckham1"},{Name:"Beckham2"},{Name:"Beckham3"}] };
16.  
17.    return person;
18.}

這裡的getDetailWithID只是簡單的返回了一個JSON物件，而在實際情況中，這裡需要完成的工作就是從伺服器端取回資料。在取得資料之後，通過$get()獲取定義好的template，並把它構建成一個Sys.UI.Template, 再呼叫instantiateIn完成資料的賦值。到此為止了，挺簡單的方式。但是這隻解決了一個問題，這裡只顯示了一條資料，如果有多條資料需要顯示，那似乎就不能用這個了。這個時候，我們需要用的是DataView

使用DataView

同樣是使用上面的例子，但是這次需要顯示Backham的Fans, 而Beckham有很多的Fans，因此給Template加一個ul來顯示fans資訊

01.
02.   

03.        Details for {{ Name }}
04.   

05.        Title {{ Title }}; Department {{ Department }}                 
06.   

Fans:

07.   
08.       
  • {{Name}}
    • 09.           
    10.

    在頁面中改變不大，關鍵還是在JS程式碼中，在同樣的fetchAndShowDetails中，需要在container.show()之前，加一個renderFansList，這個函式才是關鍵

    01.function renderFansList(person, container) {
    02.    var dataItem, element;
    03.      
    04.    dataItem = person.Fans;
    05.    element = $('ul', container)[0];
    06.  
    07.    $create(Sys.UI.DataView,
    08.            { data: dataItem },
    09.            {},
    10.            {},
    11.            element);
    12.}

    程式碼其實很簡單，一目瞭然，如果看上去陌生，那隻不過需要一個對API熟悉的過程。在VS2010 Beta2中建立的web application，已經預設包含了jQuery庫，因此在上面的JS程式碼中會看到$()和$get()的混用。

    總結

    在實際應用中，需要使用DataView的情況可能會更多。


    原文地址：http://www.cnblogs.com/jun1st/archive/2009/11/04/1596285.html

    來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/12639172/viewspace-618181/，如需轉載，請註明出處，否則將追究法律責任。

    相關文章