1

Uso Bootstrap 3.1, Entity 6.1, Visual Studio 2013, MVC5, JQuery e etc... Bem, preciso fazer uma consulta, de forma que quando a tela é carregada, ela consiga carregar algumas informções, como medicamento(Descrição) e outras informações, mas em separado. Para não trazer tudo, como em um grid, meu gestor pediu para que eu fizesse assim. Um sinalzinho de mais(+) e quando eu clicar nele, aí sim, expandir tudo. Há algum componente para isso? É possível fazer no ASP.NET e MVC? O Bootstrap faz isso?

2
  • 1
    Você parece estar falando de um TreeView
    – bfavaretto
    Commented 19/08/2014 às 17:51
  • "É possível fazer no ASP.NET e MVC?" O único limite para o que você pode fazer com .NET está em quanto esforço você pode ou deseja empenhar na solução ;) Commented 19/08/2014 às 17:51

2 Respostas 2

1

Há algum componente para isso? É possível fazer no ASP.NET e MVC?

Sim, chama EasyUI. Como você está trabalhando em cima de ASP.NET MVC, ele está disponível como um pacote NuGet:

https://www.nuget.org/packages/EasyUI

Exemplo: http://jeasyui.com/demo/main/index.php?plugin=Tree&theme=default&dir=ltr&pitem=

Há também uma outra Collapsible List (este é o termo em inglês) que não possui cara de lista de diretórios:

http://code.stephenmorley.org/javascript/collapsible-lists/

O Bootstrap faz isso?

Nativamente não, mas existe esse projeto no GitHub que cria TreeViews no Bootstrap:

https://github.com/jonmiles/bootstrap-treeview

Se precisar que eu empacote como Package no NuGet, é só falar.

3
  • Vou pesquisar cada reply de vocês e depois posto o resultado. Talvez faço isso hoje ainda. Obrigado.
    – pnet
    Commented 20/08/2014 às 10:55
  • Ainda não consegui fazer funcionar os exemplos tanto do Cigano quanto o do Rafael.
    – pnet
    Commented 20/08/2014 às 13:54
  • @pnet Defina melhor "Ainda não consegui fazer funcionar". O que você mudou no código? Como você alterou a View? Quais foram os dados utilizados? A gente não tem como saber que erro você está tendo. É preciso ser mais específico. Commented 20/08/2014 às 14:53
1

Você pode utilizar o .slideToggle() no jQuery no nome do produto. Tratando a lista de medicamentos com um foreach, você pode pegar o ID do produto e associar a um componente para mostrar via jQuery pelo .slideToggle(). Por exemplo:

View

     <div id="[email protected]">
       <span>Medicamento Nome
         <a href="#" class="mostrarCompleto" id="@medicamento.ID"> + </a>
       </span>
      <div class="medicamentoItem">
        "Medicamento"
        "Descrição"
        "Qualquer coisa"
      </div>
    </div>

jQuery

     $(".medicamentoItem").hide();
     $('.mostrarCompleto').click(function () {
     var id = this.id;
     var item = ("#medicamentoGeral-" + id);
     $(item + " .medicamentoItem").slideToggle();

});
5
  • Atualizei! Conseguiu? Commented 20/08/2014 às 14:13
  • Então, como eu disse, qualquer função jquery que escrevo começando com $, dá erro de: $ is not defined. Acabei de testar um outro exemplo também e dá o mesmo erro.
    – pnet
    Commented 20/08/2014 às 14:17
  • Entendi. Você não está trabalhando com razor? Se não, troque por <% %>, Exemplo: @medicamento.ID vira <%medicamento.ID%> ou <%=medicamento.ID%>, não lembro direito. Sobre jQuery, se o problema é começar com $, declare uma variável e atribua a classe/id em questão como valor. Commented 20/08/2014 às 14:26
  • O erro é meu. Eu tenho 3 layout de páginas em meu projeto(Master). Acontece que em todas eu tenho os includes de javascript básico em todas e nessa esqueci de adicionar o jquery-2.1.0.min.js, por isso o erro do $. Resolvi essa parte. O outro exemplo meu funcionou, mas o seu ainda não.
    – pnet
    Commented 20/08/2014 às 14:32
  • Entendi. Aqui eu estou trabalhando exatamente com isso da seguinte forma jsfiddle.net/3stwhLmv . Não vai funcionar é claro, mas para você visualizar o código na integra e ter uma noção melhor. Isso gera essa página congressoconsulfarma.com/Web/saiuMidia é claro que o exemplo não tem muito haver, mas da para entender que tem como utilizar da forma que você quer Commented 20/08/2014 às 14:44

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 .