Диалоговое окно подтверждения SweetAlert с asp.net listview delete?

Question

Пожалуйста, помогите мне понять это.

Я создал ListView, отображающий данные из базы данных SQL. Я разрешил вставлять, редактировать и удалять, и все это работает.

Что мне нужно?

Я хочу использовать SweetAlert, чтобы предложить пользователю подтвердить да/нет, хотят ли они, чтобы удалить запись из ListView или нет.

Что я наделал?

Первый Я попытался с помощью «встроенной» функции, где я добавил OnClientClick="return confirm('are you sure')" к <asp:Button/> вызова удаления данной записи ListView. Это сработало! Когда я нажал кнопку «да», он удалился, и нет. Мне не нужно было ничего делать, кроме как добавить выше. Но Это не то, что я хочу. Я хочу показать fancier 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 внутри защищенной пустоты и работать с ней оттуда?

Обновлено включить предложенное решение от 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 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

Сначала вы должны понимать, что вы не можете смешивать код на стороне сервера, а затем код на стороне клиента, а затем снова код сервера за один раз, как вы сейчас делаете в событии ItemDeleting. Все клиентские коды будут срабатывать только после отправки PostBacks после завершения выполнения кода на стороне сервера.

Теперь, в отношении вашего использования плагина. Вы вернули что-нибудь из функции swal?

Давайте попробуем сделать это по-старому, используя ваш первый метод OnClientClick="return confirm('are you sure')". Измените его на OnClientClick="return deletealert();". Теперь в JavaScript return true/false в вашей deletealert функции (фокус на комментариях в БУКВАХ)

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

Работа SweetAlert несколько отличается от обычного alert. Он показывает модальное окно, но не предотвращает никаких действий, инициированных пользователем, таких как отправка, ссылка на клик. Поэтому обходным путем является сохранение href ссылки в var, показать 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.

Answer 2

Вы должны подсказать, прежде чем попасть на сервер; так прикрепляются к нажатию кнопки удаления с помощью JQuery:

$("#idofplaceholderwrappingtheitems").find("[id$='DeleteButton']").on("click", function(e) { 
    //show confirmation here; 
}); 

, показывающие Javascript в ItemDeleting слишком поздно в этом процессе.