Prevent a LinkButton double click inside an UpdatePanel
I have a LinkButton inside an UpdatePanel that I do not want the client to click more than once before the UpdatePanel refreshes its contents. Right now the link button initiates a partial postback for every client side click until the update panel has time to refresh. This particular link fires off a very expensive 开发者_开发百科process which I'd rather not have run unnecessarily. Is there a .NET standard way of doing this? Whats a good solution for this? Thanks.
Use an UpdatePanelAnimationExtender. Can be used to create a nice experience and prevent further interaction until the update panel has finished. Combine this with DGH's server side boolean to prevent a user from refreshing the page and submitting again (store the boolean in Session State).
More information about the UpdatePanelAnimationExtender can be found here:
https://github.com/DevExpress/AjaxControlToolkit/wiki/UpdatePanelAnimation
One basic method is to record the time when the last click occurred in a server-side or session variable. On each click, check against the last click time. If the interval is too small, return without starting the rest of the process.
Another method is to set a boolean such as 'active' to true at the start of the method and back to false at the end. At the start of the method, check the current state of that variable and act accordingly.
The primary difference between these two methods is that the first will allow multiple instances of the method to be running at the same time so long as they are staggered by a long enough interval. The second method will always kill or block any new instances of the method until the current one ends.
I would drop an enabled=false on it until the partial postback finishes and then remove the enabled=false attribute.
Try something like this on Page_Load so it will be disabled the first time.
button.Attributes.Add("onclick",
"this.disabled = true;"
+ this.ClientScript.GetPostBackEventReference(button, String.Empty) + ";");
then re-enable it at the end of the partial postback?
None of the above solutions worked for me.
What I've done is:
function InitializeRequest(sender, args) {
var oSender = args._postBackElement;
if (oSender.id == "btnSave") {
oSender.href = "javascript: void(0);";
}
}
function EndRequestHandler(sender, args) {
var oSender = sender._postBackSettings.sourceElement;
if (oSender.id == "btnSave") {
oSender.href = "__doPostBack('" + oSender.id + "', '');";
}
}
function load() {
Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(InitializeRequest);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
}
<body onload="load()">
Put the following script on the page after the ScriptManager.
<script type="text/javascript">
var postbackControl = null;
var parm = Sys.WebForms.PageRequestManager.getInstance();
parm.add_beginRequest(BeginRequestHandler);
parm.add_endRequest(EndRequestHandler);
function BeginRequestHandler(sender, args)
{
postbackControl = args.get_postBackElement();
postbackControl.disabled = true;
}
function EndRequestHandler(sender, args)
{
postbackControl.disabled = false;
postbackControl = null;
}
</script>
加载中,请稍侯......
精彩评论