Ajax Toolkit 控件学习系列(8) ——ModalPopupExtender 示例

• ModalPopupExtender  这个控件就是，对一个按钮或者Linkbutton等等，进行监控，以达到点击之后，弹出窗口的效果。而弹出的窗口可以自己定义，定义为panel，或者其他的。而panel中的效果可以自己设置，甚至于这个窗口的操作，操作之后有什么事件。在这个例子中，模仿了Kaixin网中奴隶买卖的例子，进行说明。
• 先看效果。

　　　　

　　　　这是一个用Gridview显示的一个奴隶的列表。里面是几个Linkbutton，不用多说，点击其中的一个，触发这个控件。

　　　　

• TargetControlID 不用多说，控制那个控件。我这里是在Gridview中，使用函数触发，而这个属性又不能空。所以，形同虚设了一个按钮。不显示。                      
• PopupControlID　弹出窗口的ID，我的例子是一个panel
• BackgroundCssClass CSS，不用多说。
• OkControlID那个按钮是确认
• OnOkScript 触发的脚本
• DropShadow 是否有阴影。
• CancelControlID 弹出窗口退出按钮
• 我是通过后台代码，控制ModalPopupExtender控件的出现。调用了Show方法。

        protected void lbtn_appease_Click(object sender, EventArgs e)
        {
            LinkButton lbtn = sender as LinkButton;
            this.ModalPopupExtender3.Show();
        }

 

• ModalPopupExtender 可以结合上面的一起参考。

<ajax:ModalPopupExtender 
                    ID="ModalPopupExtender3" 
                    runat="server" 
                    TargetControlID="Modal_Button"
                        PopupControlID="appease_Panel1" 
                        BackgroundCssClass="modalBackground" 
                        OkControlID="Button3"
                        OnOkScript="onOk()" 
                        DropShadow="true" 
                        PopupDragHandleControlID="appease_Panel2"
                        CancelControlID = "CancleButton">
                    </ajax:ModalPopupExtender>
                    <asp:Button ID="Modal_Button" runat="server" style="display:none;" />
                    <asp:Panel ID="appease_Panel1" runat="server" Style="display: none; background-color: #ffffdd;
                        border-width: 3px; border-style: solid; border-color: Gray; padding: 3px; width: 250px;">
                        <asp:Panel ID="appease_Panel2" runat="server" Style="cursor: move; background-color: #DDDDDD;
                            border: solid 1px Gray; color: Black">
                            <div>
                                <h4 style="text-align: center">
                                    安抚</h4>
                            </div>
                        </asp:Panel>
                        <div>
                            <asp:Panel ID="appease_Panel3" runat="server" ScrollBars="Vertical" Height="100px">
                                <asp:RadioButtonList ID="RadioButtonList3" runat="server">
                                    <asp:ListItem Enabled="false">散步</asp:ListItem>
                                    <asp:ListItem Enabled="false">洗澡</asp:ListItem>
                                    <asp:ListItem>烤红薯</asp:ListItem>
                                    <asp:ListItem>去公园</asp:ListItem>
                                    <asp:ListItem>搓背</asp:ListItem>
                                    <asp:ListItem>吃螃蟹</asp:ListItem>
                                </asp:RadioButtonList>
                            </asp:Panel>
                            <p style="text-align: center;">
                                <asp:Button ID="Button3" runat="server" Text="OK" />
                                <asp:Button ID ="CancleButton" runat ="server" Text = "Cancle" />
                            </p>
                        </div>
                    </asp:Panel>

 

•  下面是Gridview的代码，供大家参考。

　　

<asp:GridView ID="slaveList" runat="server" AllowPaging="true" AutoGenerateColumns="false"
                        OnRowDataBound="gvWaitForApprove_RowDataBound" OnPageIndexChanging="gvWaitForApprove_PageIndexChanging">
                        <Columns>
                            <asp:TemplateField HeaderText="SlaveList">
                                <ItemTemplate>
                                    <table cellpadding="0" cellspacing="0" style="padding: 0px; margin: 0px; border: 0px;">
                                        <tr>
                                            <td>
                                                <asp:Label ID="lb_slaveName" runat="server" Text=""></asp:Label>
                                            </td>
                                            <td>
                                                <asp:Label ID="lb_slaveStatus" runat="server" Text=""></asp:Label>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <asp:LinkButton ID="lb_username" runat="server" CommandArgument='<%# Eval("holder")%>'
                                                    Text='<%# Eval("holder")%>' OnClick="lb_username_Click"></asp:LinkButton>
                                            </td>
                                            <td>
                                                <tr>
                                                    <asp:LinkButton ID="lbtn_discount" runat="server" Text="Discount" OnClick="lbtn_discount_Click"></asp:LinkButton></tr>
                                                <tr>
                                                    <asp:LinkButton ID="lbtn_release" runat="server" Text="release" OnClick="lbtn_release_Click"></asp:LinkButton></tr>
                                                <tr>
                                                    <asp:LinkButton ID="lbtn_trick" runat="server" Text="trick" OnClick="lbtn_trick_Click"></asp:LinkButton></tr>
                                                <tr>
                                                    <asp:LinkButton ID="lbtn_appease" runat="server" Text="appease" OnClick="lbtn_appease_Click"></asp:LinkButton></tr>
                                            </td>
                                        </tr>
                                    </table>
                                </ItemTemplate>
                            </asp:TemplateField>
                        </Columns>
                    </asp:GridView>

•  以下是这个控件的Css代码。供大家参考。

.modalBackground {
    background-color:Gray;
    filter:alpha(opacity=70);
    opacity:0.7;
}

• 最后，做一点说明，在弹出窗口的panel中的button，按了OK之后怎么样的触发OK事件，是有点特殊的，后台我们无法像简单的那样控制。必须要用脚本，按钮触发脚本之后，再写一个事件。希望大家注意。