Question

点击日期后我有一个日历我需要在bootstrap模型中显示与当天相关的所有数据。我使用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

从控制器中，您可以返回包含模态内容的局部视图。诀窍是从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模式

1 个答案: