Slow problems with AJAX in ASP . NET MVC C#

Question

I have a problem of slowness in my AJAX response. I use the following code to search and return a list of results:

Javascript

function enviaBusca(url) {
    var resultado = $('#resultados'),
        mensagem = $('#mensagem'),
        palavras = $('input[type=hidden][name=palavrasTemp]').val(),
        palavraChave = $('#txt_palavra_chave').val(),
        valorMinimo = $('input[type=number][name=valor_minimo]').val(),
        valorMaximo = $('input[type=number][name=valor_maximo]').val(),
        buscaPublicado = $('')
    param = { 'buscaTermo': encodeURIComponent(palavraChave), 'palavrasBuscadas': palavras, 'buscaTipoImovel': get_lista_tipos_marcados(), 'buscaEstado': get_lista_estados_marcados(), 'buscaCidade': get_lista_cidades_marcadas(), 'buscaBairro': get_lista_bairros_marcados(), 'buscaCaptador': get_lista_captadores_marcados(), 'buscaPretensao': get_lista_pretensoes_marcadas(), 'buscaFinalidade': get_lista_finalidades_marcadas(), 'buscaSituacao': get_lista_situacoes_marcadas(), 'buscaValorMinimo': valorMinimo, 'buscaValorMaximo': valorMaximo, 'buscaPublicado': get_lista_publicados_marcadas() };

    $('#loading').removeClass('invisivel');
    resultado.empty();
    mensagem.addClass('invisivel');

    $.post(url, add_anti_forgery_token(param), function (response) {
        if (response) {
            if (response.length > 0) {
                resultado.removeClass('invisivel');
                for (var i = 0; i < response.length; i++) {
                    resultado.html(response);
                }
            }
        } else {
            resultado.addClass('invisivel');
            mensagem.html('Nenhum resultado foi encontrado com os filtros selecionados.').removeClass('invisivel');
        }
        $('#loading').addClass('invisivel');
    });
}

Controller

[AllowAnonymous]
        [HttpPost]
        public ActionResult Resultados(string buscaTermo, string palavrasBuscadas, List<int> buscaTipoImovel, List<int> buscaEstado, List<int> buscaCidade, List<int> buscaBairro, List<int> buscaCaptador, List<int> buscaPretensao, List<int> buscaFinalidade, List<int> buscaSituacao, int buscaValorMinimo, int buscaValorMaximo, List<int> buscaPublicado)
         {
            var palavrasTemp = palavrasBuscadas;
            if (palavrasTemp != "")
            {
                palavrasChave.Add(palavrasTemp);
            }
            palavrasChave.Add(buscaTermo);

            if (!Request.IsAuthenticated)
            {
                buscaSituacao.Clear();
                buscaSituacao.Add(1);
                buscaPublicado.Clear();
                buscaPublicado.Add(1);
            }

            var lista = ImoveisModel.RecuperarListaBusca(palavrasChave, buscaTipoImovel, buscaEstado, buscaCidade, buscaBairro, buscaCaptador, buscaPretensao, buscaFinalidade, buscaSituacao, buscaValorMinimo, buscaValorMaximo, buscaPublicado);
            ViewBag.TermoBuscado = palavrasChave;
            ViewBag.ListaImoveis = lista;
            ViewBag.QuantidadeRegistrosEncontrados = lista.Count();
            return PartialView(lista);
        }

JSON sent

param = { 'buscaTermo': encodeURIComponent(palavraChave), 'palavrasBuscadas': palavras, 'buscaTipoImovel': get_lista_tipos_marcados(), 'buscaEstado': get_lista_estados_marcados(), 'buscaCidade': get_lista_cidades_marcadas(), 'buscaBairro': get_lista_bairros_marcados(), 'buscaCaptador': get_lista_captadores_marcados(), 'buscaPretensao': get_lista_pretensoes_marcadas(), 'buscaFinalidade': get_lista_finalidades_marcadas(), 'buscaSituacao': get_lista_situacoes_marcadas(), 'buscaValorMinimo': valorMinimo, 'buscaValorMaximo': valorMaximo, 'buscaPublicado': get_lista_publicados_marcadas() }

The query runs until fast, the time varies from 20 to 600ms depending on the amount of results obtained but the problem is the return of AJAX, it takes a few minutes to assemble the screen and hide the loading div ... What could be wrong?

Answer 1

From what I see the query does not return only a JSON, but all the HTML already properly formatted. When you said the query was fast, this includes HTML formatting, or just the query in the database?

Formatting strings the wrong way can be very costly. Strings are generally immutable, meaning that when concatenating 2 strings, the compiler needs to relocate all of the variable’s memory.

In C#, the correct way to build long strings is with the Stringbuilder object.

If you are already doing this on your server, and the slowness is all Javascript, there is not much to do, recommend you replace the

for (var i = 0; i < response.length; i++) {
    resultado.html(response);
}

for

resultado.html(response.join(''));

Answer 2

After breaking my head trying to find the problem in AJAX I stopped and thought about the obvious: what is the return? It is a list, being a list I do not need to go through the object "Answer" to build a list so I decided to remove the for and leave so:

Old code

$.post(url, add_anti_forgery_token(param), function (response) {
    if (response) {
        if (response.length > 0) {
            resultado.removeClass('invisivel');
            for (var i = 0; i < response.length; i++) {
                resultado.html(response);
            }
        }
    } else {
        resultado.addClass('invisivel');
        mensagem.html('Nenhum resultado foi encontrado com os filtros selecionados.').removeClass('invisivel');
    }
    $('#loading').addClass('invisivel');
});

New code

$.post(url, add_anti_forgery_token(param), function (response) {
    if (response.length > 0) {
        resultado.removeClass('invisivel');
        resultado.html(response);
    } else {
        resultado.addClass('invisivel');
        mensagem.html('Nenhum resultado foi encontrado com os filtros selecionados.').removeClass('invisivel');
    }
    $('#loading').addClass('invisivel');
});

Thank you all for the answers and I leave here the solution so that if someone else has similar problems can solve.