SweetAlert 确认对话框与 asp.net listview 删除？

Question

请帮我理解这一点。

我创建了一个 ListView，显示来自 SQL 数据库的数据。我启用了插入、编辑和删除功能，一切正常。

我想要什么？

我想用来SweetAlert提示用户确认是/否是否要从 ListView 中删除条目。

我做了什么？

首先，我尝试使用“内置”功能，我添加OnClientClick="return confirm('are you sure')"到<asp:Button/>调用给定 ListView 条目的删除。那行得通！当我点击是它删除，没有它没有。除了添加上述内容之外，我无需执行任何其他操作。但这不是我想要的。我想要SweetAlert显示鸽友，问题就在这里开始了。

其次，我认为我可以简单地创建SweetAlert脚本并从按钮调用它的函数名称。但是，这样做时，它确实打开了，SweetAlert但在我什至有机会单击是和否之前，它已经删除了该项目并关闭了框。

<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>

现在我知道上面没有任何功能，但我什至没有机会转向是和否，它自己关闭了脚本。后来我发现，我可以通过设置停止删除CausesValidation=false的删除<asp:Button />，但随后没有动静都没有。

第三，我觉得我有突破，但我不知道如何完成。我发现在 ListView 上，有一个名为ItemDeleting的事件。此事件在执行删除之前触发。我测试了它，它有效。

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

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

如果我使用e.Cancel = true;则该项目不会被删除并且操作被取消。如果我使用，e.Cancel = false;则该项目将被删除。所以我想我可能必须将该功能与上述 jQuery 结合起来。我不知道我是否可以将 jQuery 放入受保护的 void 中并从那里使用它？

更新以包含来自 haraman 的建议解决方案这里也是整个 .aspx 页面：

<%@ 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>

为了让一切更清楚，我正在使用 aspx 后面的代码中的完整代码更新帖子。此外，如果它使理解更好，我正在尝试创建一个论坛。

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 

    

Answer 1

首先，您必须明白，您不能像当前在ItemDeleting事件中所做的那样一次性混合服务器端代码、客户端代码和服务器端代码。只有在完成服务器端代码执行后页面回发时才会触发所有客户端代码。

现在，关于您对插件的使用。你有没有从swal函数中返回任何东西？

让我们尝试使用您的第一种方法以旧方式进行操作OnClientClick="return confirm('are you sure')"。将其修改为OnClientClick="return deletealert();". 现在在return true/false您的deletealert函数中使用 JavaScript （关注大写中的注释）

... 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

更新：

的工作方式与SweetAlert常规alert. 它确实显示了一个模态窗口，但不会阻止用户发起的任何操作，例如提交、链接单击。因此，解决方法是href将链接的存储在var, show 中SweetAlert，然后用于eval恢复该链接。

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;
        }
    });
}

我已将 替换为asp:Button，asp:LinkButton只是为了便于处理preventDefault然后恢复操作。

<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 %>' />

只需要解决一个小故障是当用户最终单击时会显示ConfirmButton最终success消息，但同时也会执行默认操作，导致postback. 在最终success消息和 FireFox 更新后更新为回发。