Question

我正在尝试在bootstrap模型中加载局部视图。因为我在父页面中有一个现有表单而在局部视图中有另一个表单。我无法决定将表格放在一个页面上，因为表格中会有一个表格。

下面是父页面中的复选框，选中后将显示模型对话框：

<input type="checkbox" name="inputNewBornKMC" value="inputNewBornKMC" id="inputNewBornKMCCheckbox"> New Born

以下是父页面中的模态对话框：

                        <div Class="modal fade" id="inputNewBornKMC" role="dialog">
                        <div class="modal-dialog">
                            <!-- Modal content-->
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close modal-close-btn" data-dismiss="modal">&times;</button>
                                    <h4 class="modal-title">Search Newborn's Mother</h4>
                                </div>
                                <div class="modal-body">
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                    @*<button type="button" class="btn btn-default" id="AddGP">Save changes</button>*@
                                </div>
                            </div> <!-- Modal content-->
                        </div>
                    </div> <!-- Modal -->

在javascript中，我输入以下代码来加载模态对话框：

        $('#inputNewBornKMCCheckbox').on('change', function (e) {
        var _this = $(this);

        // if checked
        if (_this.is(':checked')) {
            $('#inputNewBornKMC').modal({
                keyboard: false,
                remote: '/controller/AddPartialRegistration'
            }).show();

        $('#inputNewBornKMCCheckbox').on('click', '.modal-link', function (e) {
                e.preventDefault();
                $(this).attr('data-target', '#inputNewBornKMC');
                $(this).attr('data-toggle', 'modal');

            });

       }

将调用控制器中的操作以显示部分视图：

public ActionResult AddPartialRegistration()
    {
        return PartialView("_PartialRegistration");
    }

在_PartialRegistration页面中：

            <div class="modal-body">
                <form class="form-horizontal" id="frmSearchMother" role="form" >

                    Mother's MRN
                    <input type="text" class="form-control input-sm" id="popupMotherMRN" name="popupMotherMRN" />
                    IC/ID No
                    <input type="text" class="form-control input-sm" id="popupICNo" name="popupICNo" />
                    Mother's Name
                    <input type="text" class="form-control input-sm" id="popupMotherName" name="popupMotherName" />
                    <button type="button" class="btn btn-default" id="SearchMother" >Search</button>
                </form>
                <br />
                <table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="LoadMotherDetailsTable">
                    <thead>
                        <tr>
                            <th>No.</th>
                            <th>Mother's MRN</th>
                            <th>Mother's IC No</th>
                            <th>Mother's Name</th>
                            <th></th>
                        </tr>
                    </thead>

                    <tbody>

                    </tbody>

                </table>
            </div>

我已经尝试了很多方法，人们应用部分视图，但没有一种方法可行。我不确定如何将局部视图插入到模态对话框内的模态体中。选中复选框时可以显示此对话框，但我不确定如何在模态体中加载局部视图。

非常感谢任何帮助。

Answer 1

这是我的第一个答案，所以不要期待太多。

我想说注入局部视图的最佳方式就是你的尝试方式。

我会说你调用AJAX并通过控制器返回部分视图数据。这是从我写的用例中获取的代码：

function showVideo(e) {
        alert('#' + $(e).attr("id"));
        $.ajax({
            url: '/Games/_GameModal/' + $(e).attr("id"),
            dataType: 'html',
            success: function (data) {
                alert('#' + $(e).attr("id"));
                $('#deleteConfirmation').html(data);
                $('#deleteConfirmation').modal();
            }
        });

    }

这是我的部分视图cshtml：

 <div class="modal-dialog modal-lg">
 <div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-
          hidden="true">&times;</button>
        <h2 class="modal-title text-center">@Model.gameName</h2>
        <h4 class="text-center">By @Model.publisher</h4>
        <h5 class="text-center">Content Rating: @Model.Contentrating</h5>
    </div>
    <div class="modal-body">
        <h4 class="text-center">Trailer</h4>
        <iframe width="560" height="315" src="@Model.trailerLink" 
        frameborder="0" allowfullscreen></iframe>
        <h4 class="text-center">Description</h4>
        <p>@Model.description</p>
    </div>
</div>

这是我注入的容器：

<div class="modal fade" id="deleteConfirmation" tabindex="-1" role="dialog" 
   aria-labelledby="myModalLabel" aria-hidden="true">
</div>

如果你想注入模态体，你将替换＆＃39; #deleteConfirmation＆＃39;使用模态体的div的id并将HTML数据注入其中。

我希望这很有帮助，如果不是，我很抱歉。只是想帮助

谢谢， Narendran P

Bootstrap-modal：部分视图显示在模态体

1 个答案: