0

Our single page web applications will be using some bootstrap modal windows. Bootstrap seems to hide them until they're needed so simply appending all the modal HTML to the bottom of the form seems like a simple enough plan.

To help with organization, I'd like to do something similar to bundling JS files. However, I don't want the bundle to output links to the files that contain the modal dialog HTML, I want to bundle the actual content in these files and then be inserted at the bottom of the document.

I've looked but the only Bundle options seem to be Less, Style, and Script. It seems to be a safe bet that these will generate references to the files and not insert the file's contents like I'm looking for.

If Bundles aren't the way to go, what alternative do I have that will inject another file's contents into a page on the server side?

Corey Ogburn
  • 24,072
  • 31
  • 113
  • 188

1 Answers1

0

I believe you can accomplish what you want through the use of @Html.Partial() which does not require or use a controller action.

We use this approach to create subsections that get 'included' into a larger body of HTML, such as a our script links, css links, html templates and the markup for our modals.

If you have a Bootstrap modal with the following markup:

<div class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</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><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal --> 

And place the view in the ~/Views/Shared/ folder, with the name _modalMyModal, you should be able to reference the view and include its markup using:

@Html.Partial("_modalMyModal")

The end result should be the same as if you placed the markup for the modal directly in the parent view.

We try to remember to include begin and end comments on these partials to help mark them within the larger body of markup. Something like:

<!-- begin _modalMyModal --> ... <!-- end _modalMyModal -->

David Tansey
  • 5,813
  • 4
  • 35
  • 51