Question

我正在尝试从bootstrap 3.3.7更新到4.0.0但是部分视图的模态不想工作，我一直得到一个空的模态内容而不是局部视图，这里有我的代码使用bootstrap 3.3.7

bootstratp 3.3.7代码https://github.com/emiliano84/testModal/tree/master/WebApplication1 bootstrap 4.0.0代码 https://github.com/emiliano84/testModal/tree/bootsrap4/WebApplication1

_Layout.cshtml

my_function(f, b, outFile=oF)

__ Modal.cshtml

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - WebApplication1</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="~/css/site.css" />
</head>
<body>

    <div class="container body-content">
        @RenderBody()
    </div>

    @Html.Partial("_Modal")

    <script src="~/lib/jquery/dist/jquery.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>

    @RenderSection("Scripts", required: false)

</body>
</html>

主页/ Index.cshtml

  <div aria-hidden="true" aria-labelledby="modal-action-label" role="dialog" tabindex="-1" id="modal-action-id" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
        </div>
    </div>
</div>

HomeController.cs

 <a id="deleteModal" data-toggle="modal" data-target="#modal-action-id" class="btn btn-danger" asp-action="Modal">
    <i class="glyphicon glyphicon-trash"></i>  Delete
</a>

主页/ _DeleteCategory.cshtml

  public IActionResult Modal()
        {
            return PartialView("_DeleteCategory");
        }

单击按钮后
bootsrap 3.7 html输出

<form asp-action="" role="form">
    <div class="modal-body form-horizontal">
        Do you want to delete?
    </div>
</form>

单击按钮后启动4 html

<html><head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home Page - WebApplication1</title>
    <link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" href="/css/site.css">
</head>
<body class="modal-open">

    <div class="container body-content">


<a id="deleteModal" data-toggle="modal" data-target="#modal-action-id" class="btn btn-danger" href="/Home/Modal">
    <i class="glyphicon glyphicon-trash"></i>  Delete
</a>
    </div>

    <div aria-hidden="true" aria-labelledby="modal-action-label" role="dialog" tabindex="-1" id="modal-action-id" class="modal fade in" style="display: block;">
    <div class="modal-dialog">
        <div class="modal-content"><form role="form" action="/" method="post">
    <div class="modal-body form-horizontal">
        Do you want to delete?
    </div>
<input name="__RequestVerificationToken" value="CfDJ8KH27-v3I3xDokVa0ArDzjvcs251yDWEn8uK5vM6nFLVSh-l1byQUcPqFqYlR-naInUYVtOGq28Ib186Up7s2ftB5t7krZ1Ix43Agaohw3H0Fq9SbU2wdkdNS93kS-EUTnlmy6Rs3Pu1N4-efa1KO4g" type="hidden"></form>

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

    <script src="/lib/jquery/dist/jquery.js"></script>
    <script src="/lib/bootstrap/dist/js/bootstrap.js"></script>
    <script src="/js/site.js?v=ji3-IxbEzYWjzzLCGkF1KDjrT2jLbbrSYXw-AhMPNIA"></script>

<div class="modal-backdrop fade in"></div></body></html>

bootstrap 3.3.7视觉结果

bootstrap 4.0.0视觉结果

回答和问题

在用户mvermef建议添加此js脚本后，它可以工作......问题是什么？为什么bs 3.3.7也没有???

<html><head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home Page - WebApplication1</title>
    <link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" href="/css/site.css">
</head>
<body class="modal-open">

    <div class="container body-content">


<a id="deleteModal" data-toggle="modal" data-target="#modal-action-id" class="btn btn-danger" href="/Home/Modal">
    <i class="glyphicon glyphicon-trash"></i>  Delete
</a>
    </div>

    <div aria-labelledby="modal-action-label" role="dialog" tabindex="-1" id="modal-action-id" class="modal fade show" style="display: block;">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
        </div>
    </div>
</div>

    <script src="/lib/jquery/dist/jquery.js"></script>
    <script src="/lib/popper.js/dist/popper.js"></script>
    <script src="/lib/bootstrap/dist/js/bootstrap.js"></script>
    <script src="/js/site.js?v=ji3-IxbEzYWjzzLCGkF1KDjrT2jLbbrSYXw-AhMPNIA"></script>

<div class="modal-backdrop fade show"></div></body></html>

Answer 1

Bootstrap 4几乎是一个完全重写的Bootstrap 3.因此，几乎所有的Bootstrap 3代码都不能在Bootstrap 4中运行。这只是完全重写的本质。如果要迁移到Bootstrap 4，则必须逐位迁移每个部分。

这是一个在Bootstrap 4中工作的模态，甚至还有一个来自FontAwesome的图标（glyphicon替换）。注意：container body-content包装器在这里没有真正使用：

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="container body-content">

    <!-- Button trigger modal -->
    <button id="deleteModal" type="button" class="btn btn-danger" data-toggle="modal" data-target="#modal-action-id">
        <i class="fa fa-trash-o pr-2" aria-hidden="true"></i>Delete
    </button>

    <!-- Modal -->
    <div class="modal fade" id="modal-action-id" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    Do you really want to delete?
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
                    <button type="button" class="btn btn-danger">Yes</button>
                </div>
            </div>
        </div>
    </div>

</div>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

＆＃13;

更多信息：

https://getbootstrap.com/docs/4.0/components/modal/

Answer 2

<a class="btn btn-primary" asp-action="Create" data-target="#modal-container" data-toggle="modal">New Flight</a>

value

这就是asp.net（标准版或核心版）模式所需的一切。适用于BS 3.3.7和4.0

JavaScript是调用Action方法的重要部分，告诉模态将Partial的内容推入其中。

asp.net mvc bootsrap 4 modal partialview

2 个答案: