locked
How to delete an Identity user by Ajax Modal with confirmation message? RRS feed

  • Question

  • User991566988 posted

    Hi

    I have this ApplicationUser model:

        public class ApplicationUser : IdentityUser
        {
            public string FullName { get; set; }
    
            public string MobileNo { get; set; }
    
            public ICollection<ApplicationUserRole> UserRoles { get; set; }
        }

    I want to delete a record by Ajax Modal with confirmation message.

    I have this method in DeleteController:

            private readonly ApplicationDbContext _context;
    
            public DeleteController(ApplicationDbContext context)
            {
                _context = context;
            }
            [HttpPost]
            public ActionResult Users(string Id)
            {
                var drec = _context.ApplicationUser.Where(x => x.Id == Id).FirstOrDefault();
                _context.ApplicationUser.Remove(drec);
                _context.SaveChanges();
                return Json(true);
            }

    And trying this code in view:

    @*Some Code*@
                <tr id="row_@item.Id">
                    <td>
                        <a class="btn" onclick="ConfirmDelete(@item.Id)">
                            <img src="~/images/n-delete.png" height="30" width="30" />
                        </a>
                    </td>
    @*Some Code*@
    <div class="modal fade" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">Delete</h3>
                </div>
                <div class="modal-body">
                    <h4> Are you sure?</h4>
                </div>
                <div class="modal-footer">
                    <a href="#" class="btn btn-default" data-dismiss="modal">Cancel</a>
                    <a href="#" class="btn btn-primary" onclick="DeleteRec()">OK</a>
                </div>
            </div>
        </div>
    </div>
    
    <input type="hidden" id="hiddenRecId" />
    
    <script>
        var ConfirmDelete = function (RecId) {
            $("#hiddenRecId").val(RecId);
            $("#myModal").modal('show');
        }
    
        var DeleteRec = function () {
            var vId = $("#hiddenRecId").val();
            $.ajax({
                type: "POST",
                url: "/Delete/Users",
                data: { Id: vId },
                success: function (result) {
                    $("#myModal").modal("hide");
                    $("#row_" + vId).remove();
                }
            })
        }
    </script>

    But when I press the Delete icon no modal appears. Why? and how to solve please?

    Note: I've overridden the Identity by adding scaffolding item.

    Wednesday, February 17, 2021 10:05 AM

All replies

  • User475983607 posted

    I created a sample based on your code and the modal opens as expected.  There must be problems elsewhere in your code or design.  I recommend opening the browser's Dev Tools (F12) and doing basic troubleshooting.  

    @{
        ViewData["Title"] = "Index";
    }
    
    <h1>Index</h1>
    
    <a class="btn" onclick="ConfirmDelete(1)">
        Modal
    </a>
    
    <div class="modal fade" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">Delete</h3>
                </div>
                <div class="modal-body">
                    <h4> Are you sure?</h4>
                </div>
                <div class="modal-footer">
                    <a href="#" class="btn btn-default" data-dismiss="modal">Cancel</a>
                    <a href="#" class="btn btn-primary" onclick="DeleteRec()">OK</a>
                </div>
            </div>
        </div>
    </div>
    <input type="hidden" id="hiddenRecId" />
    
    @section scripts{
        <script>
            var ConfirmDelete = function (RecId) {
                $("#hiddenRecId").val(RecId);
                $("#myModal").modal('show');
            }
    
            var DeleteRec = function () {
                var vId = $("#hiddenRecId").val();
                $.ajax({
                    type: "POST",
                    url: "/Bootstrap/Index",
                    data: { Id: vId },
                    success: function (result) {
                        $("#myModal").modal("hide");
                        //$("#row_" + vId).remove();
                        console.log(result);
                    }
                })
            }
        </script>
    
    }
    

    Wednesday, February 17, 2021 12:11 PM
  • User503812343 posted

    Add div with name dialog-confirm

    <div id="dialog-confirm" title="Empty the recycle bin?">
      <p><span class="ui-icon ui-icon-alert" style="float:left; margin:12px 12px 20px 0;"></span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
    </div>

    Show dialog box to delete user on click of each image having css as btn

     $( ".btn" ).dialog({
          resizable: false,
          height: "auto",
          width: 400,
          modal: true,
          buttons: {
            "Delete all items": function() {
    
    	 var vId = $("#hiddenRecId").val();
     		$.ajax({
        			type: "POST",
        			url: "/Delete/Users",
         			data: { Id: vId },
         			success: function (result) {
                    	$("#myModal").modal("hide");
                    	$("#row_" + vId).remove();
                	}
     	   })	
              $( this ).dialog( "close" );
            },
            Cancel: function() {
              $( this ).dialog( "close" );
            }
          }
     });

    Friday, February 19, 2021 3:45 PM
  • User-474980206 posted

    In the line

    <a class="btn" onclick="ConfirmDelete(@item.Id)">

    many browser will not fire the click event if the href is not defined. Be sure to cancel the navigation. You can use a bookmark href=“#”

    Friday, February 19, 2021 4:13 PM