使用 ajax 加载模型时将数据传递给 bootstrap 模型

Question

点击日期后我有一个日历，我需要在 bootstrap model.I 中显示与那天相关的所有数据，我使用 fullcalender 作为我的日历。我设法通过 ajax 将数据传递给控制器并得到结果。但我的问题是如何在特定的 div.

中显示这些数据

             dayClick: function (date, jsEvent, view) {
                $.ajax({
                    url: 'TodayCases',
                    type: 'GET',
                    cache: false,
                    data: { id: date.format() }
                }).done(function (result) {
                    $('#TodayCaseContainer').html(result);
                });
             }

如果我使用 $('#Detail').modal('show'); 它打开没有数据的模型如何组合 html 响应这个模型

我的模特是

<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

您可以从控制器 return 包含模态内容的局部视图。诀窍是从 ajax 调用 JavaScript 函数 "onsuccess" 来切换模态。我使用 asp.net MVC 5 中的内置 ajaxhelper 来实现类似的目的。

标记模式：

<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>

模态局部视图：

@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 切换模式

    function toggleModal() {
        $('#myModal').modal('toggle');
    }

希望对您有所帮助。

使用 ajax 加载模型时将数据传递给 bootstrap 模型

Pass data to bootstrap model when model load using ajax

asp.net

twitter-bootstrap-3

calendar

asp.net-mvc-5