你应该学习的4种ASP.NET AJAX JavaScript UI方法

 

你应该学习的4种ASP.NET AJAX JavaScript UI方法

原文地址：http://encosia.com/2008/01/09/4-aspnet-ajax-javascript-ui-functions-you-should-learn/

 

以前我写的关于ASP.NET AJAX的文章很少谈起客户端功能，本文将仔细的看看ASP.NET AJAX中的JavaScript UI工具函数。这些方法非常有用，因为它们抽象了大多数有关浏览器兼容性的问题，为我们提供了一套友好的，连续的API。

特别的，我将向你展示一些使用addCssClass, getBounds, getLocation, 和 setLocation的例子，完成一些客户端UI任务。

轻松的添加和删除CSS类

一个被忽视的CSS特征是对同一个元素直接应用多个CSS类。例如，你可能参加过在线测试，测试结果中，正确的回答使用绿色显示，而错误的回答使用红色显示。你可以使用下面这个方法做到：

.answerResult {  font-weight: bold; } 

.correct      { color: green; }

.incorrect    { color: red; }

Answer #1: <span class="answerResult correct">correct</span>

Answer #2: <span class="answerResult incorrect">incorrect</span>

这是一个非常漂亮的解决方法。标记是语义上的，为了避免重复，将高亮(highlight)与基本类型中分开。然而，如果我们需要在客户端操作它们，还有很多工作要做。

幸运的是，ASP.NET AJAX客户端框架提供了工具函数以减轻复杂度。DomElement的addCssClass 和 removeCssClass正是我们需要的。假设span的ID为answerResult，这就是为正确回答动态添加CSS的全部：

Sys.UI.DomElement.addCssClass($get('answerResult'), 'correct');

我经常在产品中通过创建名字与某个域相关状态相同的CSS类来使用这种技术。于是，当显示数据时，只需简单的使用addCssClass添加一些上下文样式即可。

决定一个元素的大小

如果你从事客户端UI设计一段时间以后，你一定会遇到这种情况，如何在运行时决定HTML元素的大小？如果你需要兼容各种浏览器，那么你会发现这很枯燥。不是忍受痛苦，相反你可以使用DomElement的getBounds方法。它返回一个带有元素大小和位置的关联数组。

例如，如果你已经用一些数据填充了GridView，突然你想看看它的高度，如何才能做到？

var height = Sys.UI.DomElement.getBounds($get('GridView1')).height;

定位和移动元素

我想介绍的最后一个方法是getLocation 和 setLocation。毕竟，找到元素的大小之后，下一步你可能想它在哪里，或者想移动它。

例如，如果你想将一个div，SomeDiv，向右移动75px：

var loc = Sys.UI.DomElement.getLocation($get('SomeDiv'));

Sys.UI.DomElement.setLocation($get('SomeDiv'), loc.x + 75, loc.y);

把它放到一个循环中，你就得到了一个小的动画：

for (i = 1; i <= 75; i++)

{

  Sys.UI.DomElement.setLocation($get('SomeDiv'), loc.x + i, loc.y);

}

结论

你可能不像使用$addHandler和base type extensions那样频繁使用它们。然而，当你需要它们时，如果你知道它们你将会非常高兴。