【问题标题】:How to call a asp:Button OnClick event using JavaScript? [duplicate]如何使用 JavaScript 调用 asp:Button OnClick 事件? [复制]
【发布时间】:2013-02-19 08:52:58
【问题描述】:

我有一个问题,我有一个如下按钮:

<asp:Button ID="savebtn" runat="server" OnClick="savebtn_Click" Visible="false" />

然后我有如下 HTML 按钮:

<button id="btnsave" onclick="fncsave">Save</button>

我有下面的javascript:

<script type="text/javascript">
     function fncsave()
     {
        document.getElementById('<%= savebtn.OnClick %>').click()
     }
</script>

我现在的问题是,如何从 HTML 按钮调用 asp:Button OnClick?我已经读过你可以通过 Id 从 JavaScript 调用来做到这一点,但它不起作用。

任何帮助将不胜感激。

谢谢

【问题讨论】:

  • 可能是骗子... @Mortalus 调用 __doPostBack 方法很酷吗?我在实践中从未这样做过。
  • 当提到 JavaScript 方法时,我不确定您所说的“酷”是什么意思 :) 但是是的,您可以使用它。如果您可以模拟实际的客户端按钮单击,则可以像其中一个更简单的答案一样单击,因为有时您可能想做部分回帖,然后我发布的问题中的答案将不起作用。

标签: javascript asp.net html .net


【解决方案1】:

设置style= "display:none;"。通过设置visible=false,它不会在浏览器中呈现按钮。因此,客户端脚本不会执行。

<asp:Button ID="savebtn" runat="server" OnClick="savebtn_Click" style="display:none" />

html 标记应该是

<button id="btnsave" onclick="fncsave()">Save</button>

将javascript更改为

<script type="text/javascript">
     function fncsave()
     {
        document.getElementById('<%= savebtn.ClientID %>').click();
     }
</script>

【讨论】:

  • 正确的点击应该是onclick="fncsave(); return false;"
  • 救命稻草。如果我使用return false;,它会阻止回发吗?
【解决方案2】:

如果你愿意使用 jQuery:

<script type="text/javascript">
 function fncsave()
 {
    $('#<%= savebtn.ClientID %>').click();
 }
</script>

此外,如果您使用 .NET 4 或更高版本,您可以创建 ClientIDMode == static 并简化代码:

<script type="text/javascript">
 function fncsave()
 {
    $("#savebtn").click();
 }
</script>

参考:MSDN Article for Control.ClientIDMode

【讨论】:

  • 我的荣幸。题。为什么不直接使用 ASP.NET 按钮?
  • 我在 jQuery 中使用了一些 CSS,而 ASP.NET 让我很难对其进行样式设置或使我的设计工作。
  • 这可能是另一篇文章的主题。 .NET 生成的 HTML 在 CSS 方面应该与“普通旧 html”控件的操作没有什么不同
  • 还有一件事,使用“静态”clientIDMode 可能会“降低”这个 CSS 难度。
  • 关于我的问题的网络问题,我已经回答了几乎所有的问题,但是您的行“此外,如果您使用的是 .NET 4 或更好的版本,您可以将 ClientIDMode == 设为静态并简化代码:“终于改变了一切!!!!
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多