Popular combo com dados do banco

Front-end
#1

Bom dia pessoal.

Estou querendo popular um select com dados do banco. Estou utilizando c# para pegar a lista de empresas do banco; passando esta lista para o lado cliente com o webmethod, vejam um pouco do meu código:

C# //Pegando a lista de empresas

[WebMethod] [ScriptMethod(UseHttpGet = true)] public static BOJson[] carregaComboEmpresas() { IList listaEmpresas = PersistenceUtils.GetSession().CreateCriteria(). Add(Restrictions.Eq(“TipoEmpresa.tipoEmpresaPK.codTipoEmpresa”, (int)EnumTipoEmpresa.COD_EMPRESAS_ELETROBRAS)) .List().OrderBy(e => e.Empresa.ordem) .Select<EmpresaTipoEmpresa, BOJson>(em => new BOJson(em.Empresa.codEmpresa, em.Empresa.apelido)).ToList();

    return listaEmpresas.ToArray<BOJson>();
}

No javacript tento chamar este método, assim:

$(document).ready(function () {
$.ajax({
type: ‘GET’,
url: ‘Visualizador.aspx/carregaComboEmpresas’,
contentType: ‘application/json; charset=utf-8’,
data: {
empresa: $(’#lblEmpresas’).val()
},
dataType: ‘json’,
success: function (result) {

            escreveMensagem(result.d);
        },
        error: function (result) {
            escreveMensagem('Erro ao enviar dados para o servidor');
        }
    });
});

E no html coloco a combo, assim:

– Selecione a empresa –
Este código não está funcionando para popular a combo. Sou iniciante na área, o que estou fazendo de errado?

Desde já agradeço.

Flávia

#2

Se combo é carregada quando a página é carregada como mostrou nesse evento ready, entao nao precisa dessa requisicao ajax, traz o HTML todo pronto do lado servidor, é mais fácil, performático e limpo. Não tem a necessidade de mais uma requsicao sem novas interações.

#3

Ok. Sendo que a partir do item selecionado nesta combo terei que preencher outra combo de acordo com a empresa selecionada. Neste caso necessito usar o ajax, não é?

Obrigada.
Flávia

#4

Neste caso sim. Mas com WebForms (que parece ser seu caso) usaria UpdatePanel, que já faz esse trabalho.

#5

Interessante , não sabia que o UpdatePanel resolve isso. Vou dar uma pesquisada.

Obrigada.

Flávia

#6

Consegui fazer da seguinte forma: Do lado do C# fiz minha função pegando como parametro o codEmpresa , pois a outra combo deve ser preenchida após a escolha da empresa.

Segue a assinatura de minha função:
[WebMethod]
[ScriptMethod(UseHttpGet = true)]
public static BOJson[] carregaComboResponsaveis(Int32? codEmpresa)
{}

Do lado cliente chamo esta função com o ajax, assim:

function carregaResponsavelFiltro() {

        let empresa = $('#ddlFiltroEmpresa').val();
        

        $.ajax({
            type: 'GET',
            url: 'Visualizador.aspx/carregaComboResponsaveis',
            contentType: 'application/json; charset=utf-8',
            data: { codEmpresa: empresa},
            success: function (response) {
              

                response.d.forEach(function() {
                   
                    addOption(response.d);
               
               });
                            
           

            },
            error: function (error) {
                escreveMensagem('Erro ao enviar dados para o servidor');
            }
        });
    }

Fiquei na dúvida de como injetar este resultado da outra combo, para isso fiz uma função addOption definido o elemento e ela foi chamada na parte de cima:

function addOption(valor) {
var option = new Option(valor);
var select = document.getElementById(“ddlResponsaveis”);
select.add(option);
}

Fiz a chamada da função ajax em uma outra função validando a empresa, pois a outra só pode ser preenchida se a empresa for selecionada, assim:

function carregaFiltro() {
if ($(’#ddlFiltroEmpresa’).val() != null) {
carregaResponsavelFiltro();
}

    }

Esta função carregaFiltro esta sendo chamada no onchange da combo Empresa. O que deve ser feito é:
Ao selecionar a empresa na combo , a outra combo deve ser preenchida com os responsáveis da empresa selecionada.

A minha função C# está ok na depuração. Consegui passar para o lado cliente, sendo que estou com problemas no preenchimento da segunda combo. Aparece algo assim [Object obect], [Object object]… tem algo de errado ao adicionar na combo.
Sabe o que pode ser?

Obrigada. Flávia

#7

Consegui corrigir o problema acima da seguinte forma:

Acrescentei no addOption:

addOption(JSON.stringify(response.d));

0: {codigo: 530, descricao: “Otavio”}
1: {codigo: 518, descricao: “Lauro”}
2: {codigo: 524, descricao: “Flavia”}
3: {codigo: 520, descricao: “Ana”}…

Desta forma estou pegando na resposta um Array com o código e nome dos responsáveis, conforme estrutura acima. Mas deste array preciso apenas da descricao. Como faço para pegar apenas a descricao na resposta?

Obrigada.
Flávia

#8

Fiz uma alteração assim no código:

    let empresa = $('#ddlFiltroEmpresa').val();


    $.ajax({
        type: 'GET',
        url: 'Visualizador.aspx/carregaComboResponsaveis',
        contentType: 'application/json; charset=utf-8',
        data: { codEmpresa: empresa },
        success: function (response) {


            response.d.forEach(function () {

                var codigo = $(response.d).attr("codigo");
                var nome = $(response.d).attr("descricao");
                addItem(codigo,nome, "ddlResponsaveis");

            });


            addItem(0, "Todos", "ddlResponsaveis");


            //$('#ddlResponsaveis option[value=0]').attr('selected', 'selected');

        },
        error: function (error) {
            escreveMensagem('Erro ao enviar dados para o servidor');
        }
    });
}

A minha ideia com este código seria pegar todos os responsáveis para a empresa selecionada (apenas a descricao). Não sei porque motivo só está preenchendo o 1º item do array na combo, ou seja, tenho o array :

0: {codigo: 530, descricao: “Otavio”} 1: {codigo: 518, descricao: “Lauro”} 2: {codigo: 524, descricao: “Flavia”} 3: {codigo: 520, descricao: “Ana”}…

Para a combo Empresa X - deveria aparecer na outra combo os responsáveis : Ana,Flavia e Lauro. Neste caso esta aparecendo apenas Ana. Não entendi pois estou utilizando um foreach.

Estou quase lá, se alguém puder me dar uma ajudinha.

Obrigada.

Flávia

#9

Oi pessoal.

Consegui chegar no resultado final.

Ficou assim o for:

var array_object = response.d;

            for(attr in array_object){


                var codigo = $(array_object[attr]).attr("codigo");
                var nome = $(array_object[attr]).attr("descricao");
                addItem(codigo, nome, "ddlResponsaveis");


            }

Agradeço a ajuda de todos

Flávia