SweetAlert confirmation dialog with asp.net listview delete?

Question

Please help me fathom this.

I have created a ListView, displaying data from a SQL database. I have enabled inserting, editing and deleting and it all works.

What do I want?

I want to use SweetAlert to prompt the user to confirm yes/no whether they want to delete the entry from the ListView or not.

What have I done?

First I tried using the "builtin" functionality where I added OnClientClick="return confirm('are you sure')" to the <asp:Button/> calling the delete of the given ListView entry. That worked! When I clicked yes it deleted and no it didn't. I didn't have to do anything other than add the above. But It is not what I want. I want the fancier SweetAlert to be displayed, and here the problem starts.

Second I thought I could simply create the SweetAlert script and call its function name from the button. However when doing so, it does open SweetAlert but before I even get the chance to click yes and no, it has already deleted the item and closes the box.

<script>
    function deletealert()
    {
        swal({
            title: "Are you sure?",
            text: "You will not be able to recover this imaginary   file!",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "Yes, delete it!",
            cancelButtonText: "No, cancel plx!",
            closeOnConfirm: false,
            closeOnCancel: false                   
        },
        function (isConfirm) {
            if (isConfirm) {
                swal("Deleted!", "Your imaginary file has been deleted.", "success");
            } else {
                swal("Cancelled", "Your imaginary file is safe :)", "error");
            }
        });
    }
</script>

Now I know that there is no functionality in the above, but I didn't even get the chance to move to the yes and no, it closed the script by itself. Then I found out that I could stop the deleting by setting CausesValidation=false on the delete <asp:Button /> but then nothing happened at all.

Third I think I have a breakthrough, but I have no clue how to finish it. I found out that on the ListView, there is an event called ItemDeleting. This event fires before the delete is executed. I tested it out, and it works.

protected void ListView1_ItemDeleting(object sender, ListViewDeleteEventArgs e)
    {
        ClientScript.RegisterStartupScript(GetType(), "hwa", "deletealert();", true); //Calls the sweetalert

        e.Cancel = true;
       //e.Cancel = false;
    }

If I use the e.Cancel = true; then the item is not deleted and the action is cancelled. If I use the e.Cancel = false; then the item is deleted. So I think I may have to incorporate that functionality with the above jQuery. I don't know if I can put jQuery inside the protected void and work with it from there either?

Updated to include suggested solution from haraman Here is also the entire .aspx page:

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="forum-front.aspx.cs" Inherits="initial.site.forum_front" EnableViewState="true" EnableEventValidation="true" %>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="Content/sweetalert.min.js"></script>

<%--CSS Style Sheets--%>
  <link href="Content/Styles.css" rel="stylesheet" />
  <link href="Content/StylesPanel.css" rel="stylesheet" />
  <link href="Content/sweetalert.css" rel="stylesheet" />

  <%--Java Scripts--%>
    <script>
      function deletealert(ctl) {
        // STORE HREF ATTRIBUTE OF LINK CTL (THIS) BUTTON
        var defaultAction = $(ctl).prop("href");
        // CANCEL DEFAULT LINK BEHAVIOUR
        event.preventDefault();
        swal({
          title: "Are you sure?",
          text: "You will not be able to recover this imaginary   file!",
          type: "warning",
          showCancelButton: true,
          confirmButtonColor: "#DD6B55",
          confirmButtonText: "Yes, delete it!",
          cancelButtonText: "No, cancel plx!",
          closeOnConfirm: false,
          closeOnCancel: false
        }, function(isConfirm) {
          if (isConfirm) {
            swal("Deleted!", "Your imaginary file has been deleted.", "success");
            // RESUME THE DEFAULT LINK ACTION
            eval(defaultAction);
            return true;
          } else {
            swal("Cancelled", "Your imaginary file is safe :)", "error");
            return false;
          }
        });
      }
    </script>

    <asp:Panel ID="Panel1" runat="server" Height="1401px">
      <center>
        <table>
          <tr>
            <td>
              <asp:Button ID="TilForsiden" runat="server" OnClick="TilForsiden_Click" Text="Forsiden" CssClass="button" />
            </td>
            <td>
              <asp:Panel ID="Panel2" runat="server" CssClass="panel panel-default">
                <h1><asp:Label ID="ForumOverskrift" runat="server" CssClass=""></asp:Label></h1>
              </asp:Panel>
            </td>
          </tr>
        </table>
      </center>

      <center>
        <asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource1" InsertItemPosition="LastItem" DataKeyNames="OpslagsID" OnDataBound="SkrivOpslag_Click">

          <AlternatingItemTemplate>
            <tr style="">
              <td>
                <asp:LinkButton OnClientClick="return deletealert(this);" ID="LinkButton1" runat="server" CommandName="Delete" Text="Slet" CssClass="btn btn-default btn-xs" Visible='<%# (string)Eval("BrugerNavn") == "testuser" ? true : false %>' />
                <asp:Button ID="EditButton" runat="server" CommandName="Edit" Text="Rediger" CssClass="btn btn-default btn-xs" Visible='<%# (string)Eval("BrugerNavn") == "testuser" ? true : false %>' />
                <asp:Button ID="AnswerButton" runat="server" CommandName="Answer" Text="Svar" CssClass="btn btn-default btn-xs" OnClick="AnswerButton_Click" />
              </td>
              <td>
                <asp:Label ID="IndholdLabel" runat="server" Text='<%# Eval("Indhold") %>' />
              </td>
              <td>
                <asp:Label ID="BrugerNavnLabel" runat="server" Text='<%# Eval("BrugerNavn") %>' />
              </td>
              <td>
                <asp:Label ID="PostnummerLabel" runat="server" Text='<%# Eval("Postnummer") %>' />
              </td>
              <td>
                <asp:Label ID="EmneLabel" runat="server" Text='<%# Eval("Emne") %>' />
              </td>

            </tr>
            <tr>
              <td></td>
              <td>
                <asp:TextBox ID="AnswerTextBox" Placeholder="Svar..." runat="server" CssClass="form-control" ToolTip="Skriv dit emne her" Width="500px" Visible="false" TextMode="MultiLine" Rows="3" />
              </td>
            </tr>
          </AlternatingItemTemplate>

          <EditItemTemplate>
            <tr style="">
              <td>
                <asp:Button ID="UpdateButton" runat="server" CommandName="Update" Text="Update" CssClass="btn-info" />
                <asp:Button ID="CancelButton" runat="server" CommandName="Cancel" Text="Cancel" CssClass="btn-default" />
              </td>
              <td>
                <asp:TextBox ID="IndholdTextBox" runat="server" Text='<%# Bind("Indhold") %>' />
              </td>
              <td>
                <asp:TextBox ID="EmneTextBox" runat="server" Text='<%# Bind("Emne") %>' />
              </td>
            </tr>
          </EditItemTemplate>

          <EmptyDataTemplate>
            <table runat="server" style="">
              <tr>
                <td>No data was returned.</td>
              </tr>
            </table>
          </EmptyDataTemplate>

          <InsertItemTemplate>

            <table>
              <tr>
                <td>
                  <asp:TextBox ID="EmneTextBox" Placeholder="Emne..." runat="server" Text='<%# Bind("Emne") %>' CssClass="form-control" ToolTip="Skriv dit emne her" Width="500px" />
                </td>
              </tr>
              <tr>
                <td>
                  <asp:TextBox ID="IndholdTextBox" Placeholder="Skriv her..." runat="server" Text='<%# Bind("Indhold") %>' CssClass="form-control" ToolTip="Skriv dit indhold her" TextMode="MultiLine" Rows="8" Width="500px" />
                </td>
              </tr>
            </table>

            <tr style="">
              <td>
                <asp:Button ID="InsertButton" runat="server" CommandName="Insert" Text="Udgiv" CssClass="btn-info" />
                <asp:Button ID="CancelButton" runat="server" CommandName="Cancel" Text="Ryd" CssClass="btn-default" />
              </td>
              <td></td>

            </tr>
          </InsertItemTemplate>

          <ItemTemplate>
            <tr style="">
              <td>
                <asp:LinkButton OnClientClick="return deletealert(this);" ID="LinkButton2" runat="server" CommandName="Delete" Text="Slet" CssClass="btn btn-default btn-xs" Visible='<%# (string)Eval("BrugerNavn") == "testuser" ? true : false %>' />
                <asp:Button ID="EditButton" runat="server" CommandName="Edit" Text="Edit" CssClass="btn btn-default btn-xs" Visible='<%# (string)Eval("BrugerNavn") == "testuser" ? true : false %>' />
                <asp:Button ID="AnswerButton" runat="server" CommandName="Answer" Text="Svar" CssClass="btn btn-default btn-xs" OnClick="AnswerButton_Click" />
              </td>
              <td>
                <asp:Label ID="IndholdLabel" runat="server" Text='<%# Eval("Indhold") %>' />
              </td>
              <td>
                <asp:Label ID="BrugerNavnLabel" runat="server" Text='<%# Eval("BrugerNavn") %>' />
              </td>
              <td>
                <asp:Label ID="PostnummerLabel" runat="server" Text='<%# Eval("Postnummer") %>' />
              </td>
              <td>
                <asp:Label ID="EmneLabel" runat="server" Text='<%# Eval("Emne") %>' />
              </td>
            </tr>
            <tr>
              <td></td>
              <td>
                <asp:TextBox ID="AnswerTextBox" Placeholder="Svar..." runat="server" CssClass="form-control" ToolTip="Skriv dit emne her" Width="500px" Visible="false" TextMode="MultiLine" Rows="3" />
              </td>
            </tr>
          </ItemTemplate>

          <LayoutTemplate>
            <table runat="server">
              <tr runat="server">
                <td runat="server">
                  <table id="itemPlaceholderContainer" runat="server" border="0" style="" class="table table-striped">
                    <tr runat="server" style="">
                      <th runat="server"></th>
                      <th runat="server">Indhold</th>
                      <th runat="server">BrugerNavn</th>
                      <th runat="server">Postnummer</th>
                      <th runat="server">Emne</th>
                    </tr>
                    <tr id="itemPlaceholder" runat="server">
                    </tr>
                  </table>
                </td>
              </tr>
              <tr>
                <td>
                  <asp:Button ID="SkrivOpslag" runat="server" CommandName="SkrivOpslag" Text="Skriv Opslag" CssClass="btn btn-default btn-xs" OnClick="SkrivOpslag_Click" />
                </td>
              </tr>
              <tr runat="server">
                <td runat="server" style="">
                  <asp:DataPager ID="DataPager1" runat="server">
                    <Fields>
                      <asp:NextPreviousPagerField ButtonType="Button" ShowFirstPageButton="True" FirstPageText="Første Side" ShowLastPageButton="True" LastPageText="Sidste Side" PreviousPageText="Forrige" NextPageText="Næste" ButtonCssClass="btn btn-default" />
                    </Fields>
                  </asp:DataPager>
                </td>
              </tr>
            </table>
          </LayoutTemplate>

          <SelectedItemTemplate>
            <tr style="">
              <td>
                <asp:Button ID="DeleteButton" runat="server" CommandName="Delete" Text="Delete" CssClass="btn btn-default btn-xs" />
                <asp:Button ID="EditButton" runat="server" CommandName="Edit" Text="Edit" CssClass="btn btn-default btn-xs" />
              </td>
              <td>
                <asp:Label ID="IndholdLabel" runat="server" Text='<%# Eval("Indhold") %>' />
              </td>
              <td>
                <asp:Label ID="BrugerNavnLabel" runat="server" Text='<%# Eval("BrugerNavn") %>' />
              </td>
              <td>
                <asp:Label ID="PostnummerLabel" runat="server" Text='<%# Eval("Postnummer") %>' />
              </td>
              <td>
                <asp:Label ID="EmneLabel" runat="server" Text='<%# Eval("Emne") %>' />
              </td>
            </tr>
          </SelectedItemTemplate>
        </asp:ListView>
      </center>

      <asp:SqlDataSource ID="SqlDataSource1" runat="server" EnableViewState="True" ConnectionString="<%$ ConnectionStrings:foradbConnectionString %>" DeleteCommand="DELETE FROM [testOpslagstabel] WHERE [OpslagsID] = @OpslagsID" InsertCommand="INSERT INTO [testOpslagstabel] ([Indhold], [DatoTid], [Reference], [BrugerNavn], [Emne], [Postnummer]) VALUES (@Indhold, GetDate(), @Reference, 'testuser', @Emne, @Postnummer)"
      SelectCommand="SELECT * FROM [testOpslagstabel] WHERE ([Postnummer] = @Postnummer)" UpdateCommand="UPDATE [testOpslagstabel] SET [Indhold] = @Indhold, [DatoTid] = @DatoTid, [Reference] = @Reference, [BrugerNavn] = 'testuser', [Postnummer] = @Postnummer, [Emne] = @Emne WHERE [OpslagsID] = @OpslagsID"
      InsertCommandType="Text">
        <DeleteParameters>
          <asp:Parameter Name="OpslagsID" Type="Int32" />
        </DeleteParameters>
        <InsertParameters>
          <asp:Parameter Name="Indhold" Type="String" />
          <asp:Parameter Name="DatoTid" Type="DateTime" />
          <asp:Parameter Name="Reference" Type="Int32" />
          <asp:Parameter Name="BrugerNavn" Type="String" />
          <asp:QueryStringParameter Name="Postnummer" QueryStringField="Postnummer" Type="Int32" />
          <asp:Parameter Name="Emne" Type="String" />
        </InsertParameters>
        <SelectParameters>
          <asp:QueryStringParameter Name="Postnummer" QueryStringField="Postnummer" Type="Int32" />
        </SelectParameters>
        <UpdateParameters>
          <asp:Parameter Name="Indhold" Type="String" />
          <asp:Parameter Name="DatoTid" Type="DateTime" />
          <asp:Parameter Name="Reference" Type="Int32" />
          <asp:Parameter Name="BrugerNavn" Type="String" />
          <asp:QueryStringParameter Name="Postnummer" QueryStringField="Postnummer" Type="Int32" />
          <asp:Parameter Name="Emne" Type="String" />
          <asp:Parameter Name="OpslagsID" Type="Int32" />
        </UpdateParameters>
      </asp:SqlDataSource>
    </asp:Panel>
</asp:Content>

Just to make everything more clear I'm updating the post with the full code in my code behind the aspx. Also if it makes the understanding better, I'm trying to create a forum.

using System;
using System.Configuration;
using System.Data.SqlClient;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace initial.site
{        
    public partial class forum_front : System.Web.UI.Page
    {
        string qbynavn;
        object objbynavn;

        // Makes the SQL connection string
        String CS = ConfigurationManager.ConnectionStrings["FORADB"].ConnectionString;

        protected void Page_Load(object sender, EventArgs e)
        {    
            string qpostnr = Request.QueryString["Postnummer"];
            if (qpostnr != null)
            {
                try
                {
                    using (SqlConnection con = new SqlConnection(CS))
                    {
                        // specifies the command to check for zipcode
                        SqlCommand cmd = new SqlCommand("SELECT Bynavn FROM Postnummertabel WHERE Postnr = " + qpostnr, con);
                        // Opens the connection
                        con.Open();

                        objbynavn = cmd.ExecuteScalar();
                        qbynavn = objbynavn.ToString();

                        ForumOverskrift.Text = " Velkommen til " + qbynavn;
                    }
                }
                catch (Exception ex)
                {
                    Response.Write("Der opstod en fejl! " + ex.Message);
                }
            }
            else
            {
                ForumOverskrift.Text = " Velkommen!";
            }
         }

        public void AnswerButton_Click(object sender, EventArgs e)
        {
            // Tries to bind the sender to the right button.
            Button originator = sender as Button;

            // Checks if it has been found
            if (originator != null)
            {
                // Goes throug the control hierachy to find the right item.
                var parentItem = originator.Parent as ListViewItem;
                if (parentItem != null
                     && parentItem.ItemType == ListViewItemType.DataItem)
                {
                    // Binds the textbox and button to variables
                    var textBox = parentItem.FindControl("AnswerTextBox") as TextBox;
                    var btn = parentItem.FindControl("AnswerButton") as Button;

                    if (textBox != null)
                    {
                        // Changes the textbox to being visible and changes the buttons text.
                        if (textBox.Visible == false)
                        {
                            textBox.Visible = true;
                            btn.Text = "Fortryd";
                        }
                        // Changes the textbox to invisible and changes the buttons text.
                        else if (textBox.Visible == true)
                        {
                            textBox.Visible = false;
                            btn.Text = "Svar";
                        }
                    }
                }
            }
        }

        // Makes the Skriv Opslag field either visible or invisible
        protected void SkrivOpslag_Click(object sender, EventArgs e)
        {
            if (ListView1.InsertItem.Visible == true)
            {
                // Makes the Skriv Opslag field invisible
                ListView1.InsertItem.Visible = false;

                // Changes the buttons name to Skriv Opslag
                Button btn = (Button) ListView1.FindControl("SkrivOpslag");
                btn.Text = "Skriv Opslag";
            }
            else if (ListView1.InsertItem.Visible == false)
            {
                // Makes the Skriv Opslag field visible
                ListView1.InsertItem.Visible = true;

                // Changes the Buttons name to Skriv Opslag
                Button btn = (Button)ListView1.FindControl("SkrivOpslag");
                btn.Text = "Fortryd";
            }
        }

        protected void TilForsiden_Click(object serder, EventArgs e)
        {
            Response.Redirect("~/welcomepage.aspx");
        }

        protected void ListView1_ItemDeleting(object sender, ListViewDeleteEventArgs e)
        {
           ClientScript.RegisterStartupScript(GetType(), "hwa", "deletealert();", true);

           //e.Cancel = true;

            //Response.Write("<script>deletealert();</script>");
            //ScriptManager.RegisterClientScriptBlock(this, GetType(), "mykey", "deletealert();", true);
        }
    }
}

Answer 1

First you must understand that you can not mix server side code then client side code and then again server code in one go as you are currently doing in ItemDeleting event. All client side code will fire only when the page PostBacks after completing the server side code execution.

Now, with regard to your use of plugin. Have you returned anything from the swal function?

Lets try to do it the old way using your first method OnClientClick="return confirm('are you sure')". Modify it to OnClientClick="return deletealert();". Now in JavaScript return true/false in your deletealert function (focus on comments in CAPITALS)

... YOUR OTHER CODE IN DELETEALERT
function (isConfirm) {
    if (isConfirm) {
        swal("Deleted!", "Your imaginary file has been deleted.", "success");
        //RETURN TRUE TO EXECUTE SERVER CODE
        return true;
    } else {
        swal("Cancelled", "Your imaginary file is safe :)", "error");
        //RETURN FALSE TO SKIP SERVER CODE
        return false;
    }
});
... YOUR OTHER CODE

Update:

The working of SweetAlert is somewhat different from a regular alert. It does shows a modal window but does not prevent any action initiated by the user such as submit, link click. So the workaround is to store the href of the link in a var, show SweetAlert and then use eval to resume that link.

function deletealert(ctl, event) {
    // STORE HREF ATTRIBUTE OF LINK CTL (THIS) BUTTON
    var defaultAction = $(ctl).prop("href");
    // CANCEL DEFAULT LINK BEHAVIOUR
    event.preventDefault();
    swal({
        title: "Are you sure?",
        text: "You will not be able to recover this imaginary   file!",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "Yes, delete it!",
        cancelButtonText: "No, cancel plx!",
        closeOnConfirm: false,
        closeOnCancel: false
    },
    function (isConfirm) {
        if (isConfirm) {
            swal({ title: "Deleted!", text: "Your imaginary file has been deleted.", type: "success", confirmButtonText: "OK!", closeOnConfirm: false },
            function () {
                // RESUME THE DEFAULT LINK ACTION
                window.location.href = defaultAction;
                return true;
            });
        } else {
            swal("Cancelled", "Your imaginary file is safe :)", "error");
            return false;
        }
    });
}

I have replaced the asp:Button with asp:LinkButton just for easy handling of preventDefault and then resuming the operation.

<asp:LinkButton OnClientClick="return deletealert(this, event);" ID="DeleteButton" runat="server" CommandName="Delete" Text="Slet" CssClass="btn btn-default btn-xs" Visible='<%# (string)Eval("BrugerNavn") == "testuser" ? true : false %>' />

Only one small glitch needs to be tackled is when the user finally clicks the ConfirmButton the final success message is displayed but at the same time the default action is also executed resulting in a postback. Updated to postback after final success message and FireFox update.