none
Colocar checkbox em um treeview com bootstrap e mvc

    Pergunta

  • Uso bottstrap 3, Entity 6, VS 2013 e MVC5. Tenho uma view(cshtml) e nela tenho um sistema de treeview conforme código abaixo. Gostaria de colocar uma checkbox, para que quando checado eu faço uma ação e senão outra. Como eu faço?

    Meu cshtml. Ele é só um protótipo.

    @{
        ViewBag.Title = "Acao";
        Layout = "~/Views/Shared/_LayoutBase.cshtml";
    }

    <link class="cssdeck" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap-responsive.min.css" class="cssdeck">

    <h2>Ache</h2>

    <div class="row">
        <div class="col-md-6">
            <div class="col-md-1">
                <label for="cbxCodTipo">UF:</label>
            </div>
            <div class="col-md-6">
                <select class="form-control col-sm-6" name="cbxCodTipo" id="cbxCodTipo" onchange=" return MontaCidades();">
                    <option value="AC">ACRE</option>
                    <option value="AL">ALAGOAS</option>
                    <option value="AM">AMAZONAS</option>
                    <option value="AP">AMAPÁ</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="MG">MINAS GERAIS</option>
                    <option value="MS">MATO GROSSSO DO SUL</option>
                    <option value="MT">MATO GROSSO</option>
                    <option value="PA">PARÁ</option>
                    <option value="PB">PARAÍBA</option>
                    <option value="PE">PERNAMBUCO</option>
                    <option value="PI">PIAUÍ</option>
                    <option value="PR">PARANÁ</option>
                    <option value="RJ">RIO DE JANEIRO</option>
                    <option value="RN">RIO GRANDE DO NORTE</option>
                    <option value="RO">RONDÔNIA</option>
                    <option value="RR">RORAIMA</option>
                    <option value="RS">RIO GRANDE DO SUL</option>
                    <option value="SC">SANTA CATARINA</option>
                    <option value="SE">SERGIPE</option>
                    <option value="SP">SÃO PAULO</option>
                    <option value="TO">TOCANTINS</option>
                </select>
                <select class="form-control col-sm-6" name="cbxCidade" id="cbxCidade" >
                </select>
            
            </div>
          </div>
        </div>

    <div class="well" style="width:100%; padding: 8px 0;">
        <div style="overflow-y: scroll; overflow-x: hidden; height: 300px;">
            <ul class="nav nav-list">
                <li>
                    <label class="tree-toggler nav-header">Produto</label>
                    <ul class="nav nav-list tree">
                        <li><a href="#">MIP</a></li>
                        <li>
                            <label class="tree-toggler nav-header">Família: ACCUVIT</label>
                            <ul class="nav nav-list tree">
                                <li><a href="#">ACCUVIT COMREV FRX30</a></li>
                            </ul>
                        </li>
                        <li>
                            <label class="tree-toggler nav-header">Família: FLOGORAL</label>
                            <ul class="nav nav-list tree">
                                <li><a href="#">FLOGORAL SPRAY CEREJA CTX30ML</a></li>
                                <li><a href="#">FLOGORAL SPRAY MENTA CTX30ML</a></li>
                                <li><a href="#">FLOGORAL CREM DENTAL CTX70G</a></li>
                            </ul>
                        </li>
                        <li><a href="#">GX</a></li>
                        <li><a href="#">RX</a></li>
                            <li>

                            </li>

                        <li>
                            <label class="tree-toggler nav-header">Header 1.1</label>
                            <ul class="nav nav-list tree">
                                <li><a href="#">Link</a></li>
                                <li><a href="#">Link</a></li>
                                <li>
                                    <label class="tree-toggler nav-header">Header 1.1.1</label>
                                    <ul class="nav nav-list tree">
                                        <li><a href="#">Link</a></li>
                                        <li><a href="#">Link</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li class="divider"></li>
                <li>
                    <label class="tree-toggler nav-header">Header 2</label>
                    <ul class="nav nav-list tree">
                        <li><a href="#">Link</a></li>
                        <li><a href="#">Link</a></li>
                        <li>
                            <label class="tree-toggler nav-header">Header 2.1</label>
                            <ul class="nav nav-list tree">
                                <li><a href="#">Link</a></li>
                                <li><a href="#">Link</a></li>
                                <li>
                                    <label class="tree-toggler nav-header">Header 2.1.1</label>
                                    <ul class="nav nav-list tree">
                                        <li><a href="#">Link</a></li>
                                        <li><a href="#">Link</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <label class="tree-toggler nav-header">Header 2.2</label>
                            <ul class="nav nav-list tree">
                                <li><a href="#">Link</a></li>
                                <li><a href="#">Link</a></li>
                                <li>
                                    <label class="tree-toggler nav-header">Header 2.2.1</label>
                                    <ul class="nav nav-list tree">
                                        <li><a href="#">Link</a></li>
                                        <li><a href="#">Link</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>


    <script src="~/Scripts/jquery-2.1.0.min.js"></script>
    <script src="~/Scripts/Acao/Acao.js"></script>
    <script src="~/Scripts/Util.js"></script>
    <script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>

    quinta-feira, 21 de agosto de 2014 10:24

Todas as Respostas