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 { return HttpNotFound(); } else { ViewBag.Saved = "saved" ; } } return View(); } view : (button is in the form with form method post) "submit" class = "btn btn-primary float-right shadow" value= "Save" data-toggle= "modal" data-target= "#exampleModal" > @ if (ViewBag.Saved != null ) { class = "modal fade" id= "exampleModal" > class = "modal-dialog modal-dialog-centered" > class = "modal-content" > class = "modal-header" > class = "modal-title" id= "exampleModalLabel" >Modal title × class = "modal-body" > New product has been saved successfully. class = "modal-footer" > Close Save changes }

Sachin Singh · Answer

modify your code like this, step 1: change your submit button to a normal button. "button" class = "btn btn-primary float-right shadow" value= "Save" /> Step 2.There is no need of viewbag, Models are already hidden. class = "modal" tabindex= "-1" role= "dialog" id= "myModel" > class = "modal-dialog" role= "document" > class = "modal-content" > class = "modal-header" > class = "modal-title" >Modal title "button" class = "close" data-dismiss= "modal" aria-label= "Close" > "true" >× class = "modal-body" > New product has been saved successfully. class = "modal-footer" > "button" class = "btn btn-primary" >Save changes "button" class = "btn btn-secondary" data-dismiss= "modal" >Close step 3: open model with script as soon as form is submitted. "text/javascript" > $(document).ready( function () { $( "#button" ).click( function () { $( "#form" ).submit(); $( '#myModal' ).modal( 'show' ); }); }); Note:- better is to use Ajax so that you could open model on success only. Method 2. keep the button as submit but prevent the behaviour $( "#myform" ).submit( function (e) { //prevent Default functionality e.preventDefault(); //get the action-url of the form var actionurl = e.currentTarget.action; //do your own request an handle the results $.ajax({ url: actionurl, type: 'post' , dataType: 'application/json' , data: $( "#myform" ).serialize(), success: function (data) { $( "#myModel" ).model( 'show' ); } }); }); According to me , second method is better.

saan mughal · Answer

i still can't get that working. When i press the save button nothing happens,