2024年8月16日 星期五

[研究]ASP.NET, WebForm, SweetAlert 能按下 OK 按鈕後，跳轉到某網頁

[研究]ASP.NET, WebForm, SweetAlert 能按下 OK 按鈕後，跳轉到某網頁

2024-08-12

環境：Visual Studio 2022 + ASP.NET + WebForm + Web Application + C# + SQL Server 2019 + SQL Server Management Studio (SSMS) 19

********************************************************************************

ASP.NET, WebForm, SweetAlert 能按下 OK 按鈕後，跳轉到某網頁

Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1.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>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script type="text/javascript">
    function showAlertAndRedirect() {
        Swal.fire({
            title: '操作成功!',
            text: '即將跳轉到下一頁...',
            icon: 'success',
            confirmButtonText: 'OK'
        }).then((result) => {
            if (result.isConfirmed) {
                window.location.href = 'YourTargetPage.aspx'; // 這裡替換為你要跳轉的頁面
            }
        });
    }
</script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
        </div>
    </form>
</body>
</html>

Default.aspx.cs

using System;
using System.Web.UI;

namespace WebApplication1
{
    public partial class Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void Button1_Click(object sender, EventArgs e)
        {
            ScriptManager.RegisterStartupScript(this, GetType(), "alert", "showAlertAndRedirect();", true);
        }
    }
}



**********

或

Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1.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>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script type="text/javascript">
function successalert() {
    swal({
        title: '成功！',
        text: '執行成功',
        type: 'success',
        confirmButtonText: 'OK'
    }).then((result) => {
        if (result.isConfirmed) {
            // 跳轉到指定的網址
            window.location.href = '/your-relative-path';
        }
    });
}

</script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
        </div>
    </form>
</body>
</html>

Default.aspx.cs

ScriptManager.RegisterStartupScript(this, GetType(), "Popup", "successalert();", true);

**********

Swal.fire 和 swal 差別 ?

ChatGPT 說：

Swal.fire 和 swal 是兩個不同的函數名稱，分別屬於不同版本的 SweetAlert 函數庫。以下是它們的主要差別：

1. swal (SweetAlert 1.x)

  • 版本: swal 是 SweetAlert 1.x 版本中使用的函數名稱。
  • 功能: SweetAlert 1.x 提供了一個簡單的介面，用於顯示基本的提示框。
  • 語法: swal 直接呼叫即可顯示一個提示框，並且不需要太多配置。
  • 例如：swal("成功！", "執行成功", "success");

2. Swal.fire (SweetAlert2)

  • 版本: Swal.fire 是 SweetAlert2（也稱為 SweetAlert2 或 Swal2）版本中使用的函數名稱。
  • 功能: SweetAlert2 是對原版的完全重寫，增加了更多的功能和靈活性，例如鏈式操作（promises），自訂內容，更多的提示框類型，等等。
  • 語法: Swal.fire 提供了一個更強大的 API，可以接受多種選項，允許開發者更精確地定制提示框的行為和外觀。
  • 例如：

Swal.fire({

    title: '成功！',

    text: '執行成功',

    icon: 'success',

    confirmButtonText: 'OK'

});

3. 使用上的主要差異

  • 靈活性與功能: Swal.fire 在功能上比 swal 更加豐富，支持更多的選項和回調函數，並且可以更靈活地配置提示框的外觀和行為。
  • 語法變更: 在 SweetAlert2 中，Swal.fire 用於替代 swal，並且 API 也稍有不同。這意味著從 SweetAlert 1.x 升級到 SweetAlert2 可能需要對部分程式碼進行調整。

總結

  • 如果你使用的是舊版 SweetAlert (1.x)，你會使用 swal 函數。
  • 如果你使用的是新版 SweetAlert2，你應該使用 Swal.fire 函數。這個版本的函數更加強大且靈活，並且是目前建議使用的版本。

(完)

相關

[研究]ASP.NET, WebForm, SweetAlert 能按下 OK 按鈕後，跳轉到某網頁
https://shaurong.blogspot.com/2024/08/aspnet-webform-sweetalert-ok.html

[研究] [C#] [ASP.NET] [JavaScript] 彈出視窗 (對話盒)
http://shaurong.blogspot.com/2020/04/c-aspnet-javascript.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


ASP.NET 開新視窗四部曲
https://dotblogs.com.tw/hatelove/archive/2009/10/28/11325.aspx

http://lanfar.pixnet.net/blog/post/40706881

LinkButton 另開新視窗的方法
http://jimmy0222.pixnet.net/blog/post/36045311-linkbutton-%E5%8F%A6%E9%96%8B%E6%96%B0%E8%A6%96%E7%AA%97%E7%9A%84%E6%96%B9%E6%B3%95

showModalDialog與IE快顯封鎖
http://blog.darkthread.net/post-2011-07-12-showmodaldialog-and-popup-blocker.aspx

About the Pop-up Blocker
https://msdn.microsoft.com/en-us/library/ms537632(v=vs.85).aspx

<asp:LinkButton ID="LinkButton_View" runat="server" CausesValidation="False" Text="檢視" CssClass="btn btn-primary btn-xs" OnClientClick="<script>window.open('<%# String.Format(&quot;~/ManageJA/JAView.aspx?id={0}&quot;, Eval(&quot;Id&quot;)) %>','_blank','height=700,width=1000,status=yes,toolbar=no,menubar=no,location=no');</script>"></asp:LinkButton>

解決開視窗會變開在頁籤
https://dotblogs.com.tw/kim/2011/07/11/_blank

[C#]在 .Net 上實現 Win Form 中 MessageBox 的確認視窗
2009-10-09
https://dotblogs.com.tw/willy0080/2009/10/09/10984

ASP.NET中彈出訊息框的幾種常見方法
https://codertw.com/%E5%89%8D%E7%AB%AF%E9%96%8B%E7%99%BC/221190/

ASP.NET中提交按鈕彈出訊息框，頁面不空白
https://www.itread01.com/p/627079.html

張貼者： 於
標籤： , , , , , ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)