Bootstrap modal header and footer not rendered

I am displaying an edit form in a bootstrap modal. Using asp mvc5, I am returning a partial view into a bootstrap modal window. The form shows up, fills with data and posts just fine. Only issue is the header and footer do not display. The code shows up in "view page source" but not in the elements tab of the web dev inspector (chrome).

I plan to have multiple different modals on this one page, so I am using a placeholder in the _layout page for the modal, then passing in different partial views.

placeholder in 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>&times;</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>

partial view (only contains a form and the modal cancel button):

            <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>

Some js to add "data-" tags to the 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');
  });

});

mvc controller just returns the partial:

return PartialView("_EditOrchard", orchard);

You need to include the relevant markup needed for header and footer as well when returning the partial view content. Your partial view's might have different buttons based on the request you are making. Some may have only a "Save" button, some may have only a "Delete" button and the code to execute when you click on those buttons are also different.

<div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                           <span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
    </div>
    <div class="modal-body">
       <p>Some contet for the modal </p>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
    </div>
</div>

The reason why it is not working as you thought is, modal-container is the outer div inside which you have header and footer. The response coming from server will overwrite the existing content of that.

来源：https://stackoverflow.com/questions/39417260/bootstrap-modal-header-and-footer-not-rendered

标签

asp.net-mvc

twitter-bootstrap-3

bootstrap-modal