Bootstrap modale Kopf- und Fußzeile nicht gerendert
Ich zeige ein Bearbeitungsformular in einem Bootstrap-Modus an. Mit asp mvc5 gebe ich eine Teilansicht in ein modales Bootstrap-Fenster zurück. Das Formular wird angezeigt und mit Daten und Beiträgen gefüllt. Das einzige Problem ist, dass die Kopf- und Fußzeile nicht angezeigt werden. Der Code wird in "Quelltext der Seite anzeigen" angezeigt, jedoch nicht auf der Registerkarte "Elemente" des Webentwicklungsinspektors (Chrome).
Ich habe vor, auf dieser einen Seite mehrere verschiedene Modale zu haben. Daher verwende ich einen Platzhalter auf der _layout-Seite für das Modal und übergebe dann verschiedene Teilansichten.
Platzhalter im Layout:
<body>
@*Container for modal windows*@
<div class="modal fade" id="modal-container" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span>×</span></button>
<h4 class="modal-title" id="modalLabel"></h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">This is the footer</div>
</div>
</div>
</div>
Teilansicht (enthält nur ein Formular und die modale Abbrechen-Schaltfläche):
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Save" class="btn btn-default" />
<button class="btn btn-warning" data-dismiss="modal">Cancel</button>
</div>
</div>
Einige js, um "Daten-" Tags zu den Links hinzuzufügen:
$(function () {
$('body').on('click', '.modal-link', function(e) {
//e.preventDefault();
$(this).attr('data-target', "#modal-container");
$(this).attr('data-toggle', 'modal');
});
//Clear modal cache
$('#modal-container').on('hidden.bs.modal', function() {
$(this).removeData('bs.modal');
});
});
mvc controller gibt nur den Teil zurück:
return PartialView("_EditOrchard", orchard);