Как я могу подтвердить, а затем отключить кнопку в 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. На странице существует код JavaScript __doPostBack.

Я мог бы добавить UseSubmitBehavior = "false" к тегу deleteButton, но тогда он проигнорировал бы ответ диалога подтверждения.

Так что, может быть, я слишком много спрашиваю об ASP.NET здесь. Есть идеи, как сделать эту работу?

Спасибо

Craig

Answer 1

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 2

Вместо того, чтобы делать обратную передачу через javascript, вы можете использовать OnClientClick, чтобы выполнить то же самое.

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

Или, если вы хотите выполнить больше действий с помощью JavaScript, чем просто отключить кнопку, вы можете сказать что-то вроде этого:

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

Вам просто нужно убедиться, что вы формулируете его в форме оператора возврата, чтобы, когда вы не хотите, чтобы функция ASP выполнялась, оператор в конечном итоге скажет "вернуть ложь;".

Answer 3

Спасибо за отзыв, но это было довольно простое решение.

Строка javascript должна быть:

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

вместо:

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

Я не осознавал, что атрибут "name" - это тот, который искал метод doPostBack.

Answer 4

Взгляните на этот вопрос 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 5

Я решил сделать эту функцию 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)" />

Answer 6

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

Изначально я не был уверен, говорили ли вы о событии щелчка на стороне клиента ИЛИ событии щелчка на стороне сервера. Я думаю, что вы должны явно указать, что событие щелчка на стороне сервера не запускается.

В любом случае, попробуйте <% @ Page EnableEventValidation = "false"%> на странице ASPX и посмотрите, работает ли он (по умолчанию установлено значение true). Я не помню, как работает этот атрибут, но эта функция обеспечивает запуск события на стороне сервера только в законных случаях. Например. допустим, на вашей странице была уязвимость XSS и хакер вставил JavaScript для вызова кнопки удаления. Этот атрибут помогает предотвратить эти атаки.

Answer 8

Немного странно, что событие click не срабатывает. Я бы предположил, что это произошло из-за того, что кнопка отключена, но обычно это происходит только тогда, когда кнопка отключена на сервере, а не только на клиенте. Хотя это и не идеальное решение в вашей функции Page_Load, вы можете проверить наличие обратной передачи и / или асинхронной обратной передачи и определить цель обратной передачи (в данном случае это ваша кнопка), а затем вызвать некоторый метод оттуда. Вы также можете передать аргументы, используя функцию __doPostBack ().

Answer 9

Вам, вероятно, следует отключить кнопку на стороне сервера в событии 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 10

Javascript:

deleteButton.disabled = true;

C #:

deleteButton.Enabled = false;