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? — user3559349
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
Possibly a conflict with data_target = "#ItemCommentModal"? — user3559349
That's why I think this is a bug. The ajax response will replace the .modal-body even with an empty AjaxOptions. — mortdale
Its not a bug in @Ajax.ActionLink because that works fine. I can only assume it must be an issue with adding data_targetand the way bootstrap modal works (I don't use it, so can't be sure if that's causing the problem) — user3559349

Nicholas Nicholas · Accepted Answer · 2016-09-01T18:41:30

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 Answers