SignalR更新面板仅在第一次工作 [英] SignalR Update Panel Only Works First Time
问题描述
我在更新面板中包含以下代码.屏幕加载时，SignalR代码可以正常工作.但是，第一次后，单击按钮后，SignalR代码将不再触发，直到引起重定向回页面为止.
I have the following code inside of an update panel. When the screen loads, the SignalR code works fine. However, after the first time, once I click a button, the SignalR code does not fire anymore until I cause a redirect back to the page.
基本上我在做什么是当用户单击预览按钮时，它会触发报告过程.将显示一个Ajax模态弹出窗口，其中带有进度指示器和取消按钮.如果用户单击取消"按钮，则会设置取消令牌，并取消报告.通过使用SignalR技术，不会阻塞ui线程，并且用户可以单击取消"按钮.第一次可以正常使用.但是，单击取消"按钮后，下次单击取消"按钮时，它将不起作用.但是，当我再次重定向到页面时，它可以工作.
Basically what I am doing is when the user clicks the preview button, it fires off the reporting process. An Ajax modal popup is displayed with a progress indicator and a cancel button. If the user clicks the cancel button, the cancelation token is set, and the report is canceled. By using the SignalR technology, the ui thread is not blocked and the user can click the cancel button. This works fine the first time in. however, after clicking the cancel button, the next time when you click on the cancel button it does not work. However, when I redirect to the page again it works.
如果将链接按钮移到更新面板之外，则每次都会起作用.
If I move the linkbutton outside of the update panel it works every time.
<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部分中使用的脚本中包含以下代码.
I then have the following code in the script that is used in the SignalR section.
/// <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移到更新面板之外，则每次都可以正常工作.我需要在更新面板中使用此linkbutton，但是每次使用SignalR时都需要它起作用.我知道它与更新面板及其处理回发的方式有关.但是，我无法弄清楚需要做什么才能使它每次都能正常工作.就像我说的那样，它确实是第一次工作，但之后却没有.
If I move the LinkButtonPreview outside of the update panel, it works fine every time. I need to have this linkbutton inside of the update panel, but need it to work every time using the SignalR. I know it has something to do with the update panel and the way it handles the postback. However, I can not figure out what I need to do in order to get this to work correctly every time. Like I said, it does work the first time, but after that it does not.
推荐答案
您怀疑，问题与更新面板有关.您正在向#LinkButtonPreview按钮添加一个单击事件处理程序，但是该按钮元素仅在更新面板刷新之前存在.当更新面板更新时，将创建一个具有相同ID的新按钮，但没有附加到旧按钮上的事件处理程序.
As you suspected, the issue is related to the update panel. You're adding a click event handler to the #LinkButtonPreview button, but that button element only exists until the update panel refreshes. When the update panel updates, a new button is created with the same id but without the event handler that was attached to the old button.
解决方案是将click事件处理程序附加到永远不会更新/替换的元素上，因此永远不会删除该事件处理程序.您仍然可以让事件处理程序仅使用 .on( ):
The solution is to attach your click event handler to an element that is never going to be updated/replaced so the event handler isn't ever removed. You can still have the event handler only respond #LinkButtonPreview clicks without attaching the event to #LinkButtonPreview directly using .on():
$(document).on("click", "#LinkButtonPreview", function(){
RPT.server.openReport();
});
由于document是#LinkButtonPreview的祖先元素，因此源自#LinkButtonPreview的click事件将一直冒泡直至document.如果未将#LinkButtonPreview指定为.on()的第二个参数，则事件处理程序将通过在页面上的任何单击来触发.
Since document is an ancestor element of #LinkButtonPreview, the click event originating from #LinkButtonPreview will bubble up all the way up to document. If you don't specify #LinkButtonPreview as the second argument to .on(), the event handler will be triggered by any click on the page.
对于#LinkButtonCancelPROGRESSXD，您还应该以相同的方式附加click事件处理程序.
You should also attach your click event handler the same way for #LinkButtonCancelPROGRESSXD.
这篇关于SignalR更新面板仅在第一次工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
