Bootstrap modal is not appearing when on form save using ASP.NET MVC

Question

Hello everyone,

 

I am quite new to asp.net mvc, I am trying to display a bootstrap modal after I save the data. but its not showing modal or the modal disappears in a blink.

 

please see my code

 

thanks for the help in advance.

 

What I have tried:

 

controller action:

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult AddNew(ProductModel pm)
{
if (ModelState.IsValid)
{
int result = IProductRep.Add(pm);
if (result <= 0)
{
return HttpNotFound();
}
else
{
ViewBag.Saved = "saved";
}
}
return View();
}

view : (button is in the form with form method post)

<input type="submit" class="btn btn-primary float-right shadow" value="Save" data-toggle="modal" data-target="#exampleModal">
@if (ViewBag.Saved != null)
{
<div class="modal fade" id="exampleModal">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<span>×</span> </div>
<div class="modal-body"> New product has been saved successfully. </div>
<div class="modal-footer"> Close Save changes </div>
</div>
</div>
</div>
}