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

作为一个从事.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.<div id="details-container" style="display: none">

02.</div>

03.  

04.<div id="details-template" class="sys-template">

05.    <h3>

06.        Details for {{ Name }}</h3>

07.    <p>

08.        Department {{ Department }} <br />                                   

09.        Title {{ Title }}

10.    </p>

11.</div>

而对于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.<div id="details-template" class="sys-template">

02.    <h3>

03.        Details for {{ Name }}</h3>

04.    <p>

05.        Title {{ Title }}; Department {{ Department }}</p>                 

06.    <h4>Fans:</h4>

07.    <ul class="sys-template">

08.        <li>{{Name}}</li>

09.    </ul>       

10.</div>

在页面中改变不大，关键还是在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()的混用。

总结

在实际应用中，可能需要Template和DataView两者结合用的情况会更多。

Hope this helps

Thanks