如何将部分视图放入 Bootstrap 模态？答案

【问题标题】：How to put Partial View inside Bootstrap Modal?如何将部分视图放入 Bootstrap 模态？
【发布时间】：2016-09-22 20:02:01
【问题描述】：

我想在 Bootstrap Modal 中放置一个局部视图，

这是我正在使用的 JQuery 代码：

function CreateEmployeeModal()
{
    var url = $("#btnCreateEmployeeModal").data("mine");    
    $.ajax({
        type: 'get',
        url: url
    }).success(function (result) {            
        $(".modal-body").html(result)
        $("#MyModal").modal('show')
    }).error(function () {
        alert("didn't work");
    })
}

这是_Layout文件中的模态代码：

<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">Modal Header</h4>
                        </div>
                        <div class="modal-body" id="divModalBody">
                            <p>Some text in the modal.</p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

我正在使用 Index 页面中的此按钮触发模式，我创建了 data-mine 属性以将 url 保存到返回 PartialView 的操作方法：

 <input type="button" class="aslink modal-link" data-toggle="modal" 
                   data-target="#myModal" id="btnCreateEmployeeModal" value="Open Modal" data-mine="@Url.Action("CreateUsingModal")">

这是我必须返回部分视图的控制器操作方法：

   public PartialViewResult CreateUsingModal()
        {
            return PartialView();
        }

在ajax中操作成功，但模态不显示...

【问题讨论】：

标签： c# jquery html asp.net-mvc twitter-bootstrap

【解决方案1】：

我有一个错误...，我应该使用小写而不是大写作为模态的ID...正确的方法是：$("#myModal").modal('show')

【讨论】：

【解决方案2】：

我假设您的 GET 端点（您的方法）正在返回原始 HTML。更好的方法是让您的方法以 JSON 格式返回数据，然后使用该数据填充您的模式窗口：

function CreateEmployeeModal()
{
    var url = $("#btnCreateEmployeeModal").data("mine");    
    $.ajax({
       type: 'get',
       url: url
    }).success(function (result) {
        console.log(result); //better than alert

        $("#textboxCorrespondingToValue").val(result.valueCorrespondingToTextbox);

        $("#MyModal").modal('show');
}).error(function () {
    alert("didn't work");
})
}

这样，如果您甚至需要更改 html，则无需更改服务器端代码中的任何内容

【讨论】：

我已经编辑了我的问题，ajax 函数没有执行，我之前放的图像就像是部分视图中的 html 代码的警报...