WebForm弹出框,选择弹出的值,点击确认,自动关闭弹出框,并把选中的值传回父页面
在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中。然后弹出框会被隐藏。这个过程不
评论已关闭