代码改变世界

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

2009-11-04 23:37  Jun1st  阅读(296)  评论(0编辑  收藏

作为一个从事.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