使 PartialView 适合 Bootstrap 模态 (MVC)

Question

我通过单击按钮在 Bootstrap 模态框内显示 MVC 局部视图。我的设置是这样的：

模态

<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Title</h4>
            </div>
            <div class="modal-body" id="Preview">
                @*PartialView*@
            </div>
        </div>
    </div>
</div>

Javascript

<script type="text/javascript">
    function Open() {
        $.ajax({
            type: "Get",
            url: '@Url.Action("PartialViewTitle", "Controller")',
            data: {},
            success: function (data) {
                $('#Preview').html(data);
                $('#myModal').modal('show');
            }
        });
    }
</script>

在我的控制器中，我定义了一个方法 PartialViewTitle()，其中 returns 局部视图。我有一个按钮，其中 onclick= 链接到 Open() 函数。

问题是我的partial View的内容显示在modal的左边，右边是空白space。我想让我的模式的大小适应它的内容和要居中的内容。最好的方法是什么？

提前致谢！

Answer 1

在您的.cshtml视图中使用

<div id='myModal' class='modal hide fade in' data-url='@Url.Action("PartialViewTitle","Controller")'>
   <div id='ModalContainer'>
   </div>
</div>

Javascript

    <script type="text/javascript">
        function Open() {
            var url = $('#myModal').data('url');             
            $.get(url, function(data) {
            $('#ModalContainer').html(data);

            $('#myModal').modal('show');
        });
        }
    </script>

如果不行就需要添加样式。

Answer 2

要使内容居中，您只需按如下方式添加 align-self-center：

<div class="modal-body align-self-center" id="Preview">

要调整大小，可以使用css display: inline-block;请查看以下文章：

Answer 3

尝试使用 $('#Preview').append(data); 而不是 $('#Preview').html(data);

使 PartialView 适合 Bootstrap 模态 (MVC)

Fit PartialView to Bootstrap Modal (MVC)

javascript

ajax

asp.net-mvc

twitter-bootstrap

bootstrap-modal