使 PartialView 适合引导模式 (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>

在我的 Controller 中，我定义了一个返回部分视图的方法PartialViewTitle() 。 我有一个按钮，其中onclick=链接到Open() function。

问题是我的局部视图的内容显示在模态的左侧，右侧是空白。 我想让我的模态框的大小适应它的内容和要居中的内容。 做这个的最好方式是什么？

先感谢您！

Answer 1

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

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

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

自举模态动态宽度

Answer 2

在您的.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>

如果不行则需要添加styles。

Answer 3

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