關於.NET前後臺提示框的那點事

来源:http://www.cnblogs.com/ShadowFiend/archive/2016/03/15/5112385.html
-Advertisement-
Play Games

前言 關於提示框，或多或少都用到過，提示框常見方式兩種：js原生alert() 和 div模擬彈層；下麵以一個常見的需求業務場景來展現提示框的那點事； 正文內容 客戶：需求方； 小白：實現方（全權負責）； 小菜：技術逼格高小白一點的小菜雞； 場景模擬（以簽到為例，下文不會涉及積分計算或者積分累計情況


前言

關於提示框，或多或少都用到過，提示框常見方式兩種：js原生alert() 和 div模擬彈層；下麵以一個常見的需求業務場景來展現提示框的那點事；

正文內容

客戶：需求方；

小白：實現方（全權負責）；

小菜：技術逼格高小白一點的小菜雞；

場景模擬（以簽到為例，下文不會涉及積分計算或者積分累計情況，只單純研究本文重點：提示框）

客戶：我需要一個功能，點擊一個按鈕，進行簽到，簽到成功或失敗進行提示；

小白：好的，大概需要XX的時間；

過了XX時間，版本Example-01順利出爐，小白高興的拿給客戶演示：

效果如下：

001

 

前臺代碼：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="test" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        body,div{ background-color: #CCC;margin: 0;padding: 0;}
        .container{ width: 1000px; margin: 100px auto; padding: 0; }
        .btn-test{ font-size: 30px;cursor: pointer; width: 250px;height: 100px;}
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div class="container">
        <asp:Button runat="server" ID="btn_Test" CssClass="btn-test" OnClick="btn_Test_Click" Text="簽到" />
    </div>
    </form>
</body>
</html>

後臺代碼：

protected void btn_Test_Click(object sender, EventArgs e)
{
        var isSuccess = (DateTime.Now.Millisecond % 500) > 250 ? true : false;
        if (isSuccess)
            Response.Write("<script>alert('成功!');</script>");
        else
            Response.Write("<script>alert('失敗!');</script>");
}

 

客戶：功能倒是看見了，但是為什麼彈出提示框後面的內容和顏色都沒了，成了空白了呢？

小白：額，這個。。。等著我再看看這個問題，然後再讓您看看效果。

於是小白度娘修改了一下代碼，版本Example-02，演示效果如下：

002

前臺代碼未變，後臺代碼如下：

protected void btn_Test_Click(object sender, EventArgs e)
{
        var isSuccess = (DateTime.Now.Millisecond % 500) > 250 ? true : false;
        if (isSuccess)
            Page.ClientScript.RegisterStartupScript(this.GetType(), "", "<script>alert('簽到成功!');</script>");
        else
            Page.ClientScript.RegisterStartupScript(this.GetType(), "", "<script>alert('簽到失敗!');</script>");
}

 

客戶：嗯，現在比之前好多了，不過現在我想改點東西，就是點擊按鈕，彈出提示框，點擊確定，然後過幾秒之後，再提示另一個提示框XXX。

小白：額，這個不符合用戶操作習慣，這個有XX缺點，balabala。。。

客戶：哦，這個沒事，這樣做的話，有XX優點，而且balabala。。。你這樣做就行了。

小白：額，好吧。

於是經過XX時間，在小度娘娘的幫助下，推出了第三個版本Example-03，這次小白請小菜看了一下，順便看了一下代碼，這次效果如下：

004

前臺未變，後臺代碼如下：

protected void btn_Test_Click(object sender, EventArgs e)
{
        var isSuccess = (DateTime.Now.Millisecond % 500) > 250 ? true : false;
        if (isSuccess)
            Page.ClientScript.RegisterStartupScript(this.GetType(), "", "<script>ShowMsg(); function ShowMsg() { alert('成功!');setTimeout(ShowOtherMsg(), 2000);} function ShowOtherMsg() { alert('你為何又彈一次視窗，傻逼?不要罵我,因為這是客戶要求的!!!!');}</script>");
        else
            Page.ClientScript.RegisterStartupScript(this.GetType(), "", "<script>ShowMsg(); function ShowMsg() { alert('失敗!');setTimeout(ShowOtherMsg(), 2000);} function ShowOtherMsg() { alert('你為何又彈一次視窗，傻逼?不要罵我,因為這是客戶要求的!!!!');}</script>");
}

小菜：前臺效果湊合，但是為什麼加兩次彈窗？

小白：客戶要求的。

小菜：。。。。。。。你後臺代碼是寫的一坨翔麽？

小白：翔是啥？

小菜：額，沒什麼。你這代碼前後臺混編功力不錯，如果js有100行，1000行，也打算寫在後臺麽？

小白：這是後臺定義彈窗，不寫在後臺寫在哪？

小菜：。。。。。。。你把js定義函數放在前臺，後臺直接調用，這樣代碼無論是調試還是易讀性都會好些。

小白：哦，也是，我改下代碼。

小白經過一番努力終於把代碼修改一個版本，版本為Example-04，效果還是Example-03效果，前後臺代碼如下：

前臺：

<script type="text/javascript">

        function ShowMsg(msg) {
            alert(msg);
            setTimeout("ShowOtherMsg()", 2000);
        }

        function ShowOtherMsg() {
            alert('你為何又彈一次視窗，傻逼?不要罵我,因為這是客戶要求的!!!!');
        }

</script>

後臺：

protected void btn_Test_Click(object sender, EventArgs e)
{
        var isSuccess = (DateTime.Now.Millisecond % 500) > 250 ? true : false;
        if (isSuccess)
            Page.ClientScript.RegisterStartupScript(this.GetType(), "", "<script>ShowMsg('成功');</script>");
        else
            Page.ClientScript.RegisterStartupScript(this.GetType(), "", "<script>ShowMsg('失敗');</script>");
}

小菜看了下代碼，悟性挺高麽，還行，就這樣，小白拿著改好的代碼，又給客戶演示了一遍（如Example-03效果）；

客戶：效果是實現了，不過我又發現一個問題，為什麼我刷新頁面，會提示這東西呢？

006

小白：哦，這是因為頁面窗體防止表單重覆提交的提示，balabala。。。

客戶：那去掉這東西，看著太彆扭了。

小白：哦，好吧。

小白想了想，出現提示框是由於form表單的驗證機制，那去掉不就行了，但是去掉之後，那些button用的都是伺服器控制項，就不能正常工作了，那該如何是好？那乾脆換成純靜態頁面+ajax+一般處理程式吧；就這樣，小白努力奮戰了一段時間，終於千呼萬喚始出來，版本Example-05出來了，效果如下：

007

完整代碼：

<!DOCTYPE html >
<html>
<head>
    <title></title>
    <style type="text/css">
        body, div { background-color: #CCC; margin: 0;padding: 0;}
        .container{ width: 1000px;margin: 100px auto;padding: 0;}
        .btn-test{font-size: 30px;cursor: pointer; width: 250px;height: 100px;}
    </style>
    <script type="text/javascript">

        function ShowMsg() {
            /*
            * 假設ajax請求成功,並返回如下json；
            */
            var json = '[{"Code":200,"State":"Success","Message":"簽到成功"}]';
            var obj = eval(json);
            alert(obj[0].Message);
            setTimeout("ShowOtherMsg()", 2000);
        }

        function ShowOtherMsg() {
            alert('你為何又彈一次視窗，傻逼?不要罵我,因為這是客戶要求的!!!!');
        }

    </script>
</head>
<body>
    <div class="container">
        <input type="button" class="btn-test" onclick="ShowMsg()" value="簽到" />
    </div>
</body>
</html>

 

客戶：嗯，上次提的問題解決了，但是上面的IE提示框和火狐，谷歌等瀏覽器怎麼不一樣呢？

                                                     火狐效果：                                                                                      

008

                                                               谷歌效果

009

小白：這個提示框是本身語言自帶的，沒有辦法改變，而且瀏覽器有自己的機制，沒辦法改變，balabala。。。

客戶：那這樣不行啊，同一個頁面在不同瀏覽器效果不一樣，用戶體驗不好，這個問題必須解決了。

小白：哦，好吧，我想想如何通過其他辦法實現吧。

小白充分發揮互聯網搬運工作用，在網上找了一個插件，順利解決了瀏覽器之間的彈框差異性，版本Example-06效果如下：

                                                       IE，火狐，谷歌效果

010

代碼如下：

    <script src="jquery-1.8.3.min.js" type="text/javascript"></script>
    <script src="layer/layer.min.js" type="text/javascript"></script>
    <script type="text/javascript">

        function ShowMsg() {
            /*
            * 假設ajax請求成功,並返回如下json；
            */
            var json = '[{"Code":200,"State":"Success","Message":"簽到成功"}]';
            var obj = eval(json);
            layer.alert(obj[0].Message, 6, function (index) {
                layer.close(index);
                setTimeout("ShowOtherMsg()", 2000);
            });
        }

        function ShowOtherMsg() {
            layer.alert('你為何又彈一次視窗，傻逼?不要罵我,因為這是客戶要求的!!!!',0);
        }

    </script>

 

客戶：嗯，這次在各個瀏覽器效果都是一樣的，小伙子不錯，不過，我還是感覺提示框有點單調，能不能改成我說的XX樣子呢？

小白：額，這個。。。

見小白麵露難色，客戶開口了。

客戶：如果你把這個問題解決，後面我們就儘快驗收，同時我給你們領導說好話，給你升職加薪，讓你贏娶白富美(當然這是瞎編的)；儘快完成吧，馬上到項目結束時間了。

小白：。。。。。。好吧，我再想想辦法吧。

小白自己念叨著，既然第三方插件提示框不符合要求，要麼修改第三方提示框的樣式，要麼只能自己寫。對於小白來講，在工期比較緊，第三方插件又不熟，讀源碼浪費時間的前提下，修改第三方插件是不太可能了，只能自己寫了。

於是，經過度娘和其他好友幫助，最終解決了這個難題，心中暗暗發誓，這是最終版本，命名：終極打死不改版本<<LastKilledNotToChangeExample>>，實現效果如下：

　　　　　　　　IE效果圖：

　　　　　　　　　　Firefox 效果圖：

　　　　　　　　　　Chrome 效果圖：

 

源代碼如下：

<!DOCTYPE html >
<html>
<head>
    <title></title>
    <style type="text/css">
        body, div{background-color: #CCC;margin: 0;padding: 0;}
        a{ text-decoration:none;}
        .container{width: 1000px;margin: 100px auto;padding: 0;}
        .btn-test{font-size: 30px;cursor: pointer;width: 250px;height: 100px;}
        .shade_new{width: 100%;height: 100%;background: rgba(0,0,0,0.6);position: fixed;top: 0px;left: 0px;z-index: 1000; display:none;}
        .pop1{background:url(../images/popbg1.png) no-repeat;width:473px; height:272px; position:relative;margin: 200px auto; }
        .close{ width:48px; height:48px; background:url(../images/close.png) no-repeat; display:inline-block; position:absolute; top:-14px; right:-12px; text-indent:-9999px; _font-size:0; _text-indent:0px; +font-size:0; +text-indent:0px;}
        .title1{ text-align:center; font-size:27px; color:#ffc286; padding:90px 0 30px; }
        .pop1box{ text-align:center;}
        .btn-confirm{background:url(../images/btn3.jpg) no-repeat; display:inline-block; text-indent:-9999px;_font-size:0; _text-indent:0px; +font-size:0; +text-indent:0px;width:95px; height:41px; background-position:0 0;position: absolute;left: 178px;bottom:42px; }
    </style>
    <script src="../js/jquery-1.8.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            //簽到
            $(".btn-test").on("click", function () {
                //假設ajax請求成功,並返回如下json；
                var json = eval('[{"Code":200,"State":"Success","Message":"簽到成功"}]');
                ShowMsg(json[0].Message);
            });

            //關閉
            $(".btn-confirm,.close").on("click", function () {
                //關閉
                $(".shade_new").hide();
                //由於原生js的alert是阻塞線程的，所以此處做判斷進行模擬阻塞。---僅僅是為了客戶的一句話“他覺得。。。”
                if ($(".shade_new").css("display") == "none"&&$(".title1").html()==
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • ASP.NET下將規則的Excel導入資料庫
    今天接到新的需求，要求將Excel表格中的數據顯示在頁面上。 我個人分析，首先要將Excel中的數據存到資料庫中，再進行頁面顯示，本人菜鳥級別，以前沒有做過讀取Excel數據，研究了一下（主要是看別人的資料），寫一下實現過程，我想寫幾篇關於Excel的，首先是規則的Excel數據導入，再有就是不規則
  • WPF的重要新概念
    出處：http://www.cnblogs.com/free722/archive/2011/11/12/2238654.html 邏輯樹與可視樹 XAML天生就是用來呈現用戶界面的，這是由於它具有層次化的特性。在WPF中，用戶界面由一個對象樹構建而成，這棵樹叫作邏輯樹。 WPF用戶界面的邏輯樹也並
  • 轉：C#整數三種強制類型轉換int、Convert.ToInt32（）、int.Parse()的區別
    1、int適合簡單數據類型之間的轉換，C#的預設整型是int32(不支持bool型); 2、int.Parse(string sParameter)是個構造函數，參數類型只支持string類型; 3、Convert.ToInt32()適合將Object類型轉換為int型; 4、Convert.ToI
  • C#知識點-反射
    一、開發環境 操作系統：Win7 編譯器：VS2010 .net版本：.net4.0 二、項目結構 三、開發流程 0.編寫實體類 namespace ReflectDemo { public class Bird { public string _id; public string Name { g...
  • C#入門中的必備語法（一）
       首先我們要知道C#語言是一種面向對象的語言由C和C++演變而來，它依賴於.NET Framework。.NET Framework可以提供一個強大的代碼庫供其調用。之所以說C#語言依賴於.NET Framework是由於C#源代碼只有經過編譯器（指VS或VCE）的編譯之後，變成CIL（Comm
  • 【MVC 4】4.MVC 基本工具（Visual Studio 的單元測試、使用Moq）
     作者：[美]Adam Freeman      來源：《精通ASP.NET MVC 4》 3.Visual Studio 的單元測試 有很多.NET單元測試包，其中很多是開源和免費的。本文打算使用 Visual Studio 附帶的內建單元測試支持，但其他一些.NET單元測試包也是可用的。 為了演
  • asp.net signalR 專題—— 第一篇 你需要好好掌握的實時通訊利器
    一：背景 我們知道傳統的http採用的是“拉模型”，也就是每次請求，每次斷開這種短請求模式，這種場景下，client是老大，server就像一個小烏龜任人擺佈， 很顯然，只有一方主動，這事情就沒那麼完美了，所以為了能夠讓server也能主動點,html5就應運而生了，或許大家都知道html5中有兩種
  • WebApi設置SessionState為Required
    代碼如上。是在global中的一個重寫HttpApplication方法，就這麼簡單。 原理就是在管道第九個事件AcquireRequestState之前，require session state.因為第九個事件就準備開始獲取session. 如果你在第九個事件或者第九個事件之後才註冊，那麼一定會
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類