前言

上一篇「讓 ASP.NET 也可以使用 MsgBox 方法」文章中提到如何封裝 JavaScript 的 alert 方法,另一個常使用在用戶端處理「詢問訊息」的就是 JavaScript 的 confirm 方法,在此篇文章我們將撰寫自用的 Confirm 方法,使頁面的程式碼儘量不要直接去撰寫 JavaScript 程式碼,以增加系統的維護性。

程式實作

我們將使用「撰寫自用的 ScriptManager 來管理用戶端指令碼」文中提及的 TBScriptManager 類別為基礎,在 TBScriptManager 類別新增處理「詢問訊息」會使用到相關方法。我們在 TBScriptManager 類別新增二個 GetConfirmScript 多載方法,用以取得詢問訊息相關的 JavaScript 程式碼;另新增 Confirm 方法來直接註冊詢問訊息的用戶端指令碼,以下將以實例說明這三個方法的使用時機及方式。

 

''' <summary>
''' 用戶端指令碼管理。
''' </summary>
Public Class TBScriptManager

    ''' <summary>
    ''' 處理訊息文字的跳脫字元。
    ''' </summary>
    ''' <param name="Message">訊息文字。</param>
    Private Function ParserMessage(ByVal Message As String) As String
        Dim sMessage As String

        sMessage = Strings.Replace(Message, "'", "\'") '處理單引號
        sMessage = Strings.Replace(sMessage, vbNewLine, "\n") '處理換行
        Return sMessage
    End Function

    ''' <summary>
    ''' 取得訊問視窗的用戶端指令碼。
    ''' </summary>
    ''' <param name="Message">訊息文字。</param>
    Public Overloads Function GetConfirmScript(ByVal Message As String) As String
        Dim sMessage As String
        Dim sScript As String

        sMessage = ParserMessage(Message)
        sScript = String.Format("if (confirm('{0}')==false) {{return false;}}", sMessage)
        Return sScript
    End Function

    ''' <summary>
    ''' 取得訊問視窗的用戶端指令碼。
    ''' </summary>
    ''' <param name="Message">訊息文字。</param>
    ''' <param name="TrueScript">回應 true 時要執行的用戶端指令碼。</param>
    ''' <param name="FalseScript">回應 false 時要執行的用戶端指令碼。</param>
    Public Overloads Function GetConfirmScript(ByVal Message As String, _
        ByVal TrueScript As String, ByVal FalseScript As String) As String
        Dim sMessage As String
        Dim sScript As String

        sMessage = ParserMessage(Message)
        sScript = String.Format("if (confirm('{0}')){{ {1} }} else {{ {2} }}", sMessage, TrueScript, FalseScript)
        Return sScript
    End Function

    ''' <summary>
    ''' 詢問視窗。
    ''' </summary>
    ''' <param name="Message">訊息文字。</param>
    ''' <param name="TrueScript">回應 true 時要執行的用戶端指令碼。</param>
    ''' <param name="FalseScript">回應 false 時要執行的用戶端指令碼。</param>
    Public Sub Confirm(ByVal Message As String, ByVal TrueScript As String, ByVal FalseScript As String)
        Dim sScript As String

        sScript = GetConfirmScript(Message, TrueScript, FalseScript)
        Me.RegisterStartupScript("Confirm", sScript)
    End Sub

End Class

 

 

案例一:按鈕加上詢問訊息,按「確定」才會引發按鈕的 Click 事件

按鈕加上詢息訊息是常使用到的案例,例如按下刪除鈕時,先詢問用戶是否確定刪除資料,當按「確定」時才會真正去執行刪除動作。我們可以在 Page Load 事件中,去設定 Button.OnClientClick 屬性,加入詢問訊息的用戶端指令碼。

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Button1.OnClientClick = Me.BeeScript.GetConfirmScript("確定刪除此筆資料嗎?")
    End Sub

 

案例二:純用戶端的詢問訊息

詢問訊息只是在用戶端執行,並不會產生 PostBack。

 

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Dim sScript As String

        sScript = Me.BeeScript.GetConfirmScript("純用戶端的詢問訊息?", "alert('按了確定')", "alert('按了取消')")
        HyperLink1.Attributes("onclick") = sScript
    End Sub

 

 

案例三:先執行伺服端程式再彈出詢問訊息,依用戶端回應再接續執行

例如有登打請假單儲存時,執行儲存完畢要彈出一個是否送審詢問訊息。在 WinForm 撰寫這個程式碼非常單純,只要在儲存後彈出詢問訊息,等待用戶回應接續執行後面的程式碼即可。可是在 WebForm 要撰寫相同的功能就有點麻煩了,因為整個程式的流程是在伺服端及用戶端交互運作。

請假單儲存(伺服端) -> 彈出詢問訊息(用戶端) -> 取得用戶端回應決定是否送審(伺服端)

在 WebForm 要處理這類問題,要分為二個階段處理,第一個階段處理「請假單儲存(伺服端) -> 彈出詢問訊息(用戶端) 」,在下面的程式碼中,訊問訊息的回應結果無論是「確定」或「取消」都會產生 PostBack 動作傳不同的參數。

    Protected Sub btnSave_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnSave.Click
        Dim sTrueScript As String
        Dim sFalseScript As String

        '執行請假單儲存的程式碼

        '儲存完成彈出詢問訊息,__EVENTTARGET 設為 "SaveConfirm"
        sTrueScript = "__doPostBack('SaveConfirm','True')"
        sFalseScript = "__doPostBack('SaveConfirm','False')"
        Me.BeeScript.Confirm("假單要送審嗎?", sTrueScript, sFalseScript)
    End Sub

第二階段在 Page Load 事件處理用戶端詢問訊息的回應「取得用戶端回應決定是否送審(伺服端)」

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        '處理詢問訊息的回應
        Dim sEventTarget As String = Me.Request.Form("__EVENTTARGET")
        Dim sEventArgument As String = Me.Request.Form("__EVENTARGUMENT")
        If String.Equals("SaveConfirm", sEventTarget, StringComparison.CurrentCultureIgnoreCase) Then
            If String.Equals(sEventArgument, "True", StringComparison.CurrentCultureIgnoreCase) Then
                '按了確定要執行的程式碼
            End If

            If String.Equals(sEventArgument, "False", StringComparison.CurrentCultureIgnoreCase) Then
                '按了取消要執行的程式碼
            End If
        End If
    End Sub

DotBlogs Tags: ClientScript confirm javascript

Feedback

  • hank 2008/11/14 下午 05:27 回覆

    # re: 撰寫自用 Confirm 方法

    請問一下
    為何在 案例三 中我不管按確定或取消都會出現
    if (confirm('假單要送審嗎?')){ __doPostBack('SaveConfirm','True') } else { __doPostBack('SaveConfirm','False') }

    Microsoft JScript 執行階段錯誤: 必須要有物件
    這個訊息?

  • jeff377 2008/11/14 下午 05:32 回覆

    # re: 撰寫自用 Confirm 方法

    to hank :
    你的頁面應該沒有其他產生 PostBack 的控制項(如 Button),導致你的頁面沒有 __doPostBack 這個函式。你在頁面隨便放一個 Button 就可以了。

  • hank 2008/11/14 下午 05:52 回覆

    # re: 撰寫自用 Confirm 方法

    謝謝~
    問題已解決了.....

  • Elvis 2009/5/12 上午 11:08 回覆

    # re: 撰寫自用 Confirm 方法

    傳回值'True'或'False',在IE7中好像不適用,會引發ClientScriptManager.RegisterForEventValidation的錯誤,

    不知道有沒有辦法解決?

    註:傳回值用''在IE7是沒問題的。

  • 程式初心者 2009/11/6 下午 06:07 回覆

    # re: 撰寫自用 Confirm 方法

    jeff您好,
    在案例三中
    您在註解中的__eventtarget設為"saveconfirm"
    我看的不甚了解
    saveconfirm指的是控制項的id嗎?
    還是說要宣告一個saveconfirm的變數儲存__eventtarget

    另外在案例三中
    是以新增一個類別為基礎進行程式的實作
    是否有其他的方式可以進行程式的實作?

    請問是否可以提供範例程式碼供參考?(如果有的話)
    謝謝!!

  • hatelove 2009/11/6 下午 06:56 回覆

    # re: 撰寫自用 Confirm 方法

    to 程式初心者 :

    hi, Jeff老師最近比較忙,小的剛好知道您問題,就順便幫忙回答一下。

    __eventtarget設為"saveconfirm"只是為了給我們在PageLoad裡面去檢查這一次的postback,是否為我們設定的那顆按鈕所觸發的。
    如果是,我們要做什麼事... 所以你也可以把saveconfirm改成"91"..因為他只是用來判斷的字串而已。

    至於您第二個問題,其實跟新增類別無關耶,
    那就只是註冊一段 javascript執行而已。

    註冊js的方式可以參考小的這篇文章:[修練營 ASP.NET]如何執行一段javascript

    如果您是要confirm,將文中alert換成confirm即可。

     

  • 程式初心者 2009/11/9 上午 10:16 回覆

    # re: 撰寫自用 Confirm 方法

    H大您好
    註冊部分應該是沒問題的
    問題在page_load中的處理詢問訊息的回應
    不管是按了跳出視窗的確定,要執行Response.Write("我按了確定")這段
    或是按了跳出視窗的取消,執行Response.Write("我按了取消")這段
    在頁面上完全沒有任何反應
    所以我不確定是否有哪裡撰寫錯誤或理解錯誤的地方
    以下為程式碼:
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    Dim et As String = Me.Request.Form("__EVENTTARGET")
    Dim ea As String = Me.Request.Form("__EVENTARGUMENT")
    Me.Response.Write("load")

    If String.Equals("LinkButton1", et, StringComparison.CurrentCultureIgnoreCase) Then

    If String.Equals(ea, "True", StringComparison.CurrentCultureIgnoreCase) Then
    '按了確定要執行的程式
    Me.Response.Write("執行新增或更新")
    End If

    If String.Equals(ea, "False", StringComparison.CurrentCultureIgnoreCase) Then
    '按了取消要執行的程式
    Me.Response.Write("按下取消")
    End If

    End If

    End Sub

    Protected Sub LinkButton1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles LinkButton1.Click
    Dim conftrue As String
    Dim conffalse As String
    Dim smsg As String
    Dim scr As String
    '執行資料查詢的程式碼
    '判斷要顯示的訊息
    Me.Response.Write("儲存資料")

    smsg = "你確定要?"

    conftrue = "__dopostback('LinkButton1','True')"
    conffalse = "__dopostback('LinkButton1','False')"

    scr = String.Format("if (confirm('{0}')){{ {1} }} else {{ {2} }}", smsg, conftrue, conffalse)

    Me.ClientScript.RegisterStartupScript(GetType(String), "Confirm", scr, True)
    End Sub


標題 *
名稱 *
Email (將不會被顯示)
Url
回應
登入後使用進階評論
Please add 2 and 5 and type the answer here: