8

Preciso saber como faço para popular um DropDownList a partir de outro DropDownList. Exemplo: Tenho um DropDownList chamado Projeto que pega as informações do meu DB. Quando seleciono por exemplo "Projeto 1" preciso que no meu segundo DropDownList carregue todos os Sub Projetos pertencentes ao "Projeto 1". Todas essas informações estão no DB. Não estou conseguindo popular o segundo DropDown. Vi que dá pra fazer via JavaScript/Json, mas não faço ideia de como fazer. Preciso de ajuda.

Aqui eu populo o meu primeiro dropdown

 public ActionResult CadastrarAtividades()
    {
        //Lista que recebe todos os PROJETOS ja cadastrados no banco
        List<Projeto> projetos = new ProjetoNegocio().Get();
        ViewBag.ListaProjeto = new SelectList(projetos.Where(x => x.ProjetoIdPai == null), "ProjetoId", "Nome");

        ViewBag.ListaProjetos2 = projetos;

Aqui eu populo o meu segundo dropdown. Porém aqui eu preciso que os dados sejam de acordo com o que foi selecionado no primeiro dropdown.

//Lista que recebe todos os SUBPROJETOS ja cadastrados no banco
        List<Projeto> subprojetos = new ProjetoNegocio().Get();
        ViewBag.ListaSubProjeto = new SelectList(subprojetos.Where(x => x.ProjetoIdPai != null), "ProjetoId", "Nome");

View

<div class="panel-body">
                <div class="col-lg-10">
                    @using (Html.BeginForm("CadastrarAtividades", "Apontamento", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
                    {
                        @Html.AntiForgeryToken()
                        <br /><br />
                        <table class="table table-bordered table-hover">
                            <div class="form-group">
                                @Html.Label("Projeto")
                                <div>
                                    @Html.DropDownListFor(model => model.ProjetoId, new SelectList(ViewBag.ListaProjeto, "Value", "Text"), "Selecione", new { @class = "form-control" })
                                    @Html.ValidationMessageFor(m => m.ProjetoId, "", new { @class = "text-danger" })
                                </div>
                            </div>
                            <div class="form-group">
                                @Html.Label("Sub Projeto")
                                <div>
                                    @Html.DropDownListFor(model => model.ProjetoId, new SelectList(ViewBag.ListaSubProjeto, "Value", "Text"), "Selecione", new { @class = "form-control" })
                                    @Html.ValidationMessageFor(m => m.ProjetoId, "", new { @class = "text-danger" })
                                </div>
                            </div>
5
  • Não entendi, pq popular o segundo dropdown apartir do primeiro se as informações do segundo serão referentes a um projeto diferente do primeiro? Ou as informações do segundo dropdown serão identicas ao primeiro? Commented 23/07/2015 às 12:39
  • Então as informações vem da mesma tabela do DB. O que diferencia um do outro é se o Projeto tiver um "IdProjetoPai" ele é um Sub Projeto, se não tiver um "IdProjetoPai" ele é um Projeto. Commented 23/07/2015 às 13:11
  • @RaphaelGumm poste o que já tentou, vai nos ajudar a ajudá-lo.
    – Marconi
    Commented 23/07/2015 às 13:13
  • Como o Marconi falou, seria melhor explicar melhor sua situação: os dados vindo da DB estão com esse filtro do subprojeto? Vc conseguiu conectar na DB e puxar os dados e jogar numa variavel? Ou esses dados já foram carregados na primeira chamada? A chamada para a DB ta sendo feita como? Pelo MVC? Ou tem uma chamada AJAX? Tenta explicar melhor seu problema, se possível talvez um pouco do código, pq existem muitas opções para resolver seu problema. Commented 23/07/2015 às 13:25
  • Editei a pergunta. @JohnnyBigoode não estou fazendo via JavaScript. Commented 23/07/2015 às 13:33

2 Respostas 2

9

Para esta resposta, vou supor que seu projeto tem instalado o jQuery e o JSON.NET (ambos vêm por padrão num projeto ASP.NET MVC).

Primeiro, isole a busca de um subprojeto em uma Action que devolva um JSON:

    public async Task<JsonResult> SelecionarPorProjeto(int id)
    {
        // Tomei uma liberdade poética aqui. Não sei se Get aceita
        // parâmetros, mas a título de exemplo, vamos supor que sim.
        var subprojetos = new ProjetoNegocio().Get(id);
        return Json(subprojetos.Where(x => x.ProjetoIdPai != null).ToList(), JsonRequestBehavior.AllowGet);
    }

Depois, abra uma @section Scripts na sua View e coloque um código que dispare uma requisição Ajax quando a DropDown de projetos for alterada:

@section Scripts 
{
    <script>
        $("#ProjetoId").change(function () {
            $.ajax({
                url: "/Subprojetos/SelecionarPorProjeto/" + id,
                success: function (data) {
                    $("#SubprojetoId").empty();
                    $("#SubprojetoId").append('<option value>Selecione...</option>');
                    $.each(data, function (index, element) {
                        $("#SubprojetoId").append('<option value="' + element.ProjetoId + '">' + element.Text + '</option>');
                    });
                }
            });
        });
    </script>
}

Isto já deve ser suficiente para resolver.

6

Creio que você está se referindo à um Cascade DropDownList. Onde você seleciona um objeto no primeiro e utiliza o valor como parâmetro para preencher o segundo. Muito comum em cadastros que utilizam País/Estado/Cidade.

A forma que costumo fazer, é povoar o primeiro DropDownList e usar o value da opção selecionada como parâmetro de busca em uma Action. Essa Action me retorna uma lista com os dados, em JSON.

Para fazer desta forma, primeiro você cria em seu controller um método para retornar a lista desejada, desta forma:

public JsonResult ObterProjetos(int projetoId)
        {
            var projetos = new ProjetoNegocio().Get();//Método para obter os projetos aqui
           //Retorna o valor em JSON
            return Json(projetos, JsonRequestBehavior.AllowGet);
        }

Após isso, você utiliza esse script para chamar sua Action com base no valor selecionado.

<script type="text/javascript">
    $(document).ready(function () {
        //Coloque aqui o id do primeiro dropdownlist
        $('#ProjetoId').change(function () {
            //obtém o valor selecionado
            var id = $(this).find(":selected").val();
            //Chama a Action para popular o segundo DropDownList
            $.getJSON('/Projeto/ObterSubProjetos', { projetoId: id }, function (data) {
                //Remove os dados que já possui
               //Aqui entra o ID do segundo DropDownList
                $('#ProjetoIdNovo option').remove();
                $('#ProjetoIdNovo').append('<option value="">Selecione uma Cidade</option>');
                //Popula os options com os valores retornados em JSON
                for (var i = 0; i < data.length; i++) {
                    $('#ProjetoIdNovo').append('<option value="' +
                        data[i].ProjetoId + '"> ' +
                        data[i].NomeProjeto + '</option>');
                }
            });
        });
    });
</script>

O código acima é responsável por "pegar" o valor selecionado no primeiro DropDownList, usar ele como parâmetro para seu controller e preencher o segundo DropDownList de acordo com a lista retornada em JSON.

Nesta parte de seu código:

<div class="form-group">
   @Html.Label("Projeto")
   <div>
      @Html.DropDownListFor(model => model.ProjetoId, new SelectList(ViewBag.ListaProjeto, "Value", "Text"), "Selecione", new { @class = "form-control" })
      @Html.ValidationMessageFor(m => m.ProjetoId, "", new { @class = "text-danger" })
   </div>
</div>
<div class="form-group">
   @Html.Label("Sub Projeto")
   <div>
      @Html.DropDownListFor(model => model.ProjetoId, new SelectList(ViewBag.ListaSubProjeto, "Value", "Text"), "Selecione", new { @class = "form-control" })
      @Html.ValidationMessageFor(m => m.ProjetoId, "", new { @class = "text-danger" })
   </div>
</div>

Você está querendo salvar as atividades (segundo o seu @using (Html.BeginForm("CadastrarAtividades"...). Você está com dois DropDownList com o mesmo id e name. Se você precisa salvar os dois dados no DataBase o ideal é que os campos sejam distintos.

2
  • Pode parecer uma pergunta idiota, mas vc está passando o projetoId com o parâmetro para o json, mas não entendi onde ele está sendo usado Commented 10/11/2016 às 12:15
  • @FabioSouza Sim, ele não está sendo utilizado na resposta. Mas isso é porque o autor da pergunta (AP) não deixou claro como ele queria utilizar. Dessa forma, não alterei o código para não complicar.
    – Randrade
    Commented 10/11/2016 às 12:52

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .