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 Respostas
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:
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:
O Bootstrap faz isso?
Nativamente não, mas existe esse projeto no GitHub que cria TreeViews no Bootstrap:
Se precisar que eu empacote como Package no NuGet, é só falar.
-
Vou pesquisar cada reply de vocês e depois posto o resultado. Talvez faço isso hoje ainda. Obrigado.– pnetCommented 20/08/2014 às 10:55
-
Ainda não consegui fazer funcionar os exemplos tanto do Cigano quanto o do Rafael.– pnetCommented 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
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();
});
-
-
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.– pnetCommented 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.– pnetCommented 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
"É 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 ;)