Question

我有一个基本的div我想要.toggle（）OnClientClick的一个asp：按钮。它可以工作到代码，但我认为服务器端的OnClick事件处理程序导致div在单击后重置。基本上发生的是div消失大约0.01毫秒然后立即重新出现。这是我问题的最简单的代码示例。

以下是发生的事情的一个例子：

Default.aspx的：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication2.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Testing</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script type="text/javascript">
        function ToggleMe() {
            $('#toggleMe').toggle();
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div id="toggleMe">
            <label>Hello World</label>
        </div>
        <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" OnClientClick="ToggleMe();"/>
    </form>
</body>
</html>

Default.aspx.cs

using System;

namespace WebApplication2
{
    public partial class Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void Button1_Click(object sender, EventArgs e)
        {
            int i = 5;
        }
    }
}

我已经尝试过.removeClass，.addClass，.css ...我不认为这与我使用的jQuery有同样的问题，因为它与按钮点击时发生的回发一样。

如果重要的话，我正在运行Chrome来测试它。

提前感谢您的时间和帮助！

Answer 1

HTML的javascript部分在用户的浏览器中执行。受保护的void button1_click方法在服务器上执行。发生的事情是用户的浏览器将正确切换div，导致它消失。不幸的是，ASP.NET按钮的HTML将重新提交页面，这意味着浏览器会刷新服务器中的HTML。服务器没有发生切换的概念，因为javascript没有在那里执行，并且当int i设置为5时，div会在页面刷新后重新设置为可见，然后转到服务器。您的选择是：

1）不要使用任何服务器端逻辑进行按钮点击，并摆脱

<asp:Button ID="Button1" ... />

并将其替换为

<input type="button" onclick="ToggleMe();">your text</input>

并在您的javascript中处理所有客户端逻辑。如果需要在服务器上设置int i = 5，请使用JQuery.Ajax与服务器通话。

2）仅使用服务器端.NET来执行此操作。这是这样实现的：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Testing</title>
</head>
<body>
    <form id="form1" runat="server">
        <div id="toggleMe" runat="server">
            <label>Hello World</label>
        </div>
        <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
    </form>
</body>
</html>

和

protected void Button1_Click(object sender, EventArgs e)
{
    int i = 5;
    toggleMe.Visible = !toggleMe.Visible;
}

Answer 2

当你点击aspx：按钮时，它会提交页面。如果你使用常规的html按钮

，会容易得多

<input type="button" onclick="ToggleMe()">Button</input>

请添加“返回false”;声明下面的代码

function ToggleMe() {
   $('#toggleMe').toggle();
   return false;
}

Answer 3

我明白了。感谢所有花时间帮助我的人。

答案就在这个链接上：

How to force close jQuery UI accordion <DIV> with <asp:button>?

.toggle（）一个带有asp：按钮的div

3 个答案: