MVC5 + Boostrap 4 VS Modal

Nella versione 3.x di Bootstrap, per creare una finestra modale era sufficiente usare il seguente codice (le impostazioni nella layout page relative ai css e jquery rimangono quelle standard):

Nella Partial View:

<div id=”editModal” class=”modal fade”>
<div class=”modal-dialog” style=”width: 80%; margin-left: auto; margin-right: auto;”>
<div class=”modal-content”>
<div class=”modal-header”>

<a class=”close” href=”#” data-dismiss=”modal”>×</a>
<h3 class=”modal-title”>Modifica Documento</h3>
</div>
<div class=”modal-body”>Corpo della finestra</div>
</div>
</div>
</div>
… <a id=”item.parametroId” class=”btn btn-info” title=”Modifica Dati” href=”@Url.Action(” data-toggle=”modal” data-target=”#editModal”>Apri</a>

 

La URL inserita nel tag a (href=”…”) produceva automaticamente il caricamento della pagina all’interno della sezione modal-body della finestra modale.


Nella versione 4.x di bootstrap, invece, e’ necessario usare JQuery per la visualizzazione della pagina di destinazione: in altre parole, il codice da scrivere e’ il seguente:

<a id=”myLink” href=”#theModal” data-target=”#theModal” data-remote=”@Url.Action(” data-toggle=”modal”>Apri</a>

@section scripts {
<script>
$(‘#theModal’).on(‘show.bs.modal’, function (e) {
var button = $(e.relatedTarget);
var modal = $(this);
modal.find(‘.modal-body’).load(button.data(“remote”));
});
</script>
}
<div id=”theModal” class=”modal fade” tabindex=”-1″ role=”dialog”>

<div class=”modal-dialog” style=”min-width: 80%; margin-left: auto; margin-right: auto; padding: 0;” role=”document”>

<div class=”modal-content”>

<div class=”modal-header”>

<h5 id=”exampleModalLabel” class=”modal-title”>Modifica Dipendente</h5>
<button class=”close” type=”button” data-dismiss=”modal” aria-label=”Close”> <span aria-hidden=”true”>×</span> </button>

</div>
<div class=”modal-body”></div>
<div class=”modal-footer”><button class=”btn btn-secondary” type=”button” data-dismiss=”modal”>Close</button> <button class=”btn btn-primary” type=”button”>Send message</button></div>
</div>
</div>
</div>

E’ stato inserito il codice nella sezione Script che carica dinamicamente la pagina contenuta nella sezione data-remote del link al sopraggiungere dell’evento ‘show.bs.modal’ del div ‘theModal’. L’area che viene popolata con il codice HTML prelevato remotamente e’ il ‘modal-body’.
E’ necessario anche applicare una formattazione/ stile al div modal-dialog altrimenti risulta visibile in minima parte al centro della pagina.