我正在开发一个 ASP.Net 应用程序,并正在向它添加一些 Ajax 以加快某些领域的速度。我关注的第一个领域是出勤区,供老师报告孩子的出勤率(和其他一些数据)。这需要很快。
我创建了一个双控件设置,用户单击图标并通过 Javascript 和 Jquery 弹出第二个控件。然后我使用 __doPostBack() 刷新弹出控件以加载所有相关数据。
这是一个小视频片段来展示它是如何工作的:http ://www.screencast.com/users/cyberjared/folders/Jing/media/32ef7c22-fe82-4b60-a74a-9a37ab625f1f (:21并忽略音频背景)。
在 Firefox 和 Chrome 中,每次“弹出”需要 2-3 秒,这比我想要的要慢,但在 IE 中完全不可行,每次弹出和加载都需要 7-8 秒。这忽略了在更改数据后保存数据所需的任何时间。
这是处理弹出窗口的javascript:
function showAttendMenu(callingControl, guid) {
var myPnl = $get('" + this.MyPnl.ClientID + @"')
if(myPnl) {
var displayIDFld = $get('" + this.AttendanceFld.ClientID + @"');
var myStyle = myPnl.style;
if(myStyle.display == 'block' && (guid== '' || guid == displayIDFld.value)) {
myStyle.display = 'none';
} else {
// Get a reference to the PageRequestManager.
var prm = Sys.WebForms.PageRequestManager.getInstance();
// Unblock the form when a partial postback ends.
prm.add_endRequest(function() {
$('#" + this.MyPnl.ClientID + @"').unblock({ fadeOut: 0});
});
var domEl = Sys.UI.DomElement;
//Move it into position
var loc = domEl.getLocation(callingControl);
var width = domEl.getBounds(callingControl).width;
domEl.setLocation(myPnl, loc.x + width, loc.y - 200);
//Show it and block it until we finish loading the data
myStyle.display = 'block';
$('#" + this.MyPnl.ClientID + @"').block({ message: null, overlayCSS: { backgroundColor:'#fff', opacity: '0.7'} });
//Load the data
if(guid != '') { displayIDFld.value = guid; }
__doPostBack('" + UpdatePanel1.ClientID + @"','');
}
}}
首先,我不明白为什么 __doPostBack() 在 IE 中引入了这样的延迟。如果我把它和 prm.add_endRequest 拿出来,它会非常快,因为没有回发发生。
其次,我需要一种方法来弹出这个控件并刷新数据,以便它仍然是交互式的。我没有与 UpdatePanel 结婚,但我无法弄清楚如何使用 Web 服务/静态页面方法来做到这一点。如您所见,此控件在同一页面上加载了很多次,因此页面大小和下载速度是一个问题。
我会很感激任何想法?
编辑:在 IE 6 或 7 中是一样的。我认为这与 IE 对 UpdatePanel 的处理有关,因为相同的代码在 FF 和 Chrome 中要快得多。