CODEWITHSUNDEEP
asp.net-mvcasp.net-core-mvcbootstrap-modalbootstrap-4
PandaSharp
PandaSharp

Reputation: 642

asp.net mvc bootsrap 4 modal partialview

I'm trying to update from bootstrap 3.3.7 to 4.0.0 but the modal with partial view doesn't want to work, I keep getting an empty modal content instead of the partial view, here there is my code that worked with bootstrap 3.3.7

bootstratp 3.3.7 code https://github.com/emiliano84/testModal/tree/master/WebApplication1 bootstrap 4.0.0 code 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

After adding this js script as the user mvermef suggested, it works... the question is? why with bs 3.3.7 worked also without???

 $(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();
    });
});

Upvotes: 2

Views: 8580

Answers (2)

mvermef
mvermef

Reputation: 3914

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

This is just about everything you need for the modal in asp.net (standard, or core). works with both BS 3.3.7 and 4.0

the JavaScript is the important part to get the call to your Action Method to tell the modal to push into it the contents of your Partial.

Upvotes: 5

WebDevBooster
WebDevBooster

Reputation: 14954

Bootstrap 4 is almost a complete rewrite of Bootstrap 3. So, almost none of the Bootstrap 3 code will work in Bootstrap 4. That's just the nature of a complete rewrite. You have to migrate every piece bit by bit IF you want to migrate to Bootstrap 4.

Here's a modal that works in Bootstrap 4 and even has an icon from FontAwesome (glyphicon replacement). Note: the container body-content wrapper isn't really used here: 

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

More info:

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

Upvotes: 3

Related Questions