Pass data to bootstrap model when model load using ajax - asp.net

Question

I have a calender after I click on date I need to show all data related to that day in a bootstrap model.I used fullcalender as my calender. I manage to pass data to controller through ajax and get the result. But my problem is how to show this data inside specific div.
dayClick: function (date, jsEvent, view) {
$.ajax({
url: 'TodayCases',
type: 'GET',
cache: false,
data: { id: date.format() }
}).done(function (result) {
$('#TodayCaseContainer').html(result);
});
}
if I use $('#Detail').modal('show'); it open the model without data how to combine that html respond to this model
My Model is
<div class="modal fade" id="Detail" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
</div>
<div class="modal-body">
<div id="TodayCaseContainer">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>

Answer 1

From the controller you could return a partial view with the content of the modal. The trick is to call a JavaScript function "onsuccess" from the ajax to toggle the modal. I used the built-in ajaxhelper from asp.net MVC 5 for a similar purpose.
Markup Modal:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
#Html.Action("_partialModal", "Home")
</div>
</div>
Modal Partial View:
#Using Ajax.BeginForm("_partialModal", "Home", New AjaxOption With {
.HttpMethode = "Post",
.UpdateTargetID = "ModalCont",
.OnSuccess = "toggleModal()"},
New With {.id = "ModalCont"})
... Your modal content with Razor ...
End Using
JavaScript to Toggle the modal
function toggleModal() {
$('#myModal').modal('toggle');
}
Hope it helps.