CODEWITHSUNDEEP
asp.net-mvctwitter-bootstrapunobtrusive-ajax
mortdale
mortdale

Reputation: 392

MVC Ajax ActionLink replaces the entire bootstrap modal-body

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>

Upvotes: 1

Views: 1999

Answers (1)

Nicholas
Nicholas

Reputation: 240

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');
}

Upvotes: 1

Related Questions