Asp.net - Prevent consecutive button clicks

Asked

Viewed 958 times

3

Good afternoon.

I have an Asp.net webform application, and am having the following problem.

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

However, when it does this, every click it gives is called the event contained in the button click, and it is a time consuming event, with database query and various indexes.

I was wondering if you had a way to stop that from happening. From the customer to be able to click several times fast until you get to the edit 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 very much.

c# asp.net

  • Using an Updatepanel to update the content?

2 answers

1


You can disable the btnProximaEdicao button at 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 the btnProximaEdicao when the AJAX request starts, and activates it again when it ends, use the following script:

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
}

  • I tried to give a disabled, but when I did that, it didn’t run the click event. Just called the JS and stopped at it... I’ll try it this way, with pageRequestManager to see if anything changes. But would there be any solution to prevent the error but allow the customer to give several clicks? A way to only call AJAX if the client does not click for 3 seconds, for example?

  • Well, I took the test and it came to nothing. I may have done something wrong?

  • Try instead of disabling the button, just set a local variable and test it on onclick.

  • Thank you, but I don’t understand what you mean...

  • The suggestion given has no effect, because after the post, the variable remains marked as true. How do I know the page has been updated and reset the variable?

0

I managed to solve the problem, thank you very much.

At the end of the day, the first suggestion was the basis for me to resolve, it just wasn’t working because it was putting in the wrong place.

I just couldn’t lock the button because it stops working, but I used the variable to indicate that I already clicked, so on the back of the zero post the variable.

Browser other questions tagged c# asp.net

You are not signed in. Login or sign up in order to post.