Load dynamically from the database and mount a treeview in cshtml I'm not getting

Question

Load dynamically from the database and mount a treeview in cshtml I'm not getting

Navigation

#1 by (2 votes)
#2 by (1 votes)
#3 by (0 votes)

0

is as follows. I'm not getting the satisfactory results in assembling a tree using checkbox like in a treeview. Well, when I put in the data it works fine. But when I bring the DB data, that's complicated, that is, it does not work. The logic is the next to understand. I have some key data, coming from the pack, which are: REASON, UNIT_NEGÓCIO, FAMILIA and of course the product (all medicines). There is a LINQ that brings me this information so I mount the tree. This LINQ, so far brings me everything and serializes and submits to a JQUERY function. In this function, I do an EACH in the output from the controller (LINQ), I mount the nodes and then load the HTML on the page. In the function, I make an IF's so that the names in the nodes are not repeated. I can not make a distinct because I have several times the same REASON but for different IDs and so for others, so the IF's in jquery. What is going on? It does not mount the checkbox's, it brings the information, but it does not mount the checkboxes and so it does not create the scroll bar laterally. I will not write much if not ineligible, but see the codes below:

1) This code with data fakes works and this is how you would like it. The javascript and CSS includes are ok, otherwise it would not work.

<div class="row">
    <div class="col-md-12">
        <div class="col-md-1">
            <label for="cbxCodTipo">UF:</label>
        </div>
        <div class="col-md-4">
            <select class="form-control col-md-6" name="cbxCodTipo" id="cbxCodTipo" onchange=" return MontaCidades();">
                <option value="00">Selecione um estado</option>
                <option value="AC">ACRE</option>
                <option value="AL">ALAGOAS</option>
                <option value="AP">AMAPÁ</option>
                <option value="AM">AMAZONAS</option>
                <option value="BA">BAHIA</option>
                <option value="CE">CEARÁ</option>
                <option value="DF">DISTRITO FEDERAL</option>
                <option value="ES">ESPÍRITO SANTO</option>
                <option value="GO">GOIÁS</option>
                <option value="MA">MARANHÃO</option>
                <option value="MT">MATO GROSSO</option>
                <option value="MS">MATO GROSSO DO SUL</option>
                <option value="MG">MINAS GERAIS</option>
                <option value="PA">PARÁ</option>
                <option value="PB">PARAÍBA</option>
                <option value="PR">PARANÁ</option>
                <option value="PE">PERNAMBUCO</option>
                <option value="PI">PIAUÍ</option>
                <option value="RJ">RIO DE JANEIRO</option>
                <option value="RN">RIO GRANDE DO NORTE</option>
                <option value="RS">RIO GRANDE DO SUL</option>
                <option value="RO">RONDÔNIA</option>
                <option value="RR">RORAIMA</option>
                <option value="SC">SANTA CATARINA</option>
                <option value="SP">SÃO PAULO</option>
                <option value="SE">SERGIPE</option>
                <option value="TO">TOCANTINS</option>
            </select>
        </div>
        <div class="col-md-6">
            <div class="col-md-2">
                <label for="cbxCidade">Cidade:</label>
            </div>
            <select class="form-control col-md-4" name="cbxCidade" id="cbxCidade"></select>
        </div>
    </div>

    <div class="col-md-12">
        <div class="col-md-1">
            <label for="cbxRede">Rede:</label>
        </div>
        <div class="col-md-4">
            <select class="form-control col-md-6" name="cbxRede" id="cbxRede"></select>
        </div>
        <div class="col-md-6">
            <div class="col-md-2">
                <label for="cbxRede">Descrição:</label>
            </div>
            <select class="form-control col-md-4" name="cbxDescricao" id="cbxDescricao"></select>
        </div>
    </div>

    <div class="col-md-12">
        <div class="col-md-1">
            <label for="cbxProduto">Produto:</label>
        </div>
        <div class="col-md-4">
            <select class="form-control col-md-6" name="cbxProduto" id="cbxProduto"></select>
        </div>
    </div>

    <div class="col-md-12">
        <div class="col-md-1">
            <label for="cbxUnNegocio">Unidade Negócio:</label>
        </div>
        <div class="col-md-4">
            <select class="form-control col-md-6" name="cbxUnNegocio" id="cbxUnNegocio"></select>
        </div>
    </div>
</div>
<br />

<div id="content">
    <div class="listTree"></div>
    <button class="btn btn-primary" onclick=" return MontaArvore();">Pesquisar</button>
</div>
<br>
<div id='jqxWidget'>
<div style='float: left; width:auto;'>
    <div id='jqxTree' style='visibility: hidden; float: left; margin-left: 20px;'>
        <ul>
            <li item-checked='false' item-expanded='false'>
                Produto
                <ul>
                    <li item-expanded='true'>
                        MIP
                        <ul>
                            <li item-expanded='true'>
                                Família: ACCUVIT
                                <ul>
                                    <li>ACCUVIT COMREV FRX30</li>
                                </ul>
                            </li>
                            <li item-expanded='true'>
                                Família: FLOGORAL
                                <ul>
                                    <li>FLOGORAL SPRAY CEREJA CTX30ML</li>
                                    <li>FLOGORAL SPRAY MENTA CTX30ML</li>
                                    <li>FLOGORAL CREM DENTAL CTX70G</li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>

    </div>

    <div style='margin-left: 60px; float: left;'>
        <div style='margin-top: 10px;'>
            <input id='jqxCheckBox' type="hidden">
        </div>
    </div>

  </div>
</div>

    <div class="row">
        <div class="col-md-12">
            <div class="col-md-2">
                <label for="txtObs">Observação:</label>
            </div>
            <div class="col-md-12">
                <textarea id="txtObs" style="width: 450px;"></textarea>
            </div>
        </div>
    </div>

    <br />

    <div id="content">
        <div class="listTree"></div>
        <button class="btn btn-success" ">Gravar</button>
        @Html.ActionLink("Voltar", "Index", "Home", new { }, new { @class = "btn btn-danger" })
    </div>

Here is my controller with LINQ.

[HttpPost]
        public JsonResult ArvoreAcao(string _uf)
        {
            RupturaEntities db = new RupturaEntities();

            var monta_arvore = (from rup in db.Ruptura
                                  from apr in db.Apresentacao.Where(apr => apr.Codigo_Apresentacao == rup.Codigo_Apresentacao)
                                  from pdv in db.PDV.Where(pdv => pdv.CodigoPDV == rup.CodigoPDV)
                                  from mot in db.Motivo.Where(mot => mot.IDMotivo == rup.IDMotivo)

                                  select new {
                                      rup.IDRuptura,
                                      rup.DataRuptura,
                                      rup.IDMotivo,
                                      mot.Motivo1,
                                      rup.IDOrigem,
                                      rup.CodigoPDV,
                                      pdv.UF,
                                      pdv.Cidade,
                                      loja = pdv.Cnpj + " - " + pdv.Descricao,
                                      rup.Codigo_Apresentacao,
                                      apr.Unidade_Negocio,
                                      apr.Franquia,
                                      apr.Familia,
                                      apr.Descricao}).ToList().Distinct().OrderBy(apr => apr.Descricao);

            return Json(new { monta_arvore }, JsonRequestBehavior.AllowGet);
        }

And finally my JQUERY, where is the problem.

function MontaArvore() {

    var str = "";
    var motivo = "";
    var unidade_neg = "";
    var familia = "";

    $.ajax({

        url: '/Acao/ArvoreAcao',
        datatype: 'json',
        contentType: 'application/json; charset=utf-8',
        type: 'POST',
        data: JSON.stringify({}),
        success: function (data) {

            $(data.monta_arvore).each(function () {

                if (motivo != this.Motivo1) {
                    str += '<ul>';
                    str += '<li item-checked="false" item-expanded="false">';
                    str += this.Motivo1;
                }

                if (unidade_neg != this.Unidade_Negocio) {
                    str += '<ul>';
                    str += '<li item-expanded="false">';
                    str += this.Unidade_Negocio;
                }

                if (familia != this.Familia) {
                str += '<ul>';
                str += '<li item-expanded="false">';
                    str += this.Familia;
                }
                str += '<ul>';
                    str += '<li>' + this.Descricao + '</li>';
                str += '</ul>';

                str += '</li>';//Familia
                str += '</ul>';//Familia

                str += '</li>';//Unidade de negocio
                str += '</ul>';//Unidade de negocio

                motivo = this.Motivo1;
                unidade_neg = this.Unidade_Negocio;
                familia = this.Familia;
            });

            str += '</li>';//li item-checked após o ul principal
            str += '</ul>';

            $('#jqxTree').html(str);
            str = "";
        },
        error: function (error) {

        }
    })
}

It can be some <UL> or some <LI> , I do not know, anything like that. The point is that the checks are not set up and the data fakes them (checks) are fine. Every help is welcome. Thank you.

javascript jquery c# asp.net-mvc asp.net-mvc-5

asked by anonymous 10.09.2014 / 19:52

3 answers

Pass data through POST with jquery Enable ListView

score 2 · Answer 1

Probably your logic to close the html tags is not correct.

I put comments in the code below showing that you need to put control points to open and close the html tags otherwise it will not be rendered the way you want.

function MontaArvore() {

var str = "";
var motivo = "";
var unidade_neg = "";
var familia = "";

$.ajax({

    url: '/Acao/ArvoreAcao',
    datatype: 'json',
    contentType: 'application/json; charset=utf-8',
    type: 'POST',
    data: JSON.stringify({}),
    success: function (data) {

        $(data.monta_arvore).each(function () {

            if (motivo != this.Motivo1) {
                str += '<ul>';
                str += '<li item-checked="false" item-expanded="false">';
                str += this.Motivo1;
            }

            if (unidade_neg != this.Unidade_Negocio) {
                str += '<ul>';
                str += '<li item-expanded="false">';
                str += this.Unidade_Negocio;
            }

            if (familia != this.Familia) {
            str += '<ul>';
            str += '<li item-expanded="false">';
                str += this.Familia;
            }
            str += '<ul>';
                str += '<li>' + this.Descricao + '</li>';
            str += '</ul>';

            // A TAG ESTÁ SENDO FECHADA SEM SABER SE FOI ABERTA
            // É PRECISO SABER SE ENTROU DENTRO DO IF PRA PODER FECHA-LA
            str += '</li>';//Familia
            str += '</ul>';//Familia

            // A TAG ESTÁ SENDO FECHADA SEM SABER SE FOI ABERTA
            // É PRECISO SABER SE ENTROU DENTRO DO IF PRA PODER FECHA-LA
            str += '</li>';//Unidade de negocio
            str += '</ul>';//Unidade de negocio

            motivo = this.Motivo1;
            unidade_neg = this.Unidade_Negocio;
            familia = this.Familia;
        });

        // NESSE PONTO VC TA FECHANDO UMA TAG Q NÃO SABE SE FOI CRIADA
        // ESSA TAG TEM Q TER ENTRADO NO IF MOTIVO PRA TER SIDO ABERTA
        str += '</li>';//li item-checked após o ul principal
        str += '</ul>';

        $('#jqxTree').html(str);
        str = "";
    },
    error: function (error) {

    }
})

score 1 · Answer 2

1

If you have an (if) open tag you would have to also have an (if) to control the closing of it, that's all.

14.09.2014 / 02:10

score 0 · Answer 3

When you use the

$('#jqxTree').html(str);

Another thing is that if you want to build a list of checkboxes you should put inputs inside the li's, however you're just setting up the li's without putting anything in it, eg

if (motivo != this.Motivo1) {
            str += '<ul>';
            str += '<li><input type="checkbox" name="motivo1" value="seu valor" checked="true or false">';
            str += this.Motivo1;
}

Try to create the checkboxes inside the li's and pass the value you want to these ceckboxes, it should work.