0

asp:button の .toggle() OnClientClick にしたい基本的な div があります。コードに関する限りは機能しますが、サーバー側の OnClick イベントハンドラーが原因で、クリック後に div がリセットされていると思います。基本的には、div が約 0.01ms の間消えて、すぐに再び表示されます。これが私の問題の最も簡単なコード例です。

何が起こるかの例を次に示します。

デフォルト.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を実行しています。

お時間をいただきありがとうございます。

4

2 に答える 2

4

HTML の JavaScript 部分がユーザーのブラウザで実行されます。protected void button1_click メソッドはサーバー上で実行されます。何が起こっているかというと、ユーザーのブラウザーが div を正しく切り替えて、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 に答える