none
Dúvida com código jquery para fazer DropDownList em cascata! RRS feed

  • Pergunta

  • Boa noite, como fiz a pergunta no comentário passado estava com dificuldades em fazer um DDL em cascada.

    Graças aos links da Priscila consegui chegar a algum resultado.

    Agora estou com outro problema.

    Fiz um repositório para pegar os dados que queria de marca e filtrar os modelos pela marca como no código abaixo da minha aplicação.

    public class ModeloRepository
        {
            private DatabaseContext contexto;
    
            public ModeloRepository()
            {
                contexto = new DatabaseContext();
            }
    
            public List<MARCA> listaMarcas()
            {
                var consulta = from m in contexto.MARCA
                               select m;
    
                return consulta.ToList();
            }
    
            public List<MODELO> listaModelos(int ID)
            {
                var consulta = from m in contexto.MODELO
                               where m.MarcaID == ID
                               select m;
    
                return consulta.ToList();
            }
        }

    Até ai está tudo ok!

    Fiz o código para o jquery pegar os valores filtrados como baixo:

    public ActionResult listaModelo(int ID)
            {
                return Json(repository.listaModelos(ID), JsonRequestBehavior.AllowGet);
            }

    Fiz um código Jquery como abaixo:

    <script type="text/javascript">
            $(document).ready(function()
            {
                $("#Marca").change(function ()
                {
                    listaModelos($(this).val());
                });
            });
    
            function listaModelos(ID)
            {
                $.getJSON('@Url.Action("listaModelo")/' + ID, listaModelosCallBack());
            }
    
            function listaModelosCallBack(json)
            {
                $("#Modelos :gt(0)").remove(); 
                alert('Só chega até aqui!');
                $(json).each(function ()
                {
                    $("#Modelos").append("<option value='" + this.ID + "'>" + this.Nome + "</option>"); 
                });
            }
        </script>

    O problema e que o código só esta chegando até onde está o "alert" na function listaModelosCallBack.

    Se eu coloco um alert para exibir o parâmetro passado no caso o json o retorno e: undefined, se coloco json.length para ver se ele esta retornando uma lista mesmo e qual o seu tamanho ele não mostra nada.


    O Site com o exemplo que me baseie para fazer o código eh: http://wescley.net/2012/03/10/dropdownlist-utilizando-jquery-com-banco-de-dados/

    Ficarei muito grato se alguém puder me ajudar.

    segunda-feira, 20 de agosto de 2012 22:29

Todas as Respostas

  • Boa noite HrmsAutran

    Veja bem eu faço DropDownList em cascata utilizando PartialView:
    Exemplo:

    Criação de uma partial View para exibir os modelos

    Controller.

    public ActionResult _CarregaModelo(String pMarca)
            {
                return PartialView(new Modelo().BuscarModeloPorMarca(pMarca));
            }

    View

    @model IEnumerable<Modelo>
    @{
        <select id="Modelo" name="Modelo">
            @foreach (var item in Model)
            {
                <option value="@item.Id">@item.Modelo</option>
            }
        </select>
    }

    Ou seja até estes ponto temos a View de detalhes do modelo construída.

    Agora na View que você está efetuando a consulta coloque um DropDown carregando marcas -PODE ser um partialView também se desejar-

    E coloque um ou DropDown na View com id 'Modelo' este será substituido com o resultado da requisição AJAX.

    E utilize o jQuery abaixo para preencher os Modelos sempre que alterar o DropDown Marca.

    $(function () { $('select#Grupo').change(function (evt) { if ($(this).val() != "-1") { $.ajax({
    //caMINHO DO CONTROLADOR.

    url: "../NomeController/_carregaModelo",
    //Requisiçào do TIPO post

    type: 'POST',
    //Enviando dados para o Método do controleer com nome de pMarcar selecionando o ID do COMBO 'Marca'
    data: { pMarca: $('select#Marca').val() },

    success: function (response) {
    //Caso a função ocorra com sucesso, encontre um elemento do tipo select com nome de 'Modelo e substitua o conteúdo'

    $('select#Modelo).replaceWith(response); //Caso o retorno seja menor que 1, desabilite o combo modelo,

    if ($('select#Modelo > option').length < 1) { $('select#Modelo').attr('disabled', 'disabled'); } }, error: function (xhr) { alert("Erro ao carregar!"); } }); } }); });


    T mais.



    terça-feira, 21 de agosto de 2012 02:29