浮雲雅築: [研究][JavaScript][C#][ASP.NET] SweetAlert 安裝 (NuGet)與試用

2017年6月13日星期二

[研究][JavaScript][C#][ASP.NET] SweetAlert 安裝 (NuGet)與試用

[研究][JavaScript][C#][ASP.NET] SweetAlert 安裝 (NuGet)與試用

2017-06-13

Visual Studio 2017 建立一個 WebForm 方案

(下圖) 不要選第一個，選 SweetAlert.Base，注意專案 URL 是
https://t4t5.github.com/sweetalert
或
https://github.com/t4t5/sweetalert
官方網站是
https://sweetalert.js.org/

第一個 SweetAlert 的專案目錄其實是
https://github.com/lipis/bootstrap-sweetalert
它是 SweetAlert for Bootstrap

另外一套 SweetAlert2 目前最新版 v9.10.12，官方網站
https://sweetalert2.github.io/
它和 SweetAlert 作者似乎不同，是不同套件。

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" />
<script src="Scripts/sweetalert.min.js"></script>
<link href="Styles/sweetalert.css" rel="stylesheet" />
<title></title>
<script type="text/javascript">
function successalert() {
swal({
title: 'Congratulations!',
text: 'Your message has been succesfully sent',
type: 'success'
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="Button1" runat="server" Text="Button"
OnClick="Button1_Click" />
</div>
</form>
</body>
</html>

Default.aspx.cs 內容

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

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(), "Popup", "successalert();", true);
}
}
}

執行結果

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

強化改版，訊息內容用參數 msg 傳遞

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" />
<script src="Scripts/sweetalert.min.js"></script>
<link href="Styles/sweetalert.css" rel="stylesheet" />
<title></title>
<script type="text/javascript">
function successalert(msg) {
swal({
title: 'Congratulations!',
text: msg,
type: 'success'
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="Button1" runat="server" Text="Button"
OnClick="Button1_Click" />
</div>
</form>
</body>
</html>

Default.aspx.cs 內容

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

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)
{
string messageText = "文字參數";
ScriptManager.RegisterStartupScript(this, GetType(), "Popup", "successalert('" + messageText + "');", true);
}
}
}

執行結果

(完)

相關

[研究] [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

浮雲雅築

2017年6月13日星期二

[研究][JavaScript][C#][ASP.NET] SweetAlert 安裝 (NuGet)與試用

沒有留言:

張貼留言

2017年6月13日 星期二

[研究][JavaScript][C#][ASP.NET] SweetAlert 安裝 (NuGet)與試用

沒有留言:

張貼留言

2017年6月13日星期二