2017年6月23日 星期五

[研究] [C#] [ASP.NET] 用 SweetAlert + Button 作 送出確認 提示對話盒

[研究] [C#] [ASP.NET] 用 SweetAlert + Button 作 送出確認 提示對話盒

2017-06-23

Visual Studio 2017
請用 Nuget 安裝 SweetAlert.Base 和 jQuery

[研究] ASP.NET + SweetAlert 安裝 (NuGet)與試用
http://shaurong.blogspot.com/2017/06/aspnet-sweetalert-nuget.html

[研究][C#][ASP.NET] jQuery 3.1.1 安裝(NuGet)
http://shaurong.blogspot.com/2017/01/caspnet-jquery-311-nuget.html

參考這篇

SweetAlert confirmation dialog with asp.net listview delete?
https://stackoverflow.com/questions/33522843/sweetalert-confirmation-dialog-with-asp-net-listview-delete

下面 LinkButton1 會跳出傳統的對話盒視窗,LinkButton2 跳出 SweetAlert 版的。


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="SweetAlertTest.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="Scripts/jquery-3.1.1.min.js"></script>
    <script src="Scripts/sweetalert.min.js"></script>
    <link href="Styles/sweetalert.css" rel="stylesheet" />
     <script type="text/javascript">
        function deletealert(ctl) {
            // STORE HREF ATTRIBUTE OF LINK CTL (THIS) BUTTON
            var defaultAction = $(ctl).prop("href");
            // CANCEL DEFAULT LINK BEHAVIOUR
            event.preventDefault();
            swal({
                title: "警告",
                text: "刪除確認?",
                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>
    <script type="text/javascript">
        function sendalert(ctl) {
            // STORE HREF ATTRIBUTE OF LINK CTL (THIS) BUTTON
            //var defaultAction = $(ctl).prop("href");
            //var defaultAction = $(ctl).click();
            // CANCEL DEFAULT LINK BEHAVIOUR
            event.preventDefault();
            swal({
                title: "警告",
                text: "確認送出?",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "是",
                cancelButtonText: "否",
                closeOnConfirm: true,
                closeOnCancel: true
            }, function (isConfirm) {
                if (isConfirm) {
                    //swal("Deleted!", "Your imaginary file has been deleted.", "success");
                    // RESUME THE DEFAULT LINK ACTION
                    //eval(defaultAction);
                    $(ctl).click();
                    return true;
                } else {
                    //swal("Cancelled", "Your imaginary file is safe :)", "error");
                    return false;
                }
            });
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
             <asp:LinkButton ID="LinkButton2"  runat="server" OnClientClick='return deletealert(this, event);' OnClick="LinkButton1_Click" PostBackUrl="~/WebForm1.aspx">LinkButton</asp:LinkButton><br />
            <asp:LinkButton ID="LinkButton3"  runat="server" OnClientClick='return deletealert(this, event);' OnClick="LinkButton1_Click" >LinkButton</asp:LinkButton><br />
            <asp:Button ID="Button1" runat="server"  OnClientClick='return sendalert(this, event);' Text="Button" OnClick="Button1_Click" />
             <br />
             <br />
             <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
        </div>
    </form>
</body>
</html>



(完)

相關

How to call sever side methods on click of confirm button using Sweet Alert in ASP.Net
http://www.aspforums.net/Threads/483692/How-to-call-sever-side-methods-on-click-of-confirm-button-using-Sweet-Alert-in-ASPNet/

相關

[研究] [C#] [ASP.NET] [JavaScript] 彈出視窗
http://shaurong.blogspot.com/2017/06/c-aspnet.html

[研究] ASP.NET + SweetAlert 安裝 (NuGet)與試用
http://shaurong.blogspot.com/2017/06/aspnet-sweetalert-nuget.html

[研究] [C#] [ASP.NET] 用 SweetAlert + Button 作 送出確認 提示對話盒
http://shaurong.blogspot.com/2017/06/c-aspnet-sweetalert_23.html

[研究] [C#] [ASP.NET] 用 SweetAlert + LinkButton 作 刪除確認 提示對話盒
http://shaurong.blogspot.tw/2017/06/c-aspnet-sweetalert.html

沒有留言:

張貼留言