WebForm弹出框,选择弹出的值,点击确认,自动关闭弹出框,并把选中的值传回父页面

在ASP.NET WebForm应用程序中,你可以使用JavaScript和ASP.NET服务器端代码来实现这个需求。以下是一个简单的示例:

  1. 创建一个弹出框(ModalPopup)。
  2. 在弹出框中放置一个下拉列表(DropDownList)。
  3. 使用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中。然后弹出框会被隐藏。这个过程不

none
最后修改于:2024年08月20日 14:23

评论已关闭

推荐阅读

Vue中使用mind-map实现在线思维导图
2024年08月04日
VUE
Web前端最全Vue实现免密登录跳转的方式_vue怎么样不登录返回首页,最强技术实现
2024年08月04日
VUE
vue3 项目搭建教程(基于create-vue,vite,Vite + Vue)
2024年08月04日
VUE
Vue-颜色选择器实现方案——>Vue-Color( 实战*1+ Demo*7)
2024年08月04日
VUE
Vue项目卡顿慢加载?这些优化技巧告诉你!_vue数据多渲染卡顿
2024年08月04日
VUE
vue中的keep-alive详解与应用场景
2024年08月04日
VUE
Vue、React实现excel导出功能(三种实现方式保姆级讲解)
2024年08月04日
vue-office/docx插件实现docx文件预览
2024年08月04日
VUE
java调用js文件的两种方法(支持V8引擎)
2024年08月04日
JavaScript:解决计算精度问题/mathjs/bignumber.js/big.js/decimal.js
2024年08月04日
两周从爬虫小白变大神 _yjs_js_security_passport
2024年08月04日
JS笔记(对象、函数、数组)
2024年08月04日
Markdown.js:强大的纯JavaScript Markdown解析器
2024年08月04日
Vue项目:js模拟点击a标签下载文件并重命名,URL文件地址下载方法、请求接口下载文件方法总结。
2024年08月04日
vue 父组件怎么获取子组件里面的data数据
2024年08月04日
VUE
个人开发实现AI套壳网站快速搭建(Vue+elementUI+SpringBoot)
2024年08月04日
el-table 表格封装并改造实现单元格可编辑
2024年08月04日
none
nodejs环境下创建vue项目、SSH密钥登陆!!!
2024年08月04日
vue+quill+element-ui实现视频、图片上传及缩放保姆级教程,轻松使用富文本
2024年08月04日
【three.js】22. Imported Models导入模型
2024年08月04日