与asp.net listview删除的SweetAlert确认对话框? [英] SweetAlert confirmation dialog with asp.net listview delete?
问题描述
请帮助我理解这一点.
我创建了一个ListView，显示来自SQL数据库的数据.我已启用插入，编辑和删除功能，并且一切正常.
I have created a ListView, displaying data from a SQL database. I have enabled inserting, editing and deleting and it all works.
我想要什么?
我想使用 SweetAlert 提示用户确认是/否，是否要从ListView中删除条目.
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.
我做了什么?
首先 我尝试使用内置"功能，在其中将OnClientClick="return confirm('are you sure')"添加到<asp:Button/>中，以调用给定ListView条目的删除.奏效了！当我单击是"时，它删除了，没有，它没有删除.除了添加上述内容外，我无需执行其他任何操作. 但是，这不是我想要的.我想显示鸽友SweetAlert，问题就从这里开始.
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.
第二 我以为我可以简单地创建SweetAlert脚本并从按钮中调用其函数名称.但是，这样做确实会打开SweetAlert，但在我什至没有机会单击yes和no之前，它已经删除了该项目并关闭了该框.
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>
现在我知道上面没有任何功能，但是我什至没有机会改用是"和不是"，它本身关闭了脚本.然后我发现可以通过在删除<asp:Button />上设置CausesValidation=false来停止删除，但是什么也没发生.
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.
第三 我认为我有突破，但是我不知道如何完成.我发现在ListView上有一个名为 ItemDeleting 的事件.在执行删除操作之前，会触发此事件.我对其进行了测试，并且可以正常工作.
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;
}
如果我使用e.Cancel = true;，则不会删除该项目，并且操作将被取消.如果使用e.Cancel = false;，则该项目将被删除.因此，我想我可能必须将上述功能与上述jQuery结合在一起.我不知道是否可以将jQuery放在受保护的void中并从那里使用它?
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?
已更新，其中包括来自haraman的建议解决方案 .以下是整个.aspx页面:
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>
只是为了使所有内容都更清楚，我使用aspx后面的代码中的完整代码更新了帖子.另外，如果它能使您更好地理解，我会尝试创建一个论坛.
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);
}
}
}
推荐答案
首先，您必须了解不能像现在在ItemDeleting中那样一次性混合服务器端代码，客户端代码以及服务器代码.事件.只有在完成服务器端代码执行后，页面PostBacks才会触发所有客户端代码.
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.
现在，关于您使用插件.您从swal函数返回了什么东西吗?
Now, with regard to your use of plugin. Have you returned anything from the swal function?
让我们尝试使用第一种方法OnClientClick="return confirm('are you sure')"来以旧的方式进行操作.将其修改为OnClientClick="return deletealert();".现在，在deletealert函数中的JavaScript return true/false中(关注大写的注释)
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
更新:
SweetAlert的工作方式与常规alert有所不同.它的确显示了一个模式窗口，但不阻止用户启动任何操作，例如提交，链接单击.因此，解决方法是将链接的href存储在var中，显示SweetAlert，然后使用eval恢复该链接.
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;
}
});
}
我已将asp:Button替换为asp:LinkButton，只是为了方便处理preventDefault，然后恢复操作.
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 %>' />
仅需解决一个小故障，即当用户最终单击已更新为在最终ConfirmButton时，将显示最终的success消息，但同时也会执行默认操作，从而导致postback. success消息和FireFox更新后回发.
Only one small glitch needs to be tackled is when the user finally clicks the Updated to postback after final ConfirmButton the final success message is displayed but at the same time the default action is also executed resulting in a postback.success message and FireFox update.
这篇关于与asp.net listview删除的SweetAlert确认对话框?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
