个人中心
gpt4 book ai didi

asp.net-mvc - asp.net mvc bootstrap 4 模态局部 View

转载 作者：行者123 更新时间：2023-12-03 06:35:15 25 4
gpt4 key购买 nike

我正在尝试从 bootstrap 3.3.7 更新到 4.0.0，但是带有局部 View 的模态不工作，我一直得到一个空的模态内容而不是局部 View ，这是我的代码使用 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

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

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

Home/Index.cshtml

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

HomeController.cs

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

Home/_DeleteCategory.cshtml 

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

bootsrap 3.7 html output after click on the button

<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 4 html after click the button

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

bootstrap 3.3.7 visual result bootstrap 3.3.7 visual result

bootstrap 4.0.0 visual result bootstrap 4.0.0 visual result

Answer and Question

按照用户 mvermef 的建议添加此 js 脚本后，它起作用了……问题是？为什么有 bs 3.3.7 也能正常工作？？？

 $(function () {
// boostrap 4 load modal example from docs
$('#modal-container').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget); // Button that triggered the modal
    var url = button.attr("href");
    var modal = $(this);
    // note that this will replace the content of modal-content everytime the modal is opened
    modal.find('.modal-content').load(url);
});

$('#modal-container').on('hidden.bs.modal', function () {
    // remove the bs.modal data attribute from it
    $(this).removeData('bs.modal');
    // and empty the modal-content element
    $('#modal-container .modal-content').empty();
    });
});

最佳答案 

$(function () {
// boostrap 4 load modal example from docs

$('#modal-container').on('show.bs.modal', function (event) {

    var button = $(event.relatedTarget); // Button that triggered the modal

    var url = button.attr("href");

    var modal = $(this);

    // note that this will replace the content of modal-content everytime the modal is opened
    modal.find('.modal-content').load(url);

});

$('#modal-container').on('hidden.bs.modal', function () {

    // remove the bs.modal data attribute from it

    $(this).removeData('bs.modal');

    // and empty the modal-content element

    $('#modal-container .modal-content').empty();

    });
}); 

<div id="modal-container" class="modal fade hidden-print" tabindex="-1" role="dialog">
<div class="modal-dialog">
    <div class="modal-content">

    </div>
</div>

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

这几乎是您在 asp.net(标准或核心)中的模态所需的一切。适用于 BS 3.3.7 和 4.0

JavaScript 是重要的部分，它可以调用您的 Action Method 来告诉模态将您的 Partial 的内容推送到其中。

关于asp.net-mvc - asp.net mvc bootstrap 4 模态局部 View ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48463927/

25 4 0
文章推荐： laravel - 如何将 postman 用于Laravel $ _POST请求
文章推荐： javascript - 使用 jQuery 动态创建克隆编号表单
文章推荐： javascript - 从分割的字符串创建对象
文章推荐： postman - 如何在 postman 中集成 amazon cognito 登录？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com