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>
