2009-11-04 23:19 Jun1st 阅读(2168) 评论() 收藏 举报
作为一个从事.NET Web技术的开发人员，似乎没有什么理由可以不懂微软自己的AJAX框架，虽然它可能不太好用，或者用起来没有像jQuery这样的框架那么爽。我没有怎么用过UpdatePanel来做过复杂的东西，所以对于这个的优缺点就不予置评了。对于客户端的ASP.NET AJAX的客户端JS Library，还是有一定了解的，相比于jQuery，总觉得微软把JS搞得跟C#似的有命名空间, 接口，继承这些特性有点别扭，用起来也还是没有jQuery顺手。
不过在看了ASP.NET AJAX 4.0新添加的一些新特性之后，觉得还是很不错的，解决了实际开发中经常会遇到的问题，因此值得学习一下。
在用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.
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
同样是使用上面的例子，但是这次需要显示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()的混用。
在实际应用中，需要使用DataView的情况可能会更多。
Hope this helps
Thanks
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。