在 ASP.NET 中部分回发后连接 JavaScript 处理程序
我正在尝试将 LinkButtons 与 UpdatePanel 中 ASP.NET 面板的 DefaultButton 属性一起使用。我已阅读并使用了有关描述单击事件的接线的各种其他答案，以便不完成完整回发而不是部分回发。当页面加载时，我连接 LinkButton 的 .click 函数，以便 ASP.NET 面板的 DefaultButton 属性能够工作。
这一切都工作正常，直到您将 UpdatePanel 添加到其中。对于 UpdatePanel，如果存在部分回发，则在部分回发中不会调用连接 .click 函数的脚本，并且按 Enter 键将恢复为导致表单的完整提交，而不是触发 LinkButton。
如何在部分回发后执行 javascript 以重新连接 LinkButton 的 .click 函数？
我制作了一个显示问题的示例页面。有两个警报显示 1) 当调用 .click 函数的代码时，以及 2) 当 .click 函数被调用时（仅当您在连接事件后在文本框中按 Enter 键时才会发生这种情况） ）。要测试此代码，请在文本框中键入内容并按 Enter 键。文本将被复制到标签控件，但不会显示“连接事件单击”警报。添加另一个字母，再次按 Enter 键，您将获得完整的回发，而无需将文本复制到标签控件（因为未调用 LinkButton）。因为那是一次完整的回发，所以将再次调用 Wiring Up Event Click 事件，并且表单下次将再次正常工作。
这是通过 ASP.NET 3.5 完成的。
测试用例代码：
<%@ 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>
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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我最终找到了解决方案 - 我应该使用
ScriptManager.RegisterStartupScript而不是Page.ClientScript.RegisterStartupScript- 这在UpdatePanel内部工作代码>s。I found the solution to this in the end - I should've been using
ScriptManager.RegisterStartupScriptinstead ofPage.ClientScript.RegisterStartupScript- this works insideUpdatePanels.