如何在asp.net/javascript中確認然后禁用按鈕

Question

我有一個標准的ASP.NET 2.0網頁，上面有一個刪除按鈕。 我需要並且無法弄清楚如何關閉是當用戶按下刪除按鈕時彈出確認對話框，詢問用戶“你確定嗎？”。 如果用戶說是，那么我想禁用刪除按鈕並執行將運行服務器端代碼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。 任何想法如何使這項工作？

謝謝，

克雷格

Answer 1

看看這個StackOverflow問題我發現它非常有用：

表單提交時禁用按鈕

添加確認邏輯......你應該設置...

我去了一個腦袋並為你寫了一個擴展方法，我也是:)

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());
}

剛剛添加了驗證檢查:)

Answer 2

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;}");

Answer 3

感謝您的反饋，但這是一個相當簡單的解決方案。

javascript行應該是：

__doPostBack( deleteButton.attr( "name" ), "" );

代替：

__doPostBack( deleteButton.attr( "id" ), "" );

我沒有意識到“name”屬性是doPostBack方法正在尋找的屬性。

Answer 4

您可以使用OnClientClick完成相同的操作，而不是通過javascript進行回發。

<asp:Button OnClientClick="if (confirm('Are you sure?')) {this.disabled = true;} else {return false;}" />

或者如果你想通過javascript執行更多操作而不是簡單地禁用按鈕，你可以這樣說：

<asp:Button OnClientClick="return DisableOnConfirm();" />

您只需要確保以return語句的形式對其進行措辭，這樣當您不希望ASP函數運行時，該語句最終會說“return false;”。

Answer 5

使用Javascript：

deleteButton.disabled = true;

C＃：

deleteButton.Enabled = false;

Answer 6

您可能應該在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 ...
}

Answer 7

點擊事件沒有觸發，這有點奇怪。 我猜想這是因為按鈕被禁用但通常只有在服務器上禁用按鈕時才會發生，而不僅僅是客戶端。 雖然不是Page_Load函數中的理想解決方案，但您可以檢查回發和/或異步回發並確定回發的目標（在本例中為其按鈕），然后從那里調用某個方法。 您還可以使用__doPostBack（）函數傳入參數。

Answer 8

最初，我不確定您是在談論客戶端點擊事件還是服務器端點擊事件。 我認為您應該明確聲明服務器端單擊事件未觸發。

無論如何，在ASPX頁面上嘗試<％@ Page EnableEventValidation =“false”％>並查看它是否有效（默認情況下設置為true）。 我不記得這個屬性的細節有效但這個功能確保只在合法的情況下才會觸發服務器端事件。 例如，假設您的頁面有XSS漏洞，黑客注入了JavaScript來調用刪除按鈕。 此屬性有助於防止這些攻擊。

Answer 9

$(":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;
    }
});

Answer 10

我決定使這個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)" />