MVC5中的Bootstrap模式

Question

我试图在Bootstrap v3.3.5中打开一个模态对话框,但我没有运气.单击我的链接时没有显示任何内容.

对于我做错了什么,我真的很感激.

以下是该head部分中的脚本代码:

   $('body').on('click', '.modal-link', function (e) {
        e.preventDefault();
        $(this).attr('data-target', '#modal-container');
        $(this).attr('data-toggle', 'modal');
    });
    // Attach listener to .modal-close-btn's so that when the button is pressed the modal dialog disappears
    $('body').on('click', '.modal-close-btn', function () {
        $('#modal-container').modal('hide');
    });
    //clear modal cache, so that new content can be loaded
    $('#modal-container').on('hidden.bs.modal', function () {
        $(this).removeData('bs.modal');
    });
    $('#CancelModal').on('click', function () {
        return false;
    });

这是DIV:

<div id="modal-container" class="modal fade"
     tabindex="-1" role="dialog">
    <div class="modal-content">
    </div>
</div>

这是应该打开这个模态的ActionLink(它被设计为一个按钮,但这应该没关系,它仍然modal-link附加了它的类):

@Html.ActionLink("Approve Pending",
    "Home", "ViewApprovalModal",
    null, new { @class = "modal-link btn btn-success", style = "font-size: 17px;" })

最后,这是ActionLink在HomeController中调用的C#代码,它只返回模式应显示的部分:

public ActionResult ViewApprovalModal() {
    return PartialView("_ApprovalModal");
}

单击ActionLink时没有任何反应,我在开发者控制台中没有任何错误或任何其他警告,这就是为什么我很困惑.它什么都不做,没有错误.

Answer 1

您是否需要进行服务器端呼叫？如果不是我会摆脱它并做这个客户端.

<button type="button" class="modal-link btn btn-success" 
        data-toggle="modal" data-target="#modal-container"
        style="font-size: 17px;">
    Approve Pending
</button>

@Html.Partial("_ApprovalModal")

你的模态可能需要以下div:

<div id="modal-container" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">

            </div>
            <div class="modal-body">

            </div>
            <div class="modal-footer">

            </div>
        </div>
    </div>
</div>

除非您想编写自定义事件,否则您不需要任何其他JavaScript.