none
Drop Down List com Jquery RRS feed

  • Pergunta

  • Bom dia Pessoal !

    Estou com dificuldade para implementar um DropDow List Dinamico.

    Tenho no meu controller a lista de objeto e o metodo return do Json

     [HttpGet]
            public JsonResult GetProduto()
            {
    
               var produto = ProdutoAplicacaoConstrutor.ProdutoADO();
    
               var listaProduto = produto.ListarTodos();
    
                return this.Json(new {Result = listaProduto}, JsonRequestBehavior.AllowGet);
            }

    Tenho a seguinte Function 

     $(document).ready(function () {
            LoadCategories();
        })
    
        // Listar categorias
        function LoadCategories() {
            $("PROD_DESCRICAO").html("");
            // /<CONTOLLER>/<ACTION>     
            $.getJSON("/Contrato/GetProduto", null, function (data) {
                $.each(data.Result,
                  function (Contrato, produto) {
                      $("PROD_DESCRICAO").append("<option value=" + produto.PROD_ID + ">" + produto.PROD_DESCRICAO + "</option>");
                  });
            })
        }

    A minha duvida é onde eu defino quando o evento será disparado, onde o mesmo terá quando o usuario clicar no combo, no caso criei o combo html puro.

    <legend>Produtos</legend>
    
                <label for="produto.PROD_CODIGO">Produto:</label>
                <select name="produto.PROD_DESCRICAO" id="produto.PROD_DESCRICAO" onclick="">
    
                </select>

    Obrigado !

    segunda-feira, 30 de junho de 2014 14:27

Respostas

  • Como você está usando MVC, usa Razor, tem problema? 

    Se for tipada use:

         @Html.DropDownListFor(model=>model.IdRegiao)

    se não for tipada usa assim:

        @Html.DropDownListFor("IdRegiao")

    Se preferir usar HTML5 normalmente:

    <select id="Cidades">
        <option selected="selected" value="">Cidade</option>
    </select>

    Olha alguns Links bons:

    https://blog.lambda3.com.br/2009/09/dropdownlist-em-cascata-com-asp-net-mvc-e-jquery/

    http://www.codeproject.com/Articles/258172/Simple-Implementation-of-MVC-Cascading-Ajax-Drop-D

    http://www.c-sharpcorner.com/UploadFile/3d39b4/casecading-dropdown-list-with-mvc-linq-to-sql-and-ajax/

    Abraço!!!

    • Marcado como Resposta Diego Bexa quarta-feira, 2 de julho de 2014 14:40
    segunda-feira, 30 de junho de 2014 17:37
  • Diego, boa noite...executa esse código!!! Abraço!!!

    1 - Controller

      public class ProdutoController : Controller
        {
            // GET: Produto
            public ActionResult Index()
            {
                var produtos = ToList();
    
    
                produtos.Insert(0, new Produto
                {
                    Id = 0,
                    Descricao = "Selecionar um produto..."
                });
    
                ViewBag.Produtos = produtos;
    
    
                return View();
            }
            //Simulei um banco de dados
            private List<Produto> ToList()
            {
                List<Produto> produtos = new List<Produto>
                {
                    new Produto
                    {
                        Id= 1,
                        Descricao = "XBox One"
                    },
                     new Produto
                    {
                        Id= 2,
                        Descricao = "Playstatation 4"
                    },
                     new Produto
                    {
                        Id= 3,
                        Descricao = "TV 4K"
                    }
    
                };
    
                return produtos;
            }
        }
    
        class Produto
        {
            public int Id { get; set; }
            public string Descricao { get; set; }
        }

    2 - View e jQuery

    @{
        ViewBag.Title = "Index";
    }
    
    <h2>Index</h2>
    
    
    @Html.DropDownList("Produto", new SelectList(ViewBag.Produtos, "Id", "Descricao", null))
    
    
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
    
        $(document).ready(function () {
    
            $("#Produto").change(function () {
                alert("O Id do produto é: " + $("#Produto").val());
            });
    
        });
    </script>
    

    • Marcado como Resposta Diego Bexa quarta-feira, 2 de julho de 2014 14:40
    terça-feira, 1 de julho de 2014 01:16
  • Diego, que bom!!!

    Para preencher o segundo pode ser feito como mostrei ontem, no evento change de produtos você executa aquela função ajax que vai popular SubProdutos, vou te mostrar um link bacana que vai tirar ainda mais dúvidas.

    No primeiro drop down você mantém do jeito que está...para preencher o segundo, veja como está nesse exemplo, creio que vai dar certo...

    http://stackoverflow.com/questions/11077823/how-to-filter-drop-down-list-based-on-previous-selection/11102704#11102704

    Para estudo de JavaScript e Ajax existem muitos sites por aí, mas um em especial que sempre uso é o W3Schools

    http://www.w3schools.com/

    Abraço Diego, posta aí o resultado, qualquer coisa se não der certo, mais tarde em casa posto um exemplo completo...


    terça-feira, 1 de julho de 2014 12:39
  • Diego bom dia...dessa forma no drop produtos ele não deixou a frase padrão?

     // GET: Produto
            public ActionResult Index()
            {
                var produtos = ToList();
    
    
                produtos.Insert(0, new Produto
                {
                    Id = 0,
                    Descricao = "Selecionar um produto..." //aqui a frase padrão
                });
    
                ViewBag.Produtos = produtos;
    
    
                return View();
            }

    • Marcado como Resposta Diego Bexa quarta-feira, 2 de julho de 2014 14:40
    quarta-feira, 2 de julho de 2014 14:10

Todas as Respostas

  • Boa tarde Diego, tudo bem?

    Usa o evento Change do DropDownList...IdRegiao é um DropDownList que carrega as regiões, conforme muda de opção, os bairros através do Id da Região são carregados do DropDownList  IdBairro...veja um exemplo!!!

    $(document).ready(function () {
    
    
        function obterBairros() {
            var elements = "";
    
            if ($('#IdRegiao').val() == "0") {
                elements = elements + '<option value="">Bairros...</option>'
                $('#IdBairro').empty().attr('disabled', true).append(elements);;
    
            }
            else {
                $.ajax({
                    url: "/Empresa/RetornarBairros",
                    type: 'POST',
                    data: { idRegiao: $('#IdRegiao').val() },
                    datatype: 'json',
                    success: function (data) {
                        $.each(data, function () {
                            elements = elements + '<option value="' + this.Value + '">' + this.Text + '</option>'
                        })
                        $('#IdBairro').empty().attr('disabled', false).append(elements);
                    }
                });
            }
        }
    
    
        $("#IdRegiao").change(function () {
            obterBairros();//Conforme mudo a Regiao, listo os bairros via Ajax
        });
    
    
    });

    segunda-feira, 30 de junho de 2014 15:50
  • Boa tarde Diego !

    Obrigado pela resposta, no caso como ficaria a declaração no html ? 

    segunda-feira, 30 de junho de 2014 17:22
  • Como você está usando MVC, usa Razor, tem problema? 

    Se for tipada use:

         @Html.DropDownListFor(model=>model.IdRegiao)

    se não for tipada usa assim:

        @Html.DropDownListFor("IdRegiao")

    Se preferir usar HTML5 normalmente:

    <select id="Cidades">
        <option selected="selected" value="">Cidade</option>
    </select>

    Olha alguns Links bons:

    https://blog.lambda3.com.br/2009/09/dropdownlist-em-cascata-com-asp-net-mvc-e-jquery/

    http://www.codeproject.com/Articles/258172/Simple-Implementation-of-MVC-Cascading-Ajax-Drop-D

    http://www.c-sharpcorner.com/UploadFile/3d39b4/casecading-dropdown-list-with-mvc-linq-to-sql-and-ajax/

    Abraço!!!

    • Marcado como Resposta Diego Bexa quarta-feira, 2 de julho de 2014 14:40
    segunda-feira, 30 de junho de 2014 17:37
  • Tentei implementar com base nas informações, mas quando clico no combo o mesmo não está listando, segue a abaixo para ver se estou fazendo algo errado.

    Testei a List do meu controller e está trazendo normalmente os dados.

    [HttpGet]
            public JsonResult GetProduto()
            {
    
               var produto = ProdutoAplicacaoConstrutor.ProdutoADO();
    
               var listaProduto = produto.ListarTodos();
    
                return this.Json(new {data = listaProduto}, JsonRequestBehavior.AllowGet);
            }

    Function na pagina

    <script type="text/javascript">
    
        $(document).ready(function () {
    
            $("#Produto").change(function () {
                obterProduto();
            });
    
            function obterProduto() {
                var elements = "";
                $.ajax({
                    url: "/Contrato/GetProduto",
                    type: 'GET',
                    data: { Produto: $('#Produto').val() },
                    datatype: 'json',
                    success: function (data) {
                        $.each(data, function () {
                            elements = elements + '<option value="' + this.data.PROD_ID + '">' + this.data.PROD_DESCRICAO + '</option>'
                        })
                        $('#Produto').append(elements);
                    }
                });
            }
    
        });
    
    </script>

    Obrigado

    segunda-feira, 30 de junho de 2014 18:45
  • Mantém esse mesmo código e testa com seu drop down list assim:

    @Html.DropDownList("Produto", Enumerable.Empty<SelectListItem>(), "Produtos...")

    Posta o resultado por favor...

    segunda-feira, 30 de junho de 2014 18:57
  • mesmo usando o Helpers continua não buscando o resultado.
    segunda-feira, 30 de junho de 2014 19:27
  • O ruim que não estou tendo como testar por conta do ambiente do cliente que estou...antes de chegar em casa pode trocar o código do seu controller e retornar ele dessa forma? o resto mantém como está inclusive o drop down com helper como havia passado....

    List<SelectListItem> lista = new List<SelectListItem>();
    
    
                foreach (var item in listaProduto)
                {
                    SelectListItem listItem = new SelectListItem();
                    listItem.Text = item.DescricaoProduto.ToString();
                    listItem.Value = item.IdProduto.ToString();
                    lista.Add(listItem);
                }
                return Json((IEnumerable)lista);

    o jQuery mantem, e a view também, muda só o Controller...me dá um feedback, se não rolar, chegando em casa te passo algo mais testado.

    Só uma coisa Diego, você vai ativar  change do drop down produto para popular ele mesmo? não entendi, você não tem dois drop down list? e conforme for mexendo em um popular o segundo? 

    por exemplo drop down categoria e drop down produto conforme você ativar o drop down categoria você lista o produto, se fosse assim o evento change tem que ser do drop paai (categoria) e não dele mesmo conforme o código...

     Se você tiver apenas um drop down list popula ele com uma ViewBag, mais simples...

    http://www.dotnetbull.com/2013/08/bind-dropdownlist-in-dotnet-mvc-razor.html

    segunda-feira, 30 de junho de 2014 20:02
  • Diego, boa noite...executa esse código!!! Abraço!!!

    1 - Controller

      public class ProdutoController : Controller
        {
            // GET: Produto
            public ActionResult Index()
            {
                var produtos = ToList();
    
    
                produtos.Insert(0, new Produto
                {
                    Id = 0,
                    Descricao = "Selecionar um produto..."
                });
    
                ViewBag.Produtos = produtos;
    
    
                return View();
            }
            //Simulei um banco de dados
            private List<Produto> ToList()
            {
                List<Produto> produtos = new List<Produto>
                {
                    new Produto
                    {
                        Id= 1,
                        Descricao = "XBox One"
                    },
                     new Produto
                    {
                        Id= 2,
                        Descricao = "Playstatation 4"
                    },
                     new Produto
                    {
                        Id= 3,
                        Descricao = "TV 4K"
                    }
    
                };
    
                return produtos;
            }
        }
    
        class Produto
        {
            public int Id { get; set; }
            public string Descricao { get; set; }
        }

    2 - View e jQuery

    @{
        ViewBag.Title = "Index";
    }
    
    <h2>Index</h2>
    
    
    @Html.DropDownList("Produto", new SelectList(ViewBag.Produtos, "Id", "Descricao", null))
    
    
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
    
        $(document).ready(function () {
    
            $("#Produto").change(function () {
                alert("O Id do produto é: " + $("#Produto").val());
            });
    
        });
    </script>
    

    • Marcado como Resposta Diego Bexa quarta-feira, 2 de julho de 2014 14:40
    terça-feira, 1 de julho de 2014 01:16
  • Bom dia Diego !

    Deu certo usando ViewBag. Preciso também popular o segundo combox conforme o combo pai, Produto> SubProduto, você no caso teria um material para estudo de Jquery e Ajax, pois ainda sou novato nessa parte.

    Muito Obrigado !

    terça-feira, 1 de julho de 2014 12:08
  • Diego, que bom!!!

    Para preencher o segundo pode ser feito como mostrei ontem, no evento change de produtos você executa aquela função ajax que vai popular SubProdutos, vou te mostrar um link bacana que vai tirar ainda mais dúvidas.

    No primeiro drop down você mantém do jeito que está...para preencher o segundo, veja como está nesse exemplo, creio que vai dar certo...

    http://stackoverflow.com/questions/11077823/how-to-filter-drop-down-list-based-on-previous-selection/11102704#11102704

    Para estudo de JavaScript e Ajax existem muitos sites por aí, mas um em especial que sempre uso é o W3Schools

    http://www.w3schools.com/

    Abraço Diego, posta aí o resultado, qualquer coisa se não der certo, mais tarde em casa posto um exemplo completo...


    terça-feira, 1 de julho de 2014 12:39
  • Diego bom dia !

    Deu certo aqui Obrigado pelo Apoio, só que tenho umas duvida, o combo pai é alimentado pela viewBag quando rodo a View já aparece um produto já, porém queria que saísse uma frase tipo "Selecione o Produto", tentei usando o helper ao invés de carregar direto eu coloquei uma frase mas da erro ao executar, teria como fazer isso sem ter que utilizar o Ajax para tbm carregar o combo pai ?

    obrigado.

    quarta-feira, 2 de julho de 2014 13:57
  • Diego bom dia...dessa forma no drop produtos ele não deixou a frase padrão?

     // GET: Produto
            public ActionResult Index()
            {
                var produtos = ToList();
    
    
                produtos.Insert(0, new Produto
                {
                    Id = 0,
                    Descricao = "Selecionar um produto..." //aqui a frase padrão
                });
    
                ViewBag.Produtos = produtos;
    
    
                return View();
            }

    • Marcado como Resposta Diego Bexa quarta-feira, 2 de julho de 2014 14:40
    quarta-feira, 2 de julho de 2014 14:10
  • Cara sensacional, não tinha visto essa parte.. AUHauh

    Muito Obrigado pelo apoio.

    Abraço.

    quarta-feira, 2 de julho de 2014 14:40
  • Você pode usar o evento no Jquery mesmo.

    $('#PROD_DESCRICAO')change(function(){

     //Aqui seu codigo

    ));


    Edinaldo Santos System Analyst Jr - Inovatec

    quinta-feira, 10 de junho de 2021 18:22