Question

我的概念是当我点击一个ASP.Net按钮然后它在服务器上运行并刷新页面。所以我们使用jQuery在客户端运行ASP.Net控件。

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default4.aspx.cs" Inherits="Default4" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#Button1").click(function () {
                    var a = $("#TextBox1").val();
                    if (a > 5)
                        $("#mydiv").text(a + ' is greater then 5')
                });
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                <asp:Button ID="Button1" runat="server" Text="Button" />
                <div id="mydiv"></div>
            </div>
        </form>
    </body>
</html>

它工作正常，但此代码生成的消息$("#mydiv").text(a + ' is greater then 5')未在页面中保留，因为页面已刷新。

我的问题是，尽管jQuery调用按钮点击，为什么我的页面会刷新，为什么消息不会留在页面中？

Answer 1

原因在于您当前的代码是为按钮单击事件添加了一个新的处理程序，但是没有阻止asp.net框架的默认处理程序，默认处理程序将创建一个回发，因此可以在服务器端。

这里有一些选项，第一个是如果你不需要处理click事件服务器端（代码隐藏），考虑使用一个简单的输入元素：

<input type="button" value="Button" id="Button1" />

如果您确实需要使用服务器控件，可以通过执行以下操作来停止按钮引发回发：

<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="return false;" />

或者更好的是你可以使用onclientclick属性调用你的客户端函数而不用jquery点击绑定这样的东西：

<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="return doSomeStuff();" />

使用以下javascript代码：

function doSomeStuff(){
  var a = $("#TextBox1").val();
  if (a > 5)
    $("#mydiv").text(a + ' is greater then 5')
  return false; //needed to stop the postback
}

尽管通过jquery调用asp.net按钮单击事件，为什么我的页面刷新（发布到服务器）

1 个答案: