WebForm弹出框,选择弹出的值,点击确认,自动关闭弹出框,并把选中的值传回父页面
    		       		warning:
    		            这篇文章距离上次修改已过440天,其中的内容可能已经有所变动。
    		        
        		                
                在ASP.NET WebForm应用程序中,你可以使用JavaScript和ASP.NET服务器端代码来实现这个需求。以下是一个简单的示例:
- 创建一个弹出框(ModalPopup)。
 - 在弹出框中放置一个下拉列表(DropDownList)。
 - 使用JavaScript来处理确认和传值的逻辑。
 
假设你有一个ModalPopupExtender和一个Panel作为弹出框,以及一个DropDownList。
HTML 部分:
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
            <!-- 添加选项 -->
        </asp:DropDownList>
        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
        <asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="btnOpenPopup" PopupControlID="Panel1" OkControlID="btnOk" CancelControlID="btnCancel" OnOkScript="onOk()" />
        <asp:Button ID="btnOpenPopup" runat="server" Text="Open Popup" />
        <asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" Style="display: none;">
            <asp:DropDownList ID="DropDownList2" runat="server">
                <!-- 添加选项 -->
            </asp:DropDownList>
            <br />
            <asp:Button ID="btnOk" runat="server" Text="Ok" />
            <asp:Button ID="btnCancel" runat="server" Text="Cancel" />
        </asp:Panel>
    </ContentTemplate>
</asp:UpdatePanel>JavaScript 部分:
<script type="text/javascript">
    function onOk() {
        // 获取子页面的下拉列表值
        var value = $get('<%= DropDownList2.ClientID %>').value;
        // 设置父页面的Label值
        $get('<%= Label1.ClientID %>').innerText = value;
        // 关闭弹出框
        $get('<%= ModalPopupExtender1.ClientID %>').hide();
        return false;
    }
</script>C# 后台代码部分:
protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
    // 当DropDownList1的选项变化时,也改变DropDownList2的选项
    DropDownList2.SelectedValue = DropDownList1.SelectedValue;
}在这个例子中,当用户点击btnOpenPopup按钮打开弹出框时,ModalPopupExtender会显示Panel1中的内容。用户在DropDownList2中选择一个值,然后点击btnOk。JavaScript的onOk函数会被触发,它会获取DropDownList2的选中值,并将其设置到父页面的一个Label中。然后弹出框会被隐藏。这个过程不
评论已关闭