ModalPopup 開啟時觸發另一個事件

2009-05-19

一般在開始使用 AJAX ModalPopup 時候，大概都會這樣設定

 <cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="btn_OpenPop" BackgroundCssClass="popup_background" CancelControlID="btnCancel" OkControlID="btnOK" PopupControlID="Panel1">
        </cc1:ModalPopupExtender>

直接將觸發的按鈕設定到 TargetControlID 中

那麼，我想要在開啟 POP 視窗前，先進行一些處理呢？原先是想，直接設定 btn_OpenPop_Click() 事件就好。當然，如果這方式可行，

應該就不會有這篇出現了。既然這樣的方式不可行，那該怎麼處理呢？這我找了許久，後來看到小喵大的一篇文章，給我靈感，加上參考

小舖上網友給的參考方式。於是作出下面這樣的解決方式。

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="testPOP.aspx.vb" Inherits="AJAXEnabledWebApplication3.testPOP" %>

<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
    Namespace="System.Web.UI" TagPrefix="asp" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

<!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 id="Head1" runat="server">
    <title>未命名頁面</title>
    <style type="text/css">
        .popup_background
        {
            background-color:Gray;
            filter:alpha(opacity=60);
            opacity:0.6;
        }    
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
     
     
        <br />
        <asp:TextBox ID="tbx_Keyin" runat="server"></asp:TextBox>&nbsp;
        <asp:Button ID="btn_OpenPop" runat="server" Text="開啟 pop 視窗" /><br />
        <br />
        <asp:Panel ID="Panel1" runat="server" Height="100px" Width="200px" BackColor="White" HorizontalAlign="Center">
            <br />
            <asp:Button ID="btnOK" runat="server" Text="ok" Width="60px" />&nbsp;<asp:Button
                ID="btnCancel" runat="server" Text="cancel" Width="60px" />
            <asp:TextBox ID="tbx_show" runat="server"></asp:TextBox></asp:Panel>
        <br />
        <asp:LinkButton ID="lbtn_empty" runat="server"></asp:LinkButton><br />
        <cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="lbtn_empty" BackgroundCssClass="popup_background" CancelControlID="btnCancel" OkControlID="btnOK" PopupControlID="Panel1">
        </cc1:ModalPopupExtender>
    
    </div>
    </form>
</body>
</html>

Public Partial Class testPOP
    Inherits System.Web.UI.Page

    ' 處理事件後，打開 Pop Panel
    Protected Sub btn_OpenPop_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btn_OpenPop.Click

        'todo : 加入要處理的事
        Me.tbx_show.Text = Me.tbx_Keyin.Text


        ' 開啟 pop panel
        Me.ModalPopupExtender1.Show()

    End Sub


End Class

重點在於 LinkButton 跟 Me.ModalPopupExtender1.Show() ，我把 ModalPopup TargetControlID 設定到 LinkButton ，

其中 Text 欄位清空，這樣 User 端不會看到這個。接下來 ModalPopup 相關設定就跟一般一樣。

接下來設定btn_OpenPop_Click()事件，按鈕事件中，可以先加入要處理的程序，接下來最後加入 ModalPopupExtender1.Show()，

強制觸發 ModalPopup ，叫出設定的 panel。

這 pop 問題已經解決許久，剛好有小舖的網友詢問，我就整理一下貼上來。

AJAX

回首頁