0

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

下面是一个例子：

默认.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>

默认.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 来测试它。

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

4

2 回答 2

4

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;
}
于 2013-06-20T18:20:04.873 回答
1

当您单击 aspx:Button 时，它会提交页面。如果您使用常规的 html 按钮会容易得多

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

并请添加“return false;” 在下面的代码中声明

function ToggleMe() {
   $('#toggleMe').toggle();
   return false;
}
于 2013-06-20T18:38:03.377 回答