Cabeçalho e rodapé modal de autoinicialização não renderizados
Estou exibindo um formulário de edição em um modal de inicialização. Usando o asp mvc5, estou retornando uma exibição parcial em uma janela modal de inicialização. O formulário é exibido, preenchido com dados e postagens muito bem. O único problema é que o cabeçalho e o rodapé não são exibidos. O código aparece em "exibir código-fonte da página", mas não na guia de elementos do inspetor de desenvolvimento da web (chrome).
Pretendo ter vários modais diferentes nesta página, portanto, estou usando um espaço reservado na página _layout para o modal e passando em diferentes visualizações parciais.
espaço reservado no 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>
vista parcial (contém apenas um formulário e o botão de cancelamento 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>
Alguns js para adicionar tags "data-" aos links:
$(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');
});
});
O controlador mvc retorna apenas o parcial:
return PartialView("_EditOrchard", orchard);