Yes No Confirm Box using jQuery SweetAlert plugin in ASP.Net

Last Reply one year ago By dharmendr

Posted one year ago

I am trying to replace Alert with Bootstrap alert but not able find perfect solution.

I want to pop alert box with Yes or No. If user select Yes than process resumes with operations. If user select No the current pop will hide.

Any help will be appreciated.

            var me = $(this);
            if (me.data('requestRunning')) {
                return;
            }
            me.data('requestRunning', true);
            if (confirm("Do you want to delete ?")) {
                var row = $(this).closest("tr");
                var ProductID = {
                    ProductID: row.find(".ProductID").find("span").html()
                }

                $.ajax({
                    type: "POST",
                    url: '@Url.Action("DeleteData", "Product")',
                    data: JSON.stringify(ProductID),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (response) {
                        row.remove();
                    }
                                    });
            }
            me.data('requestRunning', false);

 

 

Posted one year ago Modified on 2 months ago

Hi yogesjoshi,

You can use any plugin like sweetalert plugin to achieve this.

Refer the below sample and implement in your code.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.3.5/bluebird.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script type="text/javascript" src='https://cdn.jsdelivr.net/sweetalert2/6.3.8/sweetalert2.min.js'></script>
    <link media="screen" rel="stylesheet" href='https://cdn.jsdelivr.net/sweetalert2/6.3.8/sweetalert2.min.css' />
    <link media="screen" rel="stylesheet" href='https://cdn.jsdelivr.net/sweetalert2/6.3.8/sweetalert2.css' />
    <script type="text/javascript">
        function functionConfirm(event) {
            swal({
                title: 'Do you want to delete ?',
                showCancelButton: true,
                showConfirmButton: true,
                confirmButtonText: 'Yes',
                cancelButtonText: 'No',
                confirmButtonClass: 'btn btn-success',
                cancelButtonClass: 'btn btn-danger',
                type: 'warning',
                buttonsStyling: false
            }).then(function (yes) {
                // Called if you click Yes.
                if (yes) {
                    // Make Ajax call.
                    swal('Deleted', '', 'success');
                }
            },
            function (no) {
                // Called if you click No.
                if (no == 'cancel') {
                    swal('Cancelled', '', 'error');
                }
            });
        }
    </script>
</head>
<body>
    <div>
        <input type="submit" value="Delete" id="btnDelete" class="btn btn-danger" onclick="functionConfirm(this); return false;" />
    </div>
</body>
</html>

Demo