MVC 5引导模式不工作

本文关键字：工作 模式 MVC | 更新日期: 2023-09-27 18:22:09

我仍然处于MVC学习模式，我需要的一件事是删除确认模式，我想使用Bootstrap来完成这一点。我四处搜索，找到了一些我看了几遍的例子，但我似乎无法将其发挥作用。

我确保下载了最新版本的Bootstap（v3.3.5），并将其放在我的Content文件夹中。我知道Bootstrap和网站可以看到它，因为我的按钮和网格的布局似乎都是正确的。

然而，使用下面的示例代码，当我点击"测试模态"按钮时，它不会打开模态。它只显示部分视图，没有任何CSS/Bootstrap样式。此外，模态中的取消按钮和保存按钮不会触发任何代码。我很好奇是否有人看到我做错了什么，或者对我如何解决这个问题有任何建议。

这在我的_Layout.chtml页面的部分。

<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.chtml页面的部分。

<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.chtml页面中使用的链接。

@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.cs.html.

<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>

MVC 5引导模式不工作

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

相反，你使用的是ActionLink，它会将你的浏览器重定向到动作链接中的url——在这种情况下是部分的（即没有_layout的视图，因此没有css/js）（即你看到的正是什么）。

您需要的是：

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

这个答案显示了所需的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');
       });
});

最后一部分仅在.cs.html文件中有效，在.js文件中无效（因为@Url.Action不会在服务器端运行）。

您不应该将服务器中的mdal窗口html加载为PartialViewResult。最好在页面上使用@Html.Partial()方法，并在加载整个页面时进行渲染。如果你用另一个separete操作加载它，javacscript库就看不到你的html，所以它也不能为它绑定任何操作。

正如我所看到的，你在html 上有一些令人担忧的语义和属性

如果问题仍然出现，请检查引导程序网站。

相关文章：