c# - MVC 5 Bootstrap 模态不工作

Question

我仍处于 MVC 学习模式，我需要的其中一件事是删除确认模式，我想使用 Bootstrap 来做到这一点。我四处搜索并提出了一些我已经看过几次的示例，但我似乎无法让它发挥作用。

我确保已下载最新版本的 Bootstap (v3.3.5) 并将其放在我的内容文件夹中。我知道 Bootstrap 并且该站点可以看到它，因为我的按钮和网格的布局似乎都具有正确的样式。

但是，使用下面的示例代码，当我单击“测试模式”按钮时，它不会打开模式。它只显示局部 View ，没有任何 CSS/Bootstrap 样式。此外，模态框内的取消按钮和保存按钮不会触发任何代码。我很好奇是否有人看到我做错了什么或对我如何解决问题有任何建议。

这是在我的 _Layout.cshtml 页面的部分中。

<style>
        .modal-content {
            width: 600px !important;
            margin: 30px auto !important;
        }
    </style>

    <script type="text/javascript">
        $(function () {
            // Initalize modal dialog
            // attach modal-container bootstrap attributes to links with .modal-link class.
            // when a link is clicked with these attributes, bootstrap will display the href content in a modal dialog.
            $('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;
            });
        });
    </script>

这是在我的 _Layout.cshtml 页面的部分中。

<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" id="myModalLabel">Delete Example</h4>
                </div>
                <div class="modal-body">
                    Are you sure you wish to delete this item?
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button type="button" id="mySubmit" class="btn btn-primary">Confirm</button>
                </div>
            </div>
        </div>
    </div>

这是我在 Index.cshtml 页面中使用的链接。

@Html.ActionLink("Test Modal ", "ViewSampleModal", "Admin", null, new { @class = "modal-link btn-xs btn-success" })

这是在我的 AdminController 中。

[HttpGet]
        public ActionResult ViewSampleModal()
        {
            return PartialView("_SampleModal");
        }
[HttpPost]
    public ActionResult ModalClick()
    {
        return RedirectToAction("Index");
    }

这是我的 _SampleModal.cshtml。

<div class="modal-body">
    <div class="alert alert-warning">
        <span class="glyphicon glyphicon-warning-sign"></span>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec consequat nisl a nibh tincidunt condimentum. Nullam in augue vitae augue dictum eleifend. Nunc porta fermentum metus, quis efficitur lectus scelerisque ac. Quisque egestas sit amet nunc in interdum. Etiam malesuada maximus nisi, id tempus metus. Vivamus at sapien ut metus aliquet sodales sed id magna. Integer in auctor ex. Phasellus tempor, est vel placerat dapibus, nulla dui tempor ligula, at pulvinar libero nunc gravida metus. Proin non feugiat felis. Proin ut ultrices ex. Morbi aliquet lacinia elit at bibendum. Nunc facilisis, neque a finibus dignissim, turpis felis vulputate diam, a tristique tellus nibh nec nulla. Suspendisse eget augue non turpis dignissim euismod eget eget odio. Donec sit amet nibh cursus, efficitur nibh in, sodales arcu. Pellentesque pulvinar consequat lacus ac porttitor.
    </div>

    @using (Html.BeginForm("ModalClick", "Admin", FormMethod.Post))
    {
        <div class="row">
            &nbsp;
        </div>
        <div class="row">
            <div class="col-md-4 col-md-offset-4">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button type="submit" id="approve-btn" class="btn btn-danger">Save</button>
            </div>
        </div>
    }
</div>


<script type="text/javascript">
    $(function () {
        $('#approve-btn').click(function () {
            $('#modal-container').modal('hide');
        });
    });
</script>

Answer 1

要显示模式，您需要使用 javascript/jquery。

您使用的是 ActionLink，它将您的浏览器重定向到操作链接中的 url - 在本例中是部分链接(即没有 _layout 的 View ，因此没有 css/js)(即正是你所看到的)。

你需要的是:

• 用户点击链接/按钮
• 可选:ajax 将部分内容加载到模态中
• jquery 显示模式

这answer显示所需的 jquery。

在你的情况下，只需删除它:

@Html.ActionLink("Test Modal ", "ViewSampleModal", "Admin", null, new { @class = "modal-link btn-xs btn-success" })

并替换为

<a class='modal-link btn-xs btn-success'>Test Modal</a>

和

$(".modal-link").click(function() {
    $('#myModal').modal('show');
});

或

$(".modal-link").click(function() {
    $("#myModal .modal-body").load(
       '@Url.Action("ViewSampleModal", "Admin")',
       function() {       
           $('#myModal').modal('show');
       });
});

这最后一部分仅在 .cshtml 文件中有效，在 .js 文件中无效(因为 @Url.Action 不会在服务器端运行)。