简体   繁体   中英

ASP.net & Bootstrap (bootbox.js) Delete Confirmation

How to achieve alternate confirmation box in asp.net.

<asp:LinkButton ID="btndelete" runat="server" CommandArgument='<%#Eval("ID")%>' CommandName="delete" CssClass="glyphicon glyphicon-trash" data-toggle="popover" data-placement="top" OnClientClick="return ConfirmDelete();" data-content="Delete this record"></asp:LinkButton>

<script type="text/javascript">
    function ConfirmDelete()
    {
         bootbox.confirm("Are you sure?", function (result)
         {
             if (result)
             {
                return true;
             } else
             {
                return false;
             }
         });
    }

</script>

but it not working... server side event fire(postback) before confirmation box button click.

I have got this working after a few days and checking various sources. I have a LinkButton in a GridView.

ASPX

<asp:TemplateField ShowHeader="False">
  <ItemTemplate>
  <asp:LinkButton ID="lnkBtnDelete" runat="server" CssClass="mylink" CausesValidation="false" Text="Delete" OnClick="lnkBtnDelete_Click">    </asp:LinkButton>
 </ItemTemplate>
</asp:TemplateField> 

In GridView OnRowDatabound event, set OnClientClick property to the Javascript to call the bootbox modal dialog. The important things to note are the escaped single quotes and I'm passing the UniqueID of the LinkButton. (Thus this will be called for all rows in the GridView and pass the correct Id.)

GridView1_RowDataBound in code behind

  protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    {

        if (e.Row.RowType == DataControlRowType.DataRow)
        {

            GridViewRow gvrow = ((GridViewRow)e.Row);

            LinkButton lnkBtnDelete = gvrow.FindControl("lnkBtnDelete") as LinkButton;

            lnkBtnDelete.OnClientClick = "return confirmDelete(this,\'" + lnkBtnDelete.UniqueID + "\');";

        }
    }

The confirmDelete Javascript function shows the bootbox confirm dialog. Cancelling will just close the modal form without running the LinkButton click event, but the confirm button will run the built-in Javascript postback event associated with the LinkButton. If you hover your mouse over the LinkButton, you'll see that's the event being called and since we passed in the UniqueID, it gets set correctly for every row in the GridView.

Javascript

function confirmDelete(sender, uniqueID) {
    if ($((sender)[0]).attr("confirmed") == "true") { return true; }

    bootbox.confirm("Are you sure you want to delete?", function (confirmed) {
        if (confirmed) {
            var link = $(sender)[0];
            //javascript: __doPostBack('BuildingCodeCompliance2$GridView1$ctl02$lnkBtnDelete', '');
            javascript: __doPostBack(uniqueID, '');
        }
    });

    return false;
}

The LinkButton_Click event will just have your regular delete functionality.

LinkButton Click code behind

  protected void lnkBtnDelete_Click(object sender, EventArgs e)
    {

        LinkButton lnk = sender as LinkButton;
        GridViewRow gvrow = lnk.NamingContainer as GridViewRow;

        // Delete your record here

    }

Well I have just implemented it for mvc4, I hope my code be helpful to you.

Here you go,

JavaScript Code:

$('#delClass').click(function() {

        bootbox.confirm("Hello world!", function(result) {                
          if (result) {                                             
            alert("Prompt dismissed");                              
          } else {
            alert("Hi <b>"+result+"</b>");                          
          }
        });
    });

The point from were I called it,

"=> li id="delClass"> Delete

DelClass is an Id, if you want to add a class name there then you can add ".youclassname" in that code.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM