Open Modal PopUp

Question

Hi ON Delete i wan to open Modal Popup . When user Confirms on that then to delete record class='btn btn-danger btn-sm' id='btnDelete' style='margin-left:5px'> Delete Thanks

Sachin Singh · Answer

your code is correct, just pass the parameter as an object too. "Url.Action(" Delete ", " Product ", new { MyId= @item.Id});" onclick= "return confirm('Do you want to delete this record?')" class = 'btn btn-danger btn-sm' id= 'btnDelete' style= 'margin-left:5px' > class = 'fa fa-trash' > Delete Note:- I am intentionally named the Id as MyId because I wanted to show you that this name must match with your Delete Action parameter. public ActionResult Delete( int MyId) { // your code return view(); } next, the confirm dialog should open automatically, as your code is correct.

Rijwan Ansari · Answer

You can do like this: "deleteItem" class = "deleteItem" data-target= "#basic" data-toggle= "modal" data-path= "@Url.Action(" Delete ", " MyController ", new { id = @item.id })" >Delete Modal Html class = "modal fade" id= "basic" tabindex= "-1" role= "basic" aria-hidden= "true" style= "display: none;" > class = "modal-dialog" > class = "modal-content" > class = "modal-header" > "button" class = "close" data-dismiss= "modal" aria-hidden= "true" > class = "modal-title" >Delete Confirmation class = "modal-body" > Are you sure you want to delete this item? class = "modal-footer" > "modal" type= "button" class = "btn btn-default" >Cancel "btnContinueDelete" type= "button" class = "btn btn-primary" >Delete Js part: var path_to_delete; $( ".deleteItem" ).click(function(e) { path_to_delete = $( this ).data( 'path' ); }); $( '#btnContinueDelete' ).click(function () { window.location = path_to_delete; }); And controller sample // GET: MyController/Delete [HttpGet] public ActionResult Delete( int id) { var model = Context.my_models.Where(x => x.id == id).FirstOrDefault(); if (model != null ) { Context.my_models.DeleteOnSubmit(model); Context.SubmitChanges(); return RedirectToAction( "List" ); } return new HttpNotFoundResult(); }

Sachin Singh · Answer

then do it as "#" onclick= "OpenPopup(@item.Id); return false;" class = 'btn btn-danger btn-sm' id= 'btnDelete' style= 'margin-left:5px' > class = 'fa fa-trash' > Delete step 2. class = "modal fade" id= "DeleteModal" > class = "modal-dialog" > class = "modal-content" > class = "modal-header" > "#" class = "close" data-dismiss= "modal" >× class = "modal-title" >Delete Record class = "modal-body" > "hidden" id= "txtId" > Are you sure you want to Delete this Record ? class = "modal-footer" > "#" class = "btn btn-default" data-dismiss= "modal" >Cancel "#" class = "btn btn-success" onclick= "Delete()" >Confirm step 3. function OpenPopUp(Id) { $( "#txtId" ).val(Id); $( "#DeleteModal" ).Modal( 'open' ); } step 4. function Delete(e) { e.preventDefault(); var Id= $( "#txtId" ).val() $.Post( "/home/Delete?Id" +Id,function(data){ alert(data); }); } Note :- when using href="#" and onclick function then best practise is to use below code everywhere in the application $( '#myLink' ).click(function(){ MyFunction(); return false ; }); where MyFunction() is any function or directly your code like ajax post etc.

Ramco Ramco · Answer

Hi Sachin/Rizwan Can't i do like this using - data-toggle="modal" data-target="#DeleteModal" Hi Sachin I can't do like this using data-toggle & data-target. I have tried & it is working @if (item.IsActive) { data-toggle="modal" data-target="#DeleteModal" class='btn btn-danger btn-sm' id='btnDelete' style='margin-left:5px'> Delete } else { Delete } Thanks Thanks

Ramco Ramco · Answer

Hi Sachin I can't do like this using data-toggle & data-target. I have tried & it is working @if (item.IsActive) { data-toggle="modal" data-target="#DeleteModal" class='btn btn-danger btn-sm' id='btnDelete' style='margin-left:5px'> Delete } else { Delete } Thanks

Ramco Ramco · Answer

Hi Sachin I want to open Below Modal Popup & when user confirm here then record to be deleted &times; Delete Record Are you sure you want to Delete this Record ? Cancel Confirm Thanks