1

Sou leigo em programação web e estou trabalhando com janelas modals bootstrap em um projeto Asp.net MVC. Venho do mundo Desktop e confesso que estou tendo dificuldades com a implementação de telas Modals. Nos apps Desktop, você consegue chamar repetitivamente uma janela, isto é, instanciá-la, abri-la e exibir um novo conteúdo (várias instancias da mesma janela).

Com o bootstrap eu crio uma DIV para ser o container da minha modal e chamo-a pelo id "modalGenerica", por exemplo:

<div class="modal modal-primary" role="dialog" id="modalGenerica">
    ...
</div>

Quando uma janela modal "modalGenerica" estiver aberta na page, e seu eu precisar abrir novamente outras instâncias da mesma modal "modalGenerica" (em cascata)?

Eu tentei implementar isso, mas dá erro. Só que eu não vejo produtividade alguma, ter que criar várias divs modalGenerica1, modalGenerica2, modalGenerica3, etc, até mesmo, pq eu não sei a quantidade de vezes que uma instância da mesma modal será aberta em cascata... Existe uma solução para isso? Se existe, alguém teria um exemplo básico para me auxiliar?

Muito obrigado e um abraço a todos!

1
  • Pq vc não chama pela classe e não pelo id? Sou lego no assunto, mas pensando que ids são único e uma classe as vezes te ajudaria...
    – hugocsl
    5/05/2019 às 0:21

1 Resposta 1

-1

Sei que já passou algum tempo desde a publicação da pergunta, mas gostaria de deixar a minha contribuição.

Para utilizar apenas uma "div" de modal, você pode implementar ela apenas uma vez na sua página e utilizar partialviews no seu controller e view para novos conteúdos, só é necessário definir em que momento o usuário visualizará novas informações. Por exemplo: Pode utilizar um if para informar ao modal qual partialview será apresentada ao usuário.

Exemplo:

<div class="modal fade bd-example-modal-xl" id="modalExemploDeletar" tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
    <div class="modal-content">
        <div class="modal-header TopoModal">
            <h3 class="modal-title" id="exampleModalLabel">Título do Modal</h3>
            <button type="button" class="close" data-bs-dismiss="modal" aria-label="Fechar" style="color:white;">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
          @if(botão clicado == deletar)
           {
             <div id="conteudoModalDeletar"></div>
           }
          else if(botão clicado == detalhes)
          {
           <div id="conteudoModalDetalhes"></div>
          }                    
            </div>
        </div>
    </div>
</div>

Sua partialview poderá ser chamada através do seguinte código em javascript:

<script type="text/javascript">
    $(document).ready(function () {
        $(".btnDetailsDeletar").click(function () {
            var id = $(this).data("value");
            /*$("#conteudoModal").load("/Lancamento/Details/" + id,*/
            $("#conteudoModalDeletar").load('@Url.Action("DeletarImagem", "ContasAPagar")' + "/" + id,
                function () {
                    $('#modalExemploDeletar').modal("show");
                }
            );
        });
    });
</script>

Botão para chamar o javascript:

<input data-value="@item.Id" class="btnDetailsDeletar" type="button"  value="Excluir" height="25" width="25"/>

No seu controller:

 public ActionResult DeletarImagem(int id)
    {
        var listaArquivos = Log.GetListaImagensExclusaoImagem(id);
        ViewBag.ListaArquivos = listaArquivos;
        return PartialView(listaArquivos);
    }
1
  • Sua resposta pode ser melhorada adicionando informações fundamentais. Basta editar para adicionar mais detalhes, como citações ou documentação para que outras pessoas possam confirmar que sua resposta está correta. Você pode encontrar mais informações sobre como escrever boas respostas na Central de Ajuda.
    – Comunidade Bot
    24/04/2022 às 14:25

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 .