jqueryasp.net-mvcmodal-dialogasp.net-ajaxunobtrusive-ajax

Tags for modal are not being rendered

I am trying to fill in a modal template using javascript and partial views. I have my template in my master layout file and I want it filled when an Ajax ActionLink is clicked. However 4 inner divs in my template disappear when the Ajax ActionLink is clicked.

<!-- Container for modal -->
<div id="modal-element" class="modal fade in" tabindex="-1" role="dialog">
   <div class="modal-dialog modal-lg"> <!--This disappears after ajax-->
        <div class="modal-content"> <!--This disappears after ajax-->
            <div class="modal-header"></div> <!--This disappears after ajax-->
            <div id="modal-body-footer"> <!--This disappears after ajax-->
                <!--this will be rendered via partialview-->
            </div>
        </div>
    </div>
</div>

My actionlink is in a Webgrid and looks like so:

grid.Column("", null, format: (item) => Ajax.ActionLink("Delete", "Delete", new { id = item.Id }, new AjaxOptions { UpdateTargetId = "modal-body-footer"}, new { @class = "modal-link" })),

My rendered html, obviously missing the 4 divs : Rendered html with only outer most div from layout

I have installed the Ajax Unobtrusive libraries. Where do these divs go?!?!?

Solution

  • Found my error, I was using Bootstrap 3.0.0, works with 3.1.1 or higher...