Question

我想在引导程序模式中放置一个部分视图，

这是我正在使用的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的Action Method：

 <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中取得了成功，但模态没有显示......

Answer 1

我假设您的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，则不必更改服务器端代码中的任何内容

Answer 2

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

如何将部分视图放在Bootstrap模式中？

2 个答案: