在MVC5中使用Bootstrap模态窗口

Question

我正在尝试在Bootstrap v3.3.5中打开模态对话框，但一直没有成功。当我点击链接时，什么也没有显示出来。

如果您能告诉我哪里做错了，我将不胜感激。

以下是部分的脚本代码：

   $('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时，什么也没有发生，而且在开发者控制台中也没有任何错误或任何其他警告，这就是为什么我感到困惑的原因。它只是什么也不做，没有错误。

- Patrick

---

你是否引用了Bootstrap的JavaScript？ - JB06

当然。整个页面都使用了Bootstrap和jQuery，并且渲染得很好。除了这个模态框之外，一切都正常工作。当我单击ActionLink时什么也不会发生，就像我说的那样，我没有收到任何错误信息。 - Patrick

你能展示一下该按钮的HTML渲染结果吗？ - David Tansey

<a class="modal-link btn btn-success" href="/Home/ViewApprovalModal" style="font-size: 17px;">批准待定</a> - Patrick

我在这里说得太早了。页面看起来像是Bootstrap正常，但那是因为CSS正在加载。由于路由配置中的小错误，它没有加载Bootstrap.js。它仍然不起作用，但这是朝着正确方向迈出的一步。 - Patrick

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。

- paulw4ke

---

@Html.RenderPartial("_ApprovalModal")会在任何情况下都渲染这个部分吗？它没有任何附加要求。 - Patrick

它可以工作，但是模态框不会显示，直到您点击按钮，因此在那之前它将有效地是不可见的。 - paulw4ke

通过这个，我得到了“编译器错误消息：CS1503：参数1：无法从'void'转换为'System.Web.WebPages.HelperResult'”... _ApprovalModal.cshtml是Views / Home文件夹中的有效部分视图，从控制器的角度来看，这是正确的位置。我做错了什么？@Html.RenderPartial只需要一个字符串，我正在传递它。据我所知，这是一个有效的字符串。 - Patrick

抱歉，我的意思是@Html.Partial("_ApprovalModal")。我会编辑我的回答。 - paulw4ke

Answer 2

尝试在您的脚本中包含此内容。

<link data-require="bootstrap@*" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />

并尝试以下 Div

<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <h4 class="modal-title">Your title</h4>
  </div>
 <div class="modal-body">
 <p>Your Body&hellip;</p>
 </div>
</div>
</div>
</div>

- Dextere