更新パネル内に次のコードがあります。画面が読み込まれると、SignalR コードは正常に動作します。ただし、最初にボタンをクリックすると、ページにリダイレクトされるまで SignalR コードは起動しません。
基本的に私がやっていることは、ユーザーがプレビュー ボタンをクリックすると、レポート プロセスが開始されることです。進行状況インジケーターとキャンセル ボタンを含む Ajax モーダル ポップアップが表示されます。ユーザーがキャンセル ボタンをクリックすると、キャンセル トークンが設定され、レポートがキャンセルされます。SignalR テクノロジを使用することで、UI スレッドはブロックされず、ユーザーはキャンセル ボタンをクリックできます。これは最初は正常に機能しますが、キャンセル ボタンをクリックした後、次回キャンセル ボタンをクリックすると機能しません。ただし、ページに再度リダイレクトすると機能します。
リンクボタンを更新パネルの外に移動すると、毎回機能します。
<asp:updatepanel runat="server" id="UpdatePanelFooter" rendermode="Inline" updatemode="Conditional">
<contenttemplate>
<table width="100%">
<tr>
<td>
<div id="divBottomBanner">
<asp:label id="LabelHelpID" runat="server" text="" visible="false"></asp:label>
<asp:linkbutton id="LinkButtonPreview" runat="server" OnClick="LinkButtonPreview_Click">Preview</asp:linkbutton>
<asp:linkbutton id="LinkButtonSaveAs" runat="server" onclick="LinkButtonSaveAs_Click">Save Prompts As</asp:linkbutton>
<asp:linkbutton id="LinkButtonGenerateSP" runat="server" onclick="LinkButtonGenerateSP_Click"><<<< GENERATE SP >>>></asp:linkbutton>
<asp:linkbutton id="LinkButtonInvisibleTargetControlIDSAVEAS" runat="server" causesvalidation="false" height="0" text="" width="0"></asp:linkbutton>
<asp:linkbutton id="LinkButtonInvisibleTargetControlIDPROGRESS" runat="server" causesvalidation="false" height="0" text="" width="0"></asp:linkbutton>
</div>
</td>
</tr>
</table>
<ajaxtoolkit:modalpopupextender id="ModalPopupExtenderPROGRESS" runat="server" targetcontrolid="LinkButtonInvisibleTargetControlIDPROGRESS" behaviorid="PROGRESS" popupcontrolid="PanelPROGRESS" backgroundcssclass="ModalBackground" dropshadow="true">
</ajaxtoolkit:modalpopupextender>
<asp:panel id="PanelPROGRESS" runat="server" cssclass="ModalPopup" style="display: none;" width="75em">
<table id="TablePROGRESS" width="95%">
<tr>
<td style="width: 10%"></td>
<td style="width: 30%"></td>
<td style="width: 50%"></td>
<td style="width: 10%"></td>
</tr>
<tr>
<td></td>
<td colspan="2" align="center">Processing Please Wait
<br />
<br />
<hr />
</td>
</tr>
<tr>
<td></td>
<td colspan="2" align="center">
<img src="../Images/moving_lights.gif" alt="Processing..." />
<hr />
</td>
</tr>
<tr>
<td>
<br />
<br />
</td>
</tr>
<tr>
<td></td>
<td align="center" colspan="2">
<asp:linkbutton id="LinkButtonCancelPROGRESSXD" runat="server" height="100%" cssclass="Button" causesvalidation="false" tabindex="6"> Cancel Preview Report </asp:linkbutton>
</td>
</tr>
<tr>
<td>
<br />
<br />
</td>
</tr>
</table>
</asp:panel>
</contenttemplate>
</asp:updatepanel>
次に、SignalR セクションで使用されるスクリプトに次のコードを含めます。
/// <reference path="../scripts/jquery-1.8.3.js" />
/// <reference path="../scripts/jquery.signalR-1.0.0.js" />
/*!
ASP.NET SignalR Report Processing
*/
// Crockford's supplant method
if (!String.prototype.supplant) {
String.prototype.supplant = function (o) {
return this.replace(/{([^{}]*)}/g,
function (a, b) {
var r = o[b];
return typeof r === 'string' || typeof r === 'number' ? r : a;
}
);
};
}
// A simple background color flash effect that uses jQuery Color plugin
jQuery.fn.flash = function (color, duration) {
var current = this.css('backgroundColor');
this.animate({ backgroundColor: 'rgb(' + color + ')' }, duration / 2)
.animate({ backgroundColor: current }, duration / 2);
}
$(function () {
var RPT = $.connection.ReportProcessing;
function stopRPT() {
//$ReportProcessingUl.stop();
}
function init() {
return RPT.server.waitForReportToBeReady().done(function () {
// Add Code Here
});
}
//function jsFireThePreviewClick() {
// var ctrl = $("#ImageButtonRUNTHEREPORTXD");
// if (ctrl != null) {
// ctrl.click();
// }
//}
// Add client-side hub methods that the server will call
$.extend(RPT.client, {
updateReportProgress: function () {
},
ReportOpened: function () {
//scrollRPT();
},
ReportClosed: function () {
stopRPT();
},
ReportCancel: function () {
return init();
}
});
// Start the connection
$.connection.hub.start()
.pipe(init)
.pipe(function () {
return RPT.server.waitForReportToBeReady();
})
.done(function (state) {
if (state === 'Open') {
RPT.client.ReportOpened();
} else {
RPT.client.ReportClosed();
}
// Wire up the buttons
$("#LinkButtonPreview").click(function () {
RPT.server.openReport();
});
$("#close").click(function () {
RPT.server.closeReport();
});
$("#LinkButtonCancelPROGRESSXD").click(function () {
RPT.server.cancelReport();
alert('Report Canceled By User');
});
});
});
LinkButtonPreview を更新パネルの外に移動すると、毎回正常に動作します。このリンクボタンを更新パネル内に配置する必要がありますが、SignalR を使用するたびに機能させる必要があります。更新パネルとポストバックの処理方法に関係があることはわかっています。ただし、これを毎回正しく機能させるために何をする必要があるかわかりません。私が言ったように、最初はうまくいきますが、その後はうまくいきません。