Question

我正在创建一个类似于下面的ajax.actionlink用于我的bootstrap弹出，但不是在弹出窗口中打开它而是重定向到一个说控制器/动作的URL

我的代码如下

   @Ajax.ActionLink("CheckOut", "CheckOut", "Home", null, new AjaxOptions
            {
                HttpMethod = "Post",
                InsertionMode = InsertionMode.Replace,
                UpdateTargetId = "myModal"
            }, new
            {
                @class = "btn btn-primary btn-lg",
                @id = "chkOut"
            })

  $(document).ready(function () {
        $("#chkOut").attr('data-toggle', 'modal')
    });

Answer 1

使用 Ajaxoptions 的 OnComplete 属性，如下所示：

 @Ajax.ActionLink("CheckOut", "CheckOut", "Home", null, new AjaxOptions
            {
                HttpMethod = "Post",
                InsertionMode = InsertionMode.Replace,
                UpdateTargetId = "myModal",
                OnComplete = "ShowPopup",
            }, new
            {
                @class = "btn btn-primary btn-lg",
                @id = "chkOut"
            })

这是在完成ajax号召性用语链接时调用的函数：

function ShowPopup()
{
    $("#chkOut").attr('data-toggle', 'modal');
}

Answer 2

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" 
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title"></h4>

            </div>
            <div class="modal-body"><div class="te">Please wait...</div></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                @*<button type="button" class="btn btn-primary">Save changes</button>*@
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>


{<script>
    $(document).ready(function () {         


        $("body").on("click", "a.dialog-window", null, function (e)
        {

            e.preventDefault();


            var $link = $(this); // Reference to <a/> link
            var title = $link.text();// this is title to fetch in htnl    
            $('#myModal .modal-title').html(title);

            var url = $(this).attr('href');
            if (url.indexOf('#') == 0) {
                $('#myModal').modal('show');
            }
            else
            {

                $.get(url, function (data) {
                    $('#myModal .te').html(data);
                    $('#myModal').modal();
                }).success(function () { $('input:text:visible:first').focus(); });

            }

        });
    });

</script>}


{
  @Html.ActionLink("Profile II", "Create", "PatientProfile", new { id = item.PatientId }, new { @class = "dialog-window" }) 
}

如何在ajax.actionlink上打开bootstrap模式弹出窗口？

2 个答案: