Javascript 部分视图中的ASP MVC引导模式

作为共享布局的一部分，我希望在单击按钮时出现一个模式对话框

这是带有模式对话框的“我的局部视图”：

<ul class="nav navbar-nav navbar-right">
    <li>
        <button type="button" class="open-dialog btn" data-toggle="modal" data-target="#SettingsModal">Settings</button>
    </li>
</ul>

<!-- Modal -->
<div class="modal fade" id="SettingsModal" tabindex="-1" role="dialog" aria-labelledby="SettingsModalLabel">
<div class="modal-dialog" role="document">
    <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>
        </div>
        <div class="modal-body">
            <p>Some text</p>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <a id="settings" class="btn btn-primary btn-sm" href="#">Save changes</a>
        </div>
    </div>
</div>
</div>

我想要的是，在页面顶部有一个按钮，作为共享布局的一部分。与此类似：

当我点击“设置”按钮时，应该会出现一个模式对话框，但当我现在点击它时，屏幕就会变暗，我可以在后台提示模式对话框。我不确定我在模态中哪里做错了什么。任何提示都将不胜感激

试试这个：

$('#settings').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget);
        url = button.data('url');
        $.post(url, function (data) {
            $('.model-body').html(data);
        });
});

行动方法：

public PartialViewResult Settings()
{
            if (Request.IsAjaxRequest())
            {
                // retrive your model
                return PartialView("_Settings");
            }
            return null;
}

---

您必须向Action发送ajax调用您是否错过了

的结尾

，或者您只是忽略了它？您是否在视图中使用

@Html.partial

？我建议@Shehary采用这种方法，在这里使用plunkr示例，我只更改了按钮文本，但您应该明白了。猜测一下，您可能缺少bootstrap.js或bootstrap.css引用，或者正如JamieD77所回避的那样，您可能有一些无用的HTML？

$('#settings').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget);
        url = button.data('url');
        $.post(url, function (data) {
            $('.model-body').html(data);
        });
});

public PartialViewResult Settings()
{
            if (Request.IsAjaxRequest())
            {
                // retrive your model
                return PartialView("_Settings");
            }
            return null;
}