asp.net mvc bootsrap 4 modal partialview

Question

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

The code you shared has nothing to load any content to the modal dialog! — Shyju
– Shyju, Commented Jan 26, 2018 at 15:17
@Shyju try it by yourselft :) github.com/emiliano84/testModal/tree/master/WebApplication1 — PandaSharp
– PandaSharp, Commented Jan 26, 2018 at 16:37

mvermef · Accepted Answer · 2018-01-27 04:49:46Z

5

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

answered Jan 27, 2018 at 4:49

mvermef

3,9442 gold badges28 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

PandaSharp Over a year ago

thanks this works, I read the documentation also in the past about this, but for some reasons with bootstratp 3.3.7 I didn't need this script, you can try by yourself with my code or repo ... that's awkward

dave317 Over a year ago

This is the correct answer in my opinion, it works better with loading a partial view than the voted answer.

PandaSharp Over a year ago

@dave317 I agree, I added an answer and question at the end of my main question: why with bs 3.3.7 worked also without??? :)

dave317 Over a year ago

This worked for me in an MVC 5 project but I cannot get it work to work in .Net Core using partial views. Any thoughts?

PandaSharp Over a year ago

@dave317 sorry for the late reply, works for me, download my sample project is asp.net core and add the js suggested in the solution github.com/emiliano84/testModal/tree/bootsrap4/WebApplication1

WebDevBooster · Accepted Answer · 2018-01-26 18:11:18Z

3

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/

edited Jan 26, 2018 at 18:11

answered Jan 26, 2018 at 16:19

WebDevBooster

15k9 gold badges69 silver badges70 bronze badges

7 Comments

PandaSharp Over a year ago

yes I read about thanks, but the modal looks totally the same, I also the made the few changes required, here there is my working code with bootstrap 3.3.7 if you want to play with it :) github.com/emiliano84/testModal/tree/master/WebApplication1 p.s. the modal works but only with static content, I'm not able to populate it with the content of the partial view

WebDevBooster Over a year ago

Are you also loading all of the Bootstrap 4 files including jQuery 3.2.1, popper.js and bootstrap.js v.4 (without loading any of the old Bootstrap 3 files)?

WebDevBooster Over a year ago

P.S. for testing and troubleshooting purposes it's better if you post the complete HTML output as part of your question. That way the issue can be isolated very quickly.

PandaSharp Over a year ago

I added everything that I could to the question

WebDevBooster Over a year ago

Check my updated code snippet. It's a fully working Bootstrap 4 modal. You just need to adjust the action of the "yes" button.

|

Collectives™ on Stack Overflow

asp.net mvc bootsrap 4 modal partialview

2 Answers 2

5 Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related