2

簡単な問題があります。ASP.NET コントロール ボタンがあり、それをフェードアウトさせてから、JQuery を使用して何らかの関数 (アラートなど) を呼び出したいと考えています。これが私がこれまでに持っているものです：

ボタンの ASP コード:

<div id="begin">
        <span id="startButtonSpan">
            <asp:Button ID="startButton" class="startButton" runat="server" Text="Click Me!" OnClientClick="startButtonClick()"/>
        </span>
    </div>

JavaScript:

function startButtonClick()
{
    $("#startButtonSpan > input").fadeOut(500, callAlert());
}

function callAlert()
{
    alert("Made it here...");
}

ボタンをクリックすると、アラートが表示されますが、ページはフェードアウトを実行しようとしているようにも見えません。アラートを閉じると、ボタンはまだそこにあり、私を見つめています。

ボタンをフェードアウトするという意図した目標を達成する方法について、誰かが間違いを見ることができますか、または提案がありますか? フェードアウトは、jQuery を使用して ASP コントロールを操作できるかどうかをテストするための方法にすぎません。単純なフェードアウトだけでなく、その方法を学ぼうとしています。

以下のコードを使用して、もう少し単純な jQuery 呼び出しを試みましたが、どちらも機能していないようです。

ASP 部分:

<div id="begin">
        <span id="startButtonSpan">
            <asp:Button ID="startButton" class="startButton" runat="server" Text="Click Me!" OnClientClick="startButtonClick()"/>
        </span>
    </div>

    <div id="jQueryTest" style="display:none;">
        Block for testing jQuery.
        <h1 id="testMessage">Child element for the ASP div.</h1>
    </div>

Javascript 部分:

function startButtonClick()
{
    $("#jQueryTest").css("display", "block");
    $("#jQueryTest").show();
}

この例では、テキストは表示されますが、すぐに再び消えます。

私が間違っているかもしれないことについての助けや提案は大歓迎です。

4

4 に答える 4

3

$('.startButton')ASP.Net コントロールは、ページとコントロールの情報を追加してレンダリングするときに ID を動的に変更するため、ID の代わりにクラスをセレクターとして使用します。

$(".startButton").fadeOut(500, callAlert);

または、ID の使用に固執する場合は、セレクターを処理する別の方法を次に示します。

$("#<%=startButton.ClientID %>")

または、Jacob が彼の回答で示唆したように、可能ですがClientIDMode="Static"、これはアプリケーションが .Net 4.0 以上の場合にのみ機能します。

また、CssClass代わりに使用しますclass

<asp:Button ID="startButton" Csslass="startButton" runat="server" Text="Click Me!" />
于 2013-10-23T19:57:00.150 に答える
1

最初の例には 2 つの問題があります。

1.あなたは書くべきです

$("#startButton").fadeOut(500, callAlert);

そしてそうではない

$("#startButton").fadeOut(500, callAlert());


2. ASP.NET の場合、ClientIDMode="Static" を設定する必要があります。そうしないと、asp.net によって ID が変更されます。

<asp:Button ID="startButton" ClientIDMode="Static" ... OnClientClick="startButtonClick()"/>
于 2013-10-23T19:58:15.120 に答える
0

できれば、MasterPages$("#<%= SomeContentControl.ClientID %>")を使用していて、Content コントロールを操作するときに常に使用できるとは限らないことに気付いた人のために、別の回答を提供したいと思います。

私がすることは、次のInit()ようにMasterPage IDを設定することです:

protected void Page_Init( object sender, EventArgs e ) 
{
    // this must be done in Page_Init or the controls 
    // will still use "ctl00_xxx", instead of "Mstr_xxx"

    this.ID = "Mstr"; 
}

次に、jQuery で次のようなことができます。

var masterId = "Mstr",
    $startButton = getContentControl("startButton"),
    $message = $("#jQueryTest");

function getContentControl( ctrlId )
{
    return $("#" + masterId + "_" + ctrlId);
}

function hideStartButton()
{
    $startButton
        .stop(true, true)
        .fadeOut("slow", showMessage);
}

function showMessage()
{
    $message
        .stop(true, true)
        .fadeIn("slow");
}

$startButton.on("click",  hideStartButton);

ASP.NET がレンダリングしたかのように、プレフィックスが既に挿入されているjsFiddleを次に示します。Mstr_

于 2013-10-23T20:33:48.270 に答える
0

あなたのコードは問題ありませんが (ここでの他の回答を考慮する必要があります)、ボタンがサーバーにポストバックされており、単にブラウザーがフェード効果をレンダリングするのに十分な時間がないという事実はどうですか。

これをテストするreturn false;には、OnClientClickプロパティに a を追加します。もちろん、これによりサーバーでのアクションがキャンセルされますが、フェード効果が得られます。

 <asp: Button ... OnClientClick="startButtonClick();return false;"></asp:Button>

これを回避してリクエストを送信するには__doPostBack、JavaScript で ASP.NET メソッドを使用してみてください。

ASP.NET:

<asp:Button ID="startButton" class="startButton" runat="server" Text="Click Me!" OnClientClick="startButtonClick(this);return false;"/>

JavaScript:

function startButtonClick(button)
{
    $("#startButtonSpan > input").fadeOut(500, function(){__doPostBack(button.name, "")});
}

この__doPostBackメソッドは 2 つの引数を取ります。ポストバックを実行しているコントロールの名前と、サーバーで詳細情報を送信するために使用できるポストバック引数です。の場合asp:Button、ボタンの名前は問題なくリクエストを送信するのに十分なはずです。

この手法を使用すると、クライアントでボタンをフェードさせ、サーバーでアクションをトリガーすることもできます。この正確なコードが機能することを保証することはできません (現在、開発環境にアクセスできません) が、アイデアは得られるはずです。

于 2013-10-23T20:47:20.157 に答える