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

Question

我正在尝试在引导模型中加载局部视图。因为我在父页面中有一个现有表单，而在部分视图中有另一个表单。我不能决定将表格放在一个页面上，因为那样表格中就会有一个表格。

下面是我在父页面中的复选框，勾选后会显示模型对话框：

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

我尝试了许多人们应用局部视图的方法，但都没有奏效。我不确定如何将部分视图插入到模态对话框的模态体中。选中复选框时可以显示此对话框，但我不确定如何在modal-body中加载部分视图。

任何帮助将不胜感激。

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>

如果您想注入模态体，您可以将“#deleteConfirmation”替换为模态体的 div 的 id 并将 HTML 数据注入其中。

我希望这对您有所帮助，如果没有，我很抱歉。只是想帮忙

谢谢， 纳伦德兰P