私はASP.Netアプリケーションに取り組んでおり、特定の領域を高速化するためにAjaxを追加しようとしています。私が集中している最初の領域は、教師が子供たちの出席 (およびその他のデータ) を報告するための出席領域です。これは高速である必要があります。
ユーザーがアイコンをクリックし、Javascript と Jquery を介して 2 番目のコントロールをポップアップするデュアル コントロール セットアップを作成しました。次に、__doPostBack() を使用してポップアップ コントロールを更新し、関連するすべてのデータを読み込みます。
これがどのように機能するかを示す小さなビデオ スニペットを次に示します。
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 + @"','');
}
}}
まず、IE で __doPostBack() によってこのような遅延が発生する理由がわかりません。それと prm.add_endRequest を取り出すと、ポストバックが発生しないため、非常に高速です。
次に、このコントロールをポップアップしてデータを更新し、対話型のままにする方法が必要です。私は UpdatePanel と結婚していませんが、Web サービス/静的ページ メソッドでそれを行う方法を理解できていません。ご覧のとおり、このコントロールは同じページに何度も読み込まれるため、ページ サイズとダウンロード速度が問題になります。
アイデアをいただければ幸いです。
編集：IE 6または7でも同じです。FFとChromeでは同じコードがはるかに高速であるため、IEのUpdatePanelの処理に関係していると思います。