MVC Ajax ActionLink replaces the entire bootstrap modal-body

Question

The Ajax.ActionLink below has an empty AjaxOptions. Surprisingly it automagically renders the ajax response into the modal and replaces the entire .modal-body element. My intention is to render the response into the #ItemCommentModalBody div. No matter how I set the UpdateTargetId and InsertionMode, even with an empty AjaxOptions, the response will replace the whole .modal-body div anyway. Is this a bug? The modal is triggered by bootstrap.

@Ajax.ActionLink("Add a comment", "AddComment", "Document", new { area = "", itemId = Model.ItemId }, new AjaxOptions {  }, new { @class = "btn btn-warning", data_toggle = "modal", data_target = "#ItemCommentModal" })
<div id="ItemCommentModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="lblItemCommentModal" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-body">
            <div id ="ItemCommentModalBody">

            </div>
        </div>
    </div>
</div>

Show how you have done it by setting the ajax options. And have you included the relevant `jquery.unobtrusive-ajax.js` file? — , Feb 23 '15 at 05:06
The AjaxOptions is simple but useless: new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "ItemCommentModalBody" }. Everything worked, the jquery.unobtrusive-ajax.js is included. I can see the response, but it's directly under the .modal-body div, regardless the AjaxOptions settings. — mortdale, Feb 23 '15 at 05:11
Possibly a conflict with `data_target = "#ItemCommentModal"`? — , Feb 23 '15 at 05:15
That's why I think this is a bug. The ajax response will replace the .modal-body even with an empty AjaxOptions. — mortdale, Feb 23 '15 at 05:22
Its not a bug in `@Ajax.ActionLink` because that works fine. I can only assume it must be an issue with adding `data_target`and the way bootstrap modal works (I don't use it, so can't be sure if that's causing the problem) — , Feb 23 '15 at 07:23
Looking at the bootstrap reference site: If a remote URL is provided, content will be loaded one time via jQuery's load method and injected into the .modal-content div. If you're using the data-api, you may alternatively use the href attribute to specify the remote source. The explains everything...http://getbootstrap.com/javascript/#modals-options — mortdale, Feb 23 '15 at 11:29

score 1 · Accepted Answer · answered Sep 01 '16 at 18:41

It actually seems to be related to the data_toggle = "modal" attribute. If you remove it from the action link and instead trigger an OnSuccess event that shows the modal everything works correctly.

@Ajax.ActionLink("Add a comment", "AddComment", "Document", 
    new { area = "", itemId = Model.ItemId },
    new AjaxOptions { UpdateTargetId = "ItemCommentModalBody", OnSuccess = "showModal" },
    new { @class = "btn btn-warning" })

And the showModal function would simply trigger the show modal function normally tied to the data_toggle attribute.

function showModal() {
    $('#ItemCommentModal').modal('show');
}

MVC Ajax ActionLink replaces the entire bootstrap modal-body

1 Answers1