c# – asp.net – Prevent consecutive button clicks

Question:

Good afternoon.

I have an ASP.NET webform application, and I am having the following problem.

In a certain part of the system, the customer has two buttons to navigate between editions of a magazine, going to previous and next. This works correctly, but sometimes the client clicks several times simultaneously until reaching the edition he wants, instead of waiting to load one by one (fair).

However, when he does this, each click is called the event contained in the click of the button, and it is a time-consuming event, with database consultation and several indexes.

I was wondering if there is a way to prevent this from happening. From the client, you can click several times quickly until you reach the edition you want, and only then call the button event.

The button:

<asp:Button ID="btnProximaEdicao" runat="server" onclick="btnProximaEdicao_Click" OnClientClick="return mudarEdicao('proxima');" Text="Próxima" Height="34px"/>

JS:

function mudarEdicao(acao) {
        if (!verificarColunas())
            return false;
        else {

            var filtro = $('select[name$="LstFiltros"]').find('option');

            $.each(filtro, function (key, value) {
                var coluna = $(value).val();
                if (coluna.indexOf('Edição') >= 0) {
                    var edicao = coluna.substr(7);
                    var proxEdicao;
                    if (acao == "anterior")
                        proxEdicao = parseInt(edicao) - 1;
                    else
                        proxEdicao = parseInt(edicao) + 1;

                    $('select[name$="LstFiltros"]').find('option[value^="Edição"]').val("Edição:" + proxEdicao);
                    $('select[name$="LstFiltros"]').find('option[value^="Edição"]').text("Edição:" + proxEdicao);
                }
            });
        }
        return true;
    }

Codebehind:

protected void btnProximaEdicao_Click(object sender, EventArgs e)
{
    for (var i = 0; i < LstFiltros.Items.Count; i++)
    {
        if (LstFiltros.Items[i].Text.Contains("Edição:"))
        {
            string edicao = LstFiltros.Items[i].Text.Substring(7);

            int proxEdicao = Convert.ToInt32(edicao) + 1;

            LstFiltros.Items.Remove(LstFiltros.Items[i].Text);

            ((List<DocumentoCamposDTO>)this.getParameter("CAMPOS_PESQUISA")).RemoveAll(p => p.TipoIndexacaoCampo.GUID.Equals(Functions.ConvertToGuid(LstGuidCampos.Items[i].Text)));

            LstFiltros.Items.Add("Edição:" + proxEdicao);

            InsereFiltrosPesquisa();
        }
    }

    preencherGridPesquisa();
}

thank you so much.

Answer:

You can disable the btnProximaEdicao button at the moment of the click;

var btnProximaEdicao = document.querySelector('[id$="btnProximaEdicao"]');

function mudarEdicao(acao) {
    if (!verificarColunas())
        return false;
    else {
        btnProximaEdicao.disabled = true; //desativando o btnProximaEdicao
        ... // o resto do escrito permanece como estava.
    }
    return true;
}

If you are using an UpdatePanel, you need to disable btnProximaEdicao when the AJAX request starts, and re-enable it when it finishes, use the following script to do this:

var btnProximaEdicao = document.querySelector('[id$="btnProximaEdicao"]');
var pageRequestManager = Sys.WebForms.PageRequestManager.getInstance();
pageRequestManager.add_initializeRequest(InitializeRequest);
pageRequestManager.add_endRequest(EndRequest);

function InitializeRequest(sender, args) {
    btnProximaEdicao.disabled = true; //desativando o btnProximaEdicao
}
function EndRequest(sender, args) {
    btnProximaEdicao.disabled = true; //ativando o btnProximaEdicao
}