在Web开发中，用户体验至关重要。DevExpress的ASP.NETGridView控件因其强大的功能和灵活性而广受欢迎。本文将介绍如何通过Yellow Fade Technique（YFT）来增强用户界面的交互体验，使用户能够更直观地看到页面上的变化。
Yellow Fade Technique最初由37 Signals在2004年左右提出。当用户在网页上编辑或移动内容时，通常会导致页面重新加载。问题在于一旦页面重新加载，用户往往很难找到并确认变化（尤其是当变化发生在页面中间时）。YFT利用JavaScript创建一个黄色高亮，当页面重新加载时，它会短暂地突出显示变化。然后，在一两秒内，高亮消失，页面恢复到正常状态。YFT使得编辑/更改非常容易被注意到，同时其不显眼的特性让用户在确认修改后可以迅速回到工作中。
尽管DevExpress的ASPxGridView由于内置了优秀的AJAX回调功能，不需要重新加载页面，但YFT仍然是一个让用户知道刚刚发生了什么变化的好方法。事实上，许多网站，如StackOverflow.com，已经采用了这种方法，因为它简单而优雅。
jQuery使得添加YFT变得简单，因为它提供了一个名为Highlight的'jQuery效果'，只需要在JavaScript代码中调用一个方法。
如果想要看到如何将YFT添加到ASPxGridView的视频版本，请观看这个网络研讨会视频。CTO兼JavaScript专家Julian Bucknall和将介绍这种技术以及在使用DevExpressASP.NET与jQuery时需要注意的其他事项。
以下是将YFT添加到ASPxGridView的步骤，当最终用户点击编辑表单中的'更新'按钮时：
<head runat="server">
<title></title>
<!-- 使用Google CDN的jQuery链接，可以根据需要更改为本地 -->
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
</head>
添加以下两个方法：
<script type="text/javascript">
var editedRowSelector = null;
function OnGridCallback() {
if (editedRowSelector) {
$(editedRowSelector).effect("highlight", {}, 3000);
editedRowSelector = null;
}
AddHandlerToUpdateButton();
}
function AddHandlerToUpdateButton() {
$("table[class^='dxgvEditFormTable']").find("a:contains('Update')").click(function() {
editedRowSelector = '#' + $("tr[class^='dxgvEditFormDisplayRow']").attr('id');
});
}
</script>
OnGridCallback方法用于调用jQuery高亮效果，并在ASPxGridView完成回调时触发。AddHandlerToUpdateButton方法用于为ASPxGridView的'更新'按钮添加点击事件。
为ASPxGridView添加一个客户端EndCallback事件：
<dx:ASPxGridView ID="ASPxGridView1" runat="server" AutoGenerateColumns="False" DataSourceID="AccessDataSource1" KeyFieldName="EmployeeID">
<ClientSideEvents EndCallback="function(s, e) { OnGridCallback(); }" />
<Columns>
...
</Columns>
</dx:ASPxGridView>
上述代码中发生的事情是：当最终用户点击'编辑'按钮或ASPxGridView进行回调时，回调结束时将调用OnGridCallback方法。如果editedRowSelector变量不为null，则调用jQuery高亮并将其设置为null。然而，如果editedRowSelector为null，则简单地调用AddHandlerToUpdate方法，该方法将分配editedRowSelector变量（如果网格的EditForm已显示）。然后，AddHandlerToUpdate方法将寻找一个名为dxgvEditFormTable的CSS类中的'更新'按钮。如果找到它，那么它将设置editedRowSelector变量。最后，当最终用户点击'更新'时，它将再次执行1-4步骤，但这次，由于editedRowSelector变量已设置，它将调用jQuery高亮效果。
如果上述解释令人困惑，那么很抱歉，并建议观看网络研讨会视频。
以下是在网络研讨会中创建的示例网站：
下载示例应用程序并观看网络研讨会视频以学习如何实现。尝试上述示例，然后在下面给留言，谢谢。
不接受限制 - 连续四年被DevProConnections杂志的读者评为最佳网格。ASPxGridView套件是ASP.NET的完整网格和编辑器库。凭借快速的数据加载、广泛的数据整形选项和轻量级内存占用，ASPxGridView可以轻松地为用户提供引人入胜且有效的体验。