Wiring up JavaScript handlers after a Partial Postback in ASP.NET
- by Richard
I am trying to use LinkButtons with the DefaultButton property of the ASP.NET Panel in an UpdatePanel. I have read and used the various other answers that are around describing the wiring up of the click event so that a full postback is not done instead of a partial postback. When the page loads, I wire up the .click function of the LinkButton so that the DefaultButton property of the ASP.NET panel will work.
This all works fine, until you bring an UpdatePanel into the mix. With an UpdatePanel, if there is a partial postback, the script to wire up the .click function is not called in the partial postback, and hitting enter reverts to causing a full submit of the form rather than triggering the LinkButton.
How can I cause javascript to be executed after a partial postback to re-wire up the .click function of the LinkButton?
I have produced a sample page which shows the problem. There are two alerts showing 1) When the code to hook up the .click function is being called, and 2) When the .click function has been called (this only happens when you hit enter in the textbox after the event has been wired up). To test this code, type something in the textbox and hit Enter. The text will be copied to the label control, but "Wiring up Event Click" alert will not be shown. Add another letter, hit enter again, and you'll get a full postback without the text being copied to the label control (as the LinkButton wasn't called). Because that was a full postback, the Wiring Up Event Click event will be called again, and the form will work properly the next time again.
This is being done with ASP.NET 3.5.
Test Case Code:
<%@ Page Language="C#" Inherits="System.Web.UI.Page" Theme="" EnableTheming="false" AutoEventWireup="true" %>
<script runat="server">
void cmdComplete_Click(object sender, EventArgs e)
{
lblOutput.Text = "Complete Pressed: " + txtInput.Text;
}
void cmdFirstButton_Click(object sender, EventArgs e)
{
lblOutput.Text = "First Button Pressed";
}
protected override void OnLoad(EventArgs e)
{
HookupButton(cmdComplete);
}
void HookupButton(LinkButton button)
{
// Use the click event of the LinkButton to trigger the postback (this is used by the .click code below)
button.OnClientClick = Page.ClientScript.GetPostBackEventReference(button, String.Empty);
// Wire up the .click event of the button to call the onclick function, and prevent a form submit
string clickString = string.Format(@"
alert('Wiring up click event');
document.getElementById('{0}').click = function() {{
alert('Default button pressed');
document.getElementById('{0}').onclick();
}};", button.ClientID, Page.ClientScript.GetPostBackEventReference(button, ""));
Page.ClientScript.RegisterStartupScript(button.GetType(), "click_hookup_" + button.ClientID, clickString, true);
}
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>DefaultButton/LinkButton Testing</title>
<style type="text/css">
a.Button { line-height: 2em; padding: 5px; border: solid 1px #CCC; background-color: #EEE; }
</style>
</head>
<body>
<h1>
DefaultButton/LinkButton Testing</h1>
<form runat="server">
<asp:ScriptManager runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div style="position: relative">
<fieldset>
<legend>Output</legend>
<asp:Label runat="server" ID="lblOutput" />
</fieldset>
<asp:Button runat="server" Text="First Button" ID="cmdFirstButton" OnClick="cmdFirstButton_Click" UseSubmitBehavior="false" />
<asp:Panel ID="Panel1" runat="server" DefaultButton="cmdComplete">
<label>
Enter Text:</label>
<asp:TextBox runat="server" ID="txtInput" />
<asp:LinkButton runat="server" CssClass="Button" ID="cmdComplete" OnClick="cmdComplete_Click" Text="Complete" />
</asp:Panel>
</div>
</ContentTemplate>
</asp:UpdatePanel>
<asp:Button runat="server" ID="cmdFullPostback" Text="Full Postback" />
</form>
</body>
</html>
