首页 文章

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

提问于
浏览 次
1

我想将一个局部视图放在一个Bootstrap模态中，

这是我正在使用的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中取得了成功，但该模式未显示...

c# jquery html asp.net-mvc twitter-bootstrap

2 回答

  • 0

    我假设您的GET endpoints （您的方法）正在返回原始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，则无需更改服务器端代码中的任何内容

    回复于
  • 0

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

    回复于

相关问题