55

次のようなボタンがあります。

<asp:Button ID="pagerLeftButton" runat="server" OnClientClick="disable(this)" onclick="pager_Left_Click" Text="<" />

そのようにボタンを使用すると、onclick が起動しません。OnClientClick を削除すると、onclick が起動します。

私がする必要があるのは、ポストバック中にボタンを無効にし、ポストバックが終了した後に有効にすることです。

編集：追加情報：

発火関数にブレークポイントを追加したのは c# の部分であり、デバッグ中ですが、確かに発火していません。それらの機能は

protected void pager_Left_Click(object sender, EventArgs e)
{
//Do smthing.
}
protected void pager_Right_Click(object sender, EventArgs e)
{
//Do smthing.
}

ボタンをクリックすると、1〜2秒間無効になり、自動的に有効になりますが、なぜ有効になっているのかわかりません。再度有効にするための部分は追加しませんでした。

4

7 に答える 7

102

web.archive.org のこの記事から:

秘訣は、ボタン コントロールの OnClientClick プロパティと UseSubmitBehavior プロパティを使用することです。サーバー側のコードを使用して属性を追加する方法は他にもありますが、この方法の単純さははるかに魅力的だと思います。

<asp:Button runat="server" ID="BtnSubmit"  OnClientClick="this.disabled = true; this.value = 'Submitting...';"   UseSubmitBehavior="false"  OnClick="BtnSubmit_Click"  Text="Submit Me!" />

OnClientClick を使用すると、クライアント側の OnClick スクリプトを追加できます。この場合、JavaScript はボタン要素を無効にし、そのテキスト値を進行状況メッセージに変更します。ポストバックが完了すると、新しくレンダリングされたページは、追加の作業なしでボタンを初期状態に戻します。

クライアント側で送信ボタンを無効にすると、ブラウザーの送信がキャンセルされ、ポストバックがキャンセルされるという落とし穴があります。UseSubmitBehavior プロパティを false に設定すると、ブラウザーのフォーム送信動作に依存するのではなく、ポストバックを起動するために必要なクライアント スクリプトを挿入するように .NET に指示します。この場合、挿入されるコードは次のようになります。

__doPostBack('BtnSubmit','')

これが OnClientClick コードの最後に追加され、レンダリングされた HTML が得られます。

<input type="button" name="BtnSubmit"  onclick="this.disabled = true; this.value ='Submitting...';__doPostBack('BtnSubmit','')"  value="Submit Me!" id="BtnSubmit" />

これにより、ポストバックが完了するまでの間、素敵なボタンの無効化効果とテキストの処理が行われます。

于 2010-01-28T14:26:20.703 に答える
14

OnClientClick は、OnClick と一緒に使用すると非常にうるさいようです。

次のユースケースで失敗しました：

OnClientClick="return ValidateSearch();" 
OnClientClick="if(ValidateSearch()) return true;"
OnClientClick="ValidateSearch();"

しかし、それらは機能しませんでした。以下が機能しました：

<asp:Button ID="keywordSearch" runat="server" Text="Search" TabIndex="1" 
  OnClick="keywordSearch_Click" 
  OnClientClick="if (!ValidateSearch()) { return false;};" />
于 2012-06-19T17:03:25.817 に答える
6

Vinay（上記）は効果的な回避策を提供しました。 OnClientClickイベント関数に続いてボタンのOnClickイベントが実際に機能しない原因は、ボタンが無効になると（OnClientClickイベントによって呼び出される関数で）、ボタンが完了しようとしないことでこれを「尊重」するようにMSが定義したことです。 OnClickイベントの定義されたメソッドを呼び出すことによるボタンのアクティビティ。

私はこれを理解しようとして数時間苦労しました。（OnClientClick関数内にある）送信ボタンを無効にするステートメントを削除すると、OnClickメソッドが問題なく呼び出されました。

Microsoftは、聞いている場合、ボタンがクリックされると、このアクティビティの途中で無効にされていても、割り当てられたアクティビティを完了する必要があります。クリック時に無効にされていない限り、割り当てられたすべてのメソッドを完了する必要があります。

于 2011-12-22T15:45:26.453 に答える
6

ここには 2 つの問題があります。

クライアント側のボタンを無効にすると、ポストバックが防止されます

これを克服するには、JavaScriptイベントの後にボタンを無効にします。onclickこれを行う簡単な方法は、この回答setTimeoutで提案されているように使用することです。

また、OnClientClickASP.NET の検証が失敗した場合でもコードが実行されるため、Page_IsValid. これにより、検証が失敗した場合にボタンが無効にならないことが保証されます。

OnClientClick="(function(button) { setTimeout(function () { if (Page_IsValid) button.disabled = true; }, 0); })(this);"

質問が示すように、この JavaScript コードをすべて独自の関数に入れる方が適切です。

OnClientClick="disable(this);"

function disable(button) {
    setTimeout(function () {
        if (Page_IsValid)
            button.disabled = true;
    }, 0);
}

クライアント側でボタンを無効にしても、サーバー側では無効になりません

これを克服するには、サーバー側のボタンを無効にします。たとえば、OnClickイベント ハンドラーでは次のようになります。

OnClick="Button1_Click"

protected void Button1_Click(object sender, EventArgs e)
{
    ((Button)sender).Enabled = false;
}

最後に、重複したボタンの押下を防止しても、2 人の異なるユーザーが同じデータを同時に送信することは防止できないことに注意してください。サーバー側でそれを考慮してください。

于 2013-05-29T04:11:09.873 に答える
2

ボタンをすぐに無効に設定せずに、setTimeout を介してそれを遅らせたらどうなるでしょうか。「無効化」機能が戻り、送信が続行されます。

于 2010-01-28T14:27:14.520 に答える
1

このページで実行されている他のスクリプトがすべてを破壊する可能性がある場合を除き、JavaScript は問題ありません。Firebugを使用してこれを確認できます。

少しテストしましたが、ASP.net は無効なコントロールを無視しているようです。基本的にはポストバックが発行されますが、おそらくフレームワークはそのようなイベントを無視します。これは、無効化されたボタンがポストバックを発生させることができないと「想定」し、添付されている可能性のあるハンドラーを無視するためです。これは私の個人的な推論にすぎません。Reflector を使用して、これをより詳細に確認できます。

解決策として、後で無効にすることを実際に試みることができます。基本的にはcontrol.disabled = "disabled"、JavaTimer またはその他の機能を使用して呼び出しを遅らせます。このようにして、JavaScript 関数によってコントロールが無効にされる前に、まずサーバーへのポストバックが発行されます。これをテストしませんでしたが、動作する可能性があります

于 2010-01-28T14:49:26.387 に答える
0

関数 UpdateClick(btn) {

    for (i = 0; i < Page_Validators.length; i++) {

        ValidatorValidate(Page_Validators[i]);

        if (Page_Validators[i].isvalid == false)

            return false;
    }

    btn.disabled = 'false';

    btn.value = 'Please Wait...';

    return true;
}
于 2015-04-02T09:43:59.893 に答える