coffeetime
coffeetime

Reputation: 131

Displaying Bootstrap Dismissible Alert

I'm trying to display a success Bootstrap alert from my controller using ViewBag however, as soon as I navigate to the page the "close" button is showing up:

enter image description here

As soon as I save the changes it then displays the alert correctly:

enter image description here

How can I get rid of the close when navigating to the page?

Code:

Controller

            ViewBag.Message = "Definition Successfully Saved!";
            ViewBag.AlertClass = "alert alert-success alert-dismissible";
            ViewBag.AlertVisibility = "";

View

<div class="@ViewBag.AlertClass">
<button type="button" class="close" data-dismiss="alert">close</button>
<h4 class="@ViewBag.AlertVisibility text-center"><span class="glyphicon glyphicon-ok-sign"></span> @ViewBag.Message</h4>

Upvotes: 0

Views: 1480

Answers (1)

Afrim Kafexholli
Afrim Kafexholli

Reputation: 114

The bootstrap alert must be like this:

<div class="@ViewBag.AlertClass fade" role="alert">
  <h4 class="text-center"><span class="glyphicon glyphicon-ok-sign"></span> 
       @ViewBag.Message</h4>
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

So the ViewBag.AlertClass in C# code should be equal to:

ViewBag.AlertClass = "alert alert-success alert-dismissible show";

And as I can see you don't need ViewBag.AlertVisibility because the show class has that role.

Upvotes: 1

Related Questions