asp.net - asp.net/javascriptでボタンを確認してから無効にするにはどうすればよいですか

Question

[削除] ボタンがある標準の ASP.NET 2.0 Web ページがあります。ユーザーが削除ボタンを押すと、ユーザーに「よろしいですか?」と尋ねる確認ダイアログがポップアップ表示されます。ユーザーが「はい」と答えた場合は、削除ボタンを無効にして、サーバー側コード deleteButton_Click を実行するポストバックを実行します。

タグは次のとおりです。

<asp:Button ID="deleteButton" Text="Delete" OnClick="deleteButton_Click" runat="server" />

クライアント側のクリックを処理するための JavaScript (jquery) は次のとおりです。

var deleteButton = $(input.eq(0));
deleteButton.click( function()
{
    var a = confirm( "Are you sure you want to delete this item?" );
    if ( a == false )
    {
        return false;
    }
    else
    {
        deleteButton.attr( "disabled", "disabled" );
        __doPostBack( deleteButton.attr( "id" ), "" );
    }
} );

確認ダイアログは期待どおりに機能し、無効化も正常に機能します。フォームは正常にポストバックしますが、deleteButton_Click イベントハンドラーを実行しません。__doPostBack JavaScript コードがページに存在します。

UseSubmitBehavior="false" を deleteButton タグに追加できますが、確認ダイアログの回答が無視されます。

ですから、ここで ASP.NET に多くを求めすぎているのかもしれません。これを機能させる方法はありますか？

ありがとう、

クレイグ

score 2 · Accepted Answer

btnSubmit.Attributes.Add("onclick", "if(confirm(\"Are you sure you want to delete this item?\" ){this.disabled=true;" + ClientScript.GetPostBackEventReference(btnSubmit, "").ToString() + "}else{return false;}");

score 1 · Accepted Answer

この StackOverflow question を見てください。非常に役立つことがわかりました。

フォーム送信時にボタンを無効にする

確認ロジックを追加します...そして設定する必要があります...

私は頭を悩ませ、あなたと私のために拡張メソッドを書きました:)

public static void ConfirmThenDisableButtonOnClick(this Button buttonControl, string confirmMessage, string clientFunction)
{
    StringBuilder sb = new StringBuilder();

    // If the page has ASP.NET validators on it, this code ensures the
    // page validates before continuing.
    if (buttonControl.CausesValidation && !String.IsNullOrEmpty(buttonControl.ValidationGroup))
    {
        sb.Append("if ( typeof( Page_ClientValidate ) == 'function' ) { ");
        sb.AppendFormat(@"if ( ! Page_ClientValidate('{0}') ) {{ return false; }} }} ", buttonControl.ValidationGroup);
    }

    //pop confirm, if confirm==true, disable button
    sb.AppendFormat("if(confirm('{0}\')){{this.disabled=true;", confirmMessage.Replace("\"","").Replace("'",""));

    // If a secondary JavaScript function has been provided, and if it can be found,
    // call it. Note the name of the JavaScript function to call should be passed without
    // parens.
    if (!String.IsNullOrEmpty(clientFunction))
    {
        sb.AppendFormat("if ( typeof( {0} ) == 'function' ) {{ {0}() }};", clientFunction);
    }

    // GetPostBackEventReference() obtains a reference to a client-side script function 
    // that causes the server to post back to the page (ie this causes the server-side part 
    // of the "click" to be performed).
    sb.Append(buttonControl.Page.ClientScript.GetPostBackEventReference(buttonControl, ""));

    // if confirm==false do nothing
    sb.Append(";}else{return false;}");

    // Add the JavaScript created a code to be executed when the button is clicked.
    buttonControl.Attributes.Add("onclick", sb.ToString());
}

検証チェックも追加しました:)

score 0 · Accepted Answer

おそらく、deleteButton_Click イベントでサーバー側のボタンを無効にする必要があります (ポストバックを行うため、ページを再作成するため)。

<asp:Button ID="deleteButton" Text="Delete" OnClick="deleteButton_Click" runat="server" OnClientClick="javascript:return confirm('are you sure blah blah blah ...')" />

コードビハインドでは次のようになります。

private void deleteButton_Click(object sender, EventArgs e) {
    deleteButton.Enabled = false;
    // and the rest of event handling ...
}

score 0 · Accepted Answer

$(":submit").click(function ()
{
    $(this).attr("disabled", true); // disable input

    if (confirm("Press OK to submit"))
    {
        __doPostBack(this.id, ""); // if user presses OK; submit
    }
    else
    {
        // If user presses cancel; enable input and stop submit
        $(this).attr("disabled", false);

        return false;
    }
});

score 0 · Accepted Answer

0

Javascript:

deleteButton.disabled = true;

C#:

deleteButton.Enabled = false;

于 2009-06-26T14:07:58.813 に答える

score 0 · Accepted Answer

クリックイベントが発生しないのは少し奇妙です。ボタンが無効になっていることが原因だと推測していましたが、通常はクライアントだけでなくサーバーでボタンが無効になっている場合にのみ発生します。Page_Load 関数の理想的なソリューションではありませんが、ポストバックや非同期ポストバックを確認し、ポストバックのターゲット (この場合はボタン) を決定し、そこから何らかのメソッドを呼び出すことができます。__doPostBack() 関数を使用して引数を渡すこともできます。

score 0 · Accepted Answer

これを任意のボタンから呼び出すことができる JS 関数にすることにしました。

動作するサンプルを次に示しますが、JavaScript を既存の .js ファイルや head タグなどの別の場所に移動します。

<script>
    function confirmPostback(button) {
        if (confirm('Are you sure?')) {
            button.disabled = true;
            __doPostBack(button.name, '')
            return true;
        } else {
            return false;
        }
    }
</script>

<asp:Button ID="TestPostback" runat="server" Text="Test Postback"
        UseSubmitBehavior="false" OnClientClick="return confirmPostback(this)" />

score 0 · Accepted Answer

最初は、クライアント側のクリックイベントについて話しているのか、サーバー側のクリックイベントについて話しているのかわかりませんでした。サーバー側のクリックイベントが発生していないことを明示的に示す必要があると思います。

とにかく、ASPX ページで <%@ Page EnableEventValidation="false" %> を試して、動作するかどうかを確認してください (デフォルトでは true に設定されています)。この属性の機能の詳細は覚えていませんが、この機能により、サーバー側のイベントが正当な場合にのみ発生するようになります。たとえば、ページに XSS 脆弱性があり、ハッカーが JavaScript を挿入して削除ボタンを呼び出したとします。この属性は、これらの攻撃を防ぐのに役立ちます。

asp.net - asp.net/javascriptでボタンを確認してから無効にするにはどうすればよいですか

10 に答える 10

Related

Reference