El encabezado modal y el pie de página de Bootstrap no se representan
Estoy mostrando un formulario de edición en un modo de arranque. Usando asp mvc5, estoy devolviendo una vista parcial en una ventana modal bootstrap. El formulario aparece, se llena con datos y publicaciones muy bien. El único problema es que el encabezado y el pie de página no se muestran. El código aparece en "ver fuente de la página" pero no en la pestaña de elementos del inspector de desarrollo web (Chrome).
Planeo tener múltiples modales diferentes en esta página, por lo que estoy usando un marcador de posición en la página _layout para el modal, y luego paso diferentes vistas parciales.
marcador de posición en el diseño:
<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>
vista parcial (solo contiene un formulario y el botón de cancelación modal):
<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>
Algunos js para agregar etiquetas "data-" a los enlaces:
$(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');
});
});
El controlador mvc solo devuelve el parcial:
return PartialView("_EditOrchard", orchard);