none
Dropdownlist em cascada com recursividade! RRS feed

  • Pergunta

  • Pessoal, estou em um projeto em MVC 4 RAZOR e usando NHibernate. Estou com um grande problema em dropdownlist em cascata acabei de migrar de web forms para MVC. Nesta tela posso ter até 5 dropdownlist em cascata de acordo com o item selecionado do dropdown tipo tenho uma area que pode ser educional após selecionar a area aparece um dropdown da função que no caso seria" professor"ai após ter escolhido a função professor ele tem o nível que no caso pode ser "Ensino Médio" após escolher o drop do nivel terei um próximo dropdown de série que no caso seria "2º Ano"após escolher o dropdown da série me apareceria o ultimo nivel que seria disciplina que no caso pode ser "matemática" o ultimo nível da recursividade. Ou seja preciso de acordo com o nivel me habilite um dropdown a mais:

    (Area = Educacional > Função = professor > Nível = Ensino Médio > Série = 2º Ano > Disciplina = Matemática )neste caso uso os 5 níveis.

    (Area = Educacional > Função = professor > Nível = Ensino Infantil > Série = Jardim II) neste caso uso os 4 níveis.

    (Area = Educacional > Função = Coordenador> Nível = Ensino Infantil I) neste caso uso os 3 níveis.

    (Area = Educacional > Função = Aux. Administrativo) neste caso uso os 2 níveis.

    Ai de cordo com os níveis vou liberando os dropdowns. No meu Banco tenho 2 tabelas para organizar isso Tabela Area e tabela AreaTitle:

    Na tabela AreaTitle tenho os títulos das areas que são no caso (Area , Função , Nível, Série e Disciplina) no caso uma uma chave privaria e um campo texto para os nomes:

    Na Tabela Area terie as "areas" onde elas são filhas de areatile e as areas podem ter filhos tipo (Educacional é filha de Area, professor é filha de função, Ensino médio é filho de nível, 2º an é filho de ´serie e Matemática pe filho de Disciplina) porem tenho um campo de auto relacionamento nesta tabela que se chama parentareaid que me diz que uma rea pode ter filhos tipo professor tem ensino médio como parent que tem 2º ano como parent que tem matemática como parent isso pensando em recursividade. Nesta Tabela tenho 1 chave primaria, nome parentareaid e areatileid uma FK de areatitle.

    O que eu preciso é um exemplo ou alguma dica de como faço isso em mvc :s estou com o prazo curtissimo e não tenho idéia de como faço isso. Se alguém puder me ddar um hlep por favo.

    Att.


    Moizés Cerqueira | MCP / MCTS SQL SERVER

    quinta-feira, 4 de outubro de 2012 13:31

Respostas

  • Pessoal resolvi da seguinte forma:

    fiz umma action que e renderizada dentro de uma div na outra action:

    Nesta action eu faço os dropdown recursisvos de acordo se na tabela ele tem filhos.

    @model IEnumerable<Sda.Ahrs.Commons.Entities.Area>
    @{var area = Model.First().AreaTitle;}
    <script type="text/javascript">
        $('#area_@area.Id').change(function () {
            if ($(this).val() == "")
                return;
            
            $("#loading").show();
            var areaId = $(this).val();
            $.get('@Url.Action("ListArea", "Recruitment")', { entityId: $('#Entity').val(), parentAreaId:  areaId}, function (data) {
                if (data == "nochildrens") {
                    
                    $('#areaId').val(areaId);
                } else {
                    $('#result_@area.Id').html(data);
                }
    
                $("#loading").hide();
            });
        });
    
        $(document).ready(function () {
            $("#formDesiredArea").validationEngine();
        });
    </script>
    <div class="formLine clearfix">
        <div class="p2 alpha">
            @Html.Label(area.Name)
            @Html.DropDownList("area_" + area.Id, new SelectList(Model, "Id", "Name"), " -- " + "Selecione" + " --", new { @class = "validate[required]" })
        </div>
    </div>
    <div id='result_@area.Id'>
    </div>
    

    action onde recebo o o div com a de cima rendereizada:

    @using System.Web.Mvc.Html
    @using System.Web.UI.WebControls
    @using E = Sda.Ahrs.Commons.Entities
    @using Sda.Ahrs.Registration.Helper
    @*@model Sda.Ahrs.Commons.Entities.Candidate*@
    <script type="text/javascript">
        $(document).ready(function () {
            $("#formDesiredArea").validationEngine();
    
            //DropDownList Area
    
    
            $('#Entity').change(function () {
                $("#loading").show();
                $.get('@Url.Action("ListArea", "Recruitment")', { entityId: $('#Entity').val() }, function (data) {
                    if (data == "nochildrens") {
                        alert("Sem Áreas para esta Entidade");
                    } else {
                        $('#listArea').html(data);
                    }
                    $("#loading").hide();
                });
            });
    
    
        });
    
    
        function OnSuccessDesiredArea(e) {
            if (e.type = "success") {
                $('#desiredareaIndex').slideUp('fast');
                $("#desiredareaIndex").html("");
                $("#desiredareaIndex").html(e.data);
                $('#desiredareaIndex').slideDown('fast');
            } else {
                OnComplete(e);
            }
        }
    </script>
    @using (Ajax.BeginForm("SaveDesiredArea", "Recruitment", null, new AjaxOptions()
    {
        OnSuccess = "OnSuccessDesiredArea",
        LoadingElementId = "loading"
    }, new { @id = "formDesiredArea" }))
    {
    
        <input id="Id" type="hidden" name="Id" value="@Model.Id" />
        <input id="areaId" type="hidden" name="areaId" />
        <input id="candidateid" type="hidden" name="candidateid" value="@ViewBag.candidateId" />
        <fieldset>
            <legend>Entidade</legend>
            @Html.DropDownList("Entity", new SelectList(ViewBag.Entities, "Id", "Name"), " -- " + "Selecione" + " --", new { @class = "validate[required]" })
        </fieldset>
        <fieldset>
              <legend>Área Pretendida</legend>
            <div id="listArea">
            </div>
            <input type="submit" name="AddArea" value="Adicionar" title="Adicionar" />
        </fieldset>
    
    }
    

    Obrigado a todos pelas dicas.

    Att.


    Moizés Cerqueira | MCP / MCTS SQL SERVER

    quarta-feira, 10 de outubro de 2012 13:35

Todas as Respostas

  • http://weblogs.asp.net/raduenuca/archive/2011/03/06/asp-net-mvc-cascading-dropdown-lists-tutorial-part-1-defining-the-problem-and-the-context.aspx

    Fonte: Google


    André Baltieri
    MTAC – Microsoft Technical Audience Contributor

    Twitter: @andrebaltieri
    Blog: http://andrebaltieri.net

    quinta-feira, 4 de outubro de 2012 13:51
  • Bem interesante mas ele esta usando inputs para enviar o valor do dropdown, eu preciso que ao selecionar no evento do dropdown ele chame o próximo.

    Moizés Cerqueira | MCP / MCTS SQL SERVER

    quinta-feira, 4 de outubro de 2012 14:31
  • Pode usar o .change do jQuery

    $("#SEUCONTROLE").change(function(){

    });


    André Baltieri
    MTAC – Microsoft Technical Audience Contributor

    Twitter: @andrebaltieri
    Blog: http://andrebaltieri.net

    quinta-feira, 4 de outubro de 2012 14:34
  • Sim vou ver oq dá pra fazer usando .change.

    Moizés Cerqueira | MCP / MCTS SQL SERVER

    quinta-feira, 4 de outubro de 2012 14:47
  • Baixei os fontes do exemplo e la tem funcionando bem direitinho o vários DropDownList um carregado o outro.
    sexta-feira, 5 de outubro de 2012 12:30
  • Eu fiz uma viewbag para cada dropdown passei os ids manualmente e funcionou mas eu preciso pegar o id de cada dropdown assim que ele for selecionado ai com este id eu preencho o seguinte.

    Aqui preencho os viewbags poorem cada um depende do id da outra.

            public void ListFunction(Guid areaId)
            {
                ViewBag.Functions = new SelectList(candidateMaintenanceService.ListFunctions(areaId), "Id", "Name");
            }
    
            public void ListLevel(Guid areaId)
            {
                ViewBag.Levels = new SelectList(candidateMaintenanceService.ListLevels(areaId), "Id", "Name");
            }
    
            public void ListSerie(Guid areaId)
            {
                ViewBag.Series = new SelectList(candidateMaintenanceService.ListSeries(areaId), "Id", "Name");
            }
    
            public void Discipline(Guid areaId)
            {
                ViewBag.Disciplines = new SelectList(candidateMaintenanceService.ListDiscipline(areaId), "Id", "Name");
            }

    public IEnumerable<Area> GetFunctionsByArea(Guid areaId) { return from a in Db<Area>() where a.ParentArea.Id == areaId select a; }


    Precisava fazer algo em Jquery onde após selecionar um dropdown ele fosse para a função que carrega a viewbag passando o seu id.

     <div class="formLine clearfix">
            <input id="Id" type="hidden" name="Id" value="@Model.Id" />
            <input id="candidateid" type="hidden" name="candidateid" value="@ViewBag.candidateId" />
            <fieldset>
                <legend>Área Pretendida</legend>
                <div class="formLine clearfix">
                    <div class="p4 alpha">
                        @Html.Label("Área")
                        @Html.DropDownList("AreaAS", string.Empty)
                    </div>
                </div>
                <div class="formLine clearfix">
                    <div class="p6 alpha">
                        @Html.Label("Função")
                        @Html.DropDownList("Functions", string.Empty)
                    </div>
                </div>
                <div class="formLine clearfix">
                    <div class="p6 alpha">
                        @Html.Label("Nível")
                        @Html.DropDownList("Levels", string.Empty)
                    </div>
                </div>
                <div class="formLine clearfix">
                    <div class="p6 alpha">
                        @Html.Label("Série")
                        @Html.DropDownList("Series", string.Empty)
                    </div>
                </div>
                <div class="formLine clearfix">
                    <div class="p6 alpha">
                        @Html.Label("Disciplina")
                        @Html.DropDownList("Disciplines", string.Empty)
                    </div>
                </div>
                <input type="submit" name="AddArea" value="Adicionar" title="Adicionar" />
            </fieldset>
        </div>


    Moizés Cerqueira | MCP / MCTS SQL SERVER

    sexta-feira, 5 de outubro de 2012 14:04
  • Moizés,

    No evento change do jQuery (ligado ao seu dropdown) você pode chamar uma função do seu servidor via ajax.

    $('#SEUCONTROLE').change(function() {
    $.get("SEUSERVICO",
       
    function(data){
         $
    ('CONTROLE_FILHO').append( "Name: " + data.CAMPO )
       
    }, "json");
    });


    André Baltieri
    MTAC – Microsoft Technical Audience Contributor

    Twitter: @andrebaltieri
    Blog: http://andrebaltieri.net

    segunda-feira, 8 de outubro de 2012 17:32
  • Pessoal resolvi da seguinte forma:

    fiz umma action que e renderizada dentro de uma div na outra action:

    Nesta action eu faço os dropdown recursisvos de acordo se na tabela ele tem filhos.

    @model IEnumerable<Sda.Ahrs.Commons.Entities.Area>
    @{var area = Model.First().AreaTitle;}
    <script type="text/javascript">
        $('#area_@area.Id').change(function () {
            if ($(this).val() == "")
                return;
            
            $("#loading").show();
            var areaId = $(this).val();
            $.get('@Url.Action("ListArea", "Recruitment")', { entityId: $('#Entity').val(), parentAreaId:  areaId}, function (data) {
                if (data == "nochildrens") {
                    
                    $('#areaId').val(areaId);
                } else {
                    $('#result_@area.Id').html(data);
                }
    
                $("#loading").hide();
            });
        });
    
        $(document).ready(function () {
            $("#formDesiredArea").validationEngine();
        });
    </script>
    <div class="formLine clearfix">
        <div class="p2 alpha">
            @Html.Label(area.Name)
            @Html.DropDownList("area_" + area.Id, new SelectList(Model, "Id", "Name"), " -- " + "Selecione" + " --", new { @class = "validate[required]" })
        </div>
    </div>
    <div id='result_@area.Id'>
    </div>
    

    action onde recebo o o div com a de cima rendereizada:

    @using System.Web.Mvc.Html
    @using System.Web.UI.WebControls
    @using E = Sda.Ahrs.Commons.Entities
    @using Sda.Ahrs.Registration.Helper
    @*@model Sda.Ahrs.Commons.Entities.Candidate*@
    <script type="text/javascript">
        $(document).ready(function () {
            $("#formDesiredArea").validationEngine();
    
            //DropDownList Area
    
    
            $('#Entity').change(function () {
                $("#loading").show();
                $.get('@Url.Action("ListArea", "Recruitment")', { entityId: $('#Entity').val() }, function (data) {
                    if (data == "nochildrens") {
                        alert("Sem Áreas para esta Entidade");
                    } else {
                        $('#listArea').html(data);
                    }
                    $("#loading").hide();
                });
            });
    
    
        });
    
    
        function OnSuccessDesiredArea(e) {
            if (e.type = "success") {
                $('#desiredareaIndex').slideUp('fast');
                $("#desiredareaIndex").html("");
                $("#desiredareaIndex").html(e.data);
                $('#desiredareaIndex').slideDown('fast');
            } else {
                OnComplete(e);
            }
        }
    </script>
    @using (Ajax.BeginForm("SaveDesiredArea", "Recruitment", null, new AjaxOptions()
    {
        OnSuccess = "OnSuccessDesiredArea",
        LoadingElementId = "loading"
    }, new { @id = "formDesiredArea" }))
    {
    
        <input id="Id" type="hidden" name="Id" value="@Model.Id" />
        <input id="areaId" type="hidden" name="areaId" />
        <input id="candidateid" type="hidden" name="candidateid" value="@ViewBag.candidateId" />
        <fieldset>
            <legend>Entidade</legend>
            @Html.DropDownList("Entity", new SelectList(ViewBag.Entities, "Id", "Name"), " -- " + "Selecione" + " --", new { @class = "validate[required]" })
        </fieldset>
        <fieldset>
              <legend>Área Pretendida</legend>
            <div id="listArea">
            </div>
            <input type="submit" name="AddArea" value="Adicionar" title="Adicionar" />
        </fieldset>
    
    }
    

    Obrigado a todos pelas dicas.

    Att.


    Moizés Cerqueira | MCP / MCTS SQL SERVER

    quarta-feira, 10 de outubro de 2012 13:35