惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
T
Troy Hunt's Blog
Scott Helme
Scott Helme
T
Threat Research - Cisco Blogs
T
Tenable Blog
L
LINUX DO - 热门话题
V
Visual Studio Blog
I
Intezer
Blog — PlanetScale
Blog — PlanetScale
Cisco Talos Blog
Cisco Talos Blog
A
Arctic Wolf
C
Cyber Attacks, Cyber Crime and Cyber Security
F
Fortinet All Blogs
aimingoo的专栏
aimingoo的专栏
Know Your Adversary
Know Your Adversary
CTFtime.org: upcoming CTF events
CTFtime.org: upcoming CTF events
N
Netflix TechBlog - Medium
SecWiki News
SecWiki News
I
InfoQ
Microsoft Security Blog
Microsoft Security Blog
Project Zero
Project Zero
W
WeLiveSecurity
Microsoft Azure Blog
Microsoft Azure Blog
A
About on SuperTechFans
Recorded Future
Recorded Future
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
Vercel News
Vercel News
S
Securelist
Spread Privacy
Spread Privacy
L
LangChain Blog
云风的 BLOG
云风的 BLOG
G
Google Developers Blog
MongoDB | Blog
MongoDB | Blog
Google DeepMind News
Google DeepMind News
Recent Commits to openclaw:main
Recent Commits to openclaw:main
D
Darknet – Hacking Tools, Hacker News & Cyber Security
C
CERT Recently Published Vulnerability Notes
罗磊的独立博客
K
KPMG report finds enterprise disconnect between AI and its ROI | CIO
The Last Watchdog
The Last Watchdog
Attack and Defense Labs
Attack and Defense Labs
博客园 - 司徒正美
Help Net Security
Help Net Security
L
Lohrmann on Cybersecurity
人人都是产品经理
人人都是产品经理
Forbes - Security
Forbes - Security
Hacker News - Newest:
Hacker News - Newest: "LLM"
PCI Perspectives
PCI Perspectives
博客园 - 【当耐特】
T
Tor Project blog

博客园 - Insus.NET

User Profile Service 服务未能登录 Visual Studio2026创建Vue项目 安装与配置node.js HTTP Error 403.14 - Forbidden VisualStudio2026回滚上一版本 消息认证码(加强) 网站无法使用插值字符串语法 HMAC(Hash-based Message Authentication Code)认证示例 浏览器自动发送域凭据 企业内小网站兼用Windows验证登录 访问用户控件的函数 onblur事件改为监听处理 将警报消息改为吐司消息 内容有无变化OnBlur即时更新引起的问题与解决 混合式提高用户编辑与操作效率 光标离开文框后即刻更新 WebForm实现Web API JavaScript对GridView删除行后并重新给其数据绑定 把CS值传给JS使用 v2 确认信息confirm由C#后端移至javascript前端 无法发布网站Web Site JavaScript判断字符是否为decimal GridView数据控件中实现单选功能 文本框输入完后直接按回车提交数据 GridView对行进行全选或单选 TextBox文本框允许用户输入正或负小数 用户单击文本并复制至剪帖板 Vue3格式化日期时间与插值 SQL Server中验证大小字母和数字 MS SQL Server 数据加密与解密实例 相册由原来Lightbox升级至Vue2瀑布流 从Visual Studio 2022升级至Visual Studio 2026 报表应用图表charts显示数据 钉钉(DingTalk)免登录 Upgrade Outlook Connector 程序中真实应用SignalR Web API路径与IIS站点应用程序名或虚拟目录 在您可以登录前,此副本的 Windows 必须被 Microsoft 激活。您想现在激活它吗 电脑系统由Win10降级Win7折腾还是折腾 System.ComponentModel.Win32Exception: Access is denied
点击单元格弹出窗口处理数据返回父页
Insus.NET · 2026-04-03 · via 博客园 - Insus.NET

在Gridview数据控件中,用户点击单元格,将会弹出一子窗口,子窗口根据传过来和参数进行处理。
用户从多个结果中,选择需求的结果,返回父页的GridView对应行的单元格中。

实现这个功能,决定使用这个

ajaxToolkit:ModalPopupExtender

控件,所有AjaxToolkit工具包,可从下面这个链接https://www.ajaxtoolkit.net/下载。

程序页面,

 <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
     <ContentTemplate>            
         <asp:GridView ID="GridView_IMT_Item" runat="server" AutoGenerateColumns="false" DataKeyNames="IMT_Item_Nbr"
             Width="100%" HeaderStyle-Height="30" RowStyle-Height="30" OnRowCreated="GridView_IMT_Item_RowCreated" OnRowDataBound="GridView_IMT_Item_RowDataBound">
             <Columns>
                 <%--其它列--%>
                 <asp:TemplateField>
                     <HeaderStyle BorderColor="#c0c0c0" BorderWidth="1" />
                     <ItemStyle BorderColor="#c0c0c0" BorderWidth="1" />
                     <HeaderTemplate>
                         实际值
                     </HeaderTemplate>
                     <ItemTemplate>
                         <asp:Label ID="LabelShiJiZhi" runat="server" Text='<%# Eval("ShiJiZhi").ToString()=="0.00000000"? string.Empty: string.Format("{0:0.#######}", Eval("ShiJiZhi")) %>'></asp:Label>
                         <asp:HiddenField ID="HiddenFieldShiJiZhi" runat="server" Value='<%# Eval("ShiJiZhi").ToString()=="0.00000000"? string.Empty: string.Format("{0:0.#######}", Eval("ShiJiZhi")) %>' />
                     </ItemTemplate>
                 </asp:TemplateField>
                 <asp:TemplateField>
                     <HeaderStyle BorderColor="#c0c0c0" BorderWidth="1" />
                     <ItemStyle BorderColor="#c0c0c0" BorderWidth="1" />
                     <HeaderTemplate>
                         设备编号
                     </HeaderTemplate>
                     <ItemTemplate>
                         <asp:Label ID="LabelSheBeiBianHao" runat="server" Text='<%# Eval("SheBeiBianHao") %>'></asp:Label>
                         <asp:HiddenField ID="HiddenFieldSheBeiBianHao" runat="server" Value='<%# Eval("SheBeiBianHao") %>' />
                     </ItemTemplate>
                 </asp:TemplateField>
                 <%--其它列--%>
             </Columns>
         </asp:GridView>           
     </ContentTemplate>
 </asp:UpdatePanel>

 <asp:HiddenField ID="HiddenFieldCurrentRowIndex" runat="server" Value="" />
 <asp:Button ID="btnHiddenPopup" runat="server" Style="display: none;" />
 <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtenderGlobal" runat="server" ClientIDMode="Static"
     TargetControlID="btnHiddenPopup"
     PopupControlID="panelPopupWindow"
     BackgroundCssClass="modalBackground"
     CancelControlID="btnClose"
     DropShadow="true"
     PopupDragHandleControlID="Panel3" />
<style>
    .left {
        margin-top: 1px;
        display: inline-block;
    }

    .right {
        margin-top: 1px;
        display: inline-block;
        vertical-align: top;
    }
</style>
<asp:Panel ID="panelPopupWindow" runat="server" Style="display: none; background-color: #ffffdd; border-width: 3px; border-style: solid; border-color: Gray; padding: 3px; width: 600px;">
    <asp:Panel ID="Panel3" runat="server" CssClass="left;" Style="float: left; margin-bottom: 5px; border: 1px solid #c0c0c0; cursor: move; background-color: #DDDDDD; color: Black; height: 20px; width: 573px; text-align: center; line-height: 20px;">
        数据处理
    </asp:Panel>
    <input id="btnClose" type="button" runat="server" value="×" class="right;" style="float: right; height: 22px; color: #ff0000;" onclick="return false;" title="Close" />
    <div>
        <iframe id="iframePopup" runat="server" style="width: 100%; height: 350px; border: none;"></iframe>
    </div>
</asp:Panel>

刚开始程序“实际值”与“设备编号”放的是TextBox。用户点TextBox弹出窗口,
程序发布时,用户对返回的值可以手动修改,因此把它改为Label,只显法返回值。
还有一个问题,程序在网页加载时,Label没有值,用户无法点击,因此Insus.NET把它改成点击单元格弹出子窗口。

Label可以赋值,但它是只读,因此还得添加HiddenFeild来存储与Label相同的值。

GridView数据不止一行,还需要记住用户点击的是哪一行。
在GridView控件外,还有一个HiddenField来存储点击的行索引。方便在子窗口回填值,能知道是哪一行。

接下来,我们需要在单元格绑定其相关数据。在RowDataBound事件实现。

2026-04-03_13-56-27

你还会看到showModalForRows(this)事件,这是为javascript代码准备。即用户点击单元格而驱动事件。
2026-04-03_14-02-22

<script type="text/javascript">       
    function showModalForRow(cell) {
        var rowIndex = cell.getAttribute("data-rowindex");
        var itemNbr = cell.getAttribute("data-itemnbr");
        if (!rowIndex || !itemNbr) return;

        document.getElementById('<%= HiddenFieldCurrentRowIndex.ClientID %>').value = rowIndex;

        var iframe = document.getElementById('<%= iframePopup.ClientID %>');
        if (iframe) {
            iframe.src = "PopupData.aspx?rowIndex=" + rowIndex + "&itemNbr=" + encodeURIComponent(itemNbr);
        }

        var modal = $find('ModalPopupExtenderGlobal');
        if (modal) modal.show();
    }
</script>

View Code

程序到这里,我们还得写一个方法,供弹出的子窗口回填数据,
找到GridView,使用document.getElementById(),传入GridView ID即可。
根据弹出子窗口设置的行索引,parseInt(rowIndex) + 1转变实际的行。
然后找到Label和HIddenField。并周赋值。

2026-04-03_14-04-36

<script type="text/javascript">       
    function setMeasurementData(rowIndex, deviceId, actualValue) {
        var grid = document.getElementById('<%= GridView_IMT_Item.ClientID %>');
        if (!grid) return;

        var dataRowIndex = parseInt(rowIndex) + 1;
        var row = grid.rows[dataRowIndex];
        if (!row) return;

        var labelDevice = row.querySelector("span[id$='LabelSheBeiBianHao']");
        var hiddenfieldDevice = row.querySelector("input[id$='HiddenFieldSheBeiBianHao']");
        var labelActual = row.querySelector("span[id$='LabelShiJiZhi']");
        var hiddenfieldActual = row.querySelector("input[id$='HiddenFieldShiJiZhi']");

        if (labelDevice) labelDevice.textContent = deviceId;
        if (hiddenfieldDevice) hiddenfieldDevice.value = deviceId;

        if (labelActual) {
            var formattedValue = parseFloat(actualValue).toFixed(7).replace(/\.?0+$/, '');
            labelActual.textContent = formattedValue || "";
        }

        if (hiddenfieldActual) {
            var formattedValue = parseFloat(actualValue).toFixed(7).replace(/\.?0+$/, '');
            hiddenfieldActual.value = formattedValue || "";
        }

        modalHide(); // 关闭模态窗口
    }
</script>

View Code

似乎还少了一些代码,即是modal关闭代码,
2026-04-03_14-09-37

<script type="text/javascript">
    function modalHide() {
        var modal = $find('ModalPopupExtenderGlobal');
        if (modal) {
            modal.hide();
        } else {
            console.error('无法获取 ModalPopupExtenderGlobal');
        }
    }
</script>

View Code

说了一大片,漏了一个关键点,需要引入jQuery库。
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

父页程序大概这样子。

在弹出窗口子页中,
2026-04-03_14-26-50

<script type="text/javascript">                    
    function getQueryParam(name) {
        const regex = new RegExp('[?&]' + name + '=([^&#]*)', 'i');
        const results = regex.exec(window.location.href);
        return results ? decodeURIComponent(results[1]) : null;
    }

    var rowIndex = getQueryParam("rowIndex");
    var itemNbr = getQueryParam("itemNbr");

    var nbr, metric;
    nbr = xxx; //处理结果
    metric = xxx;//处理结果

    if (window.parent && window.parent.setMeasurementData) {
        window.parent.setMeasurementData(rowIndex, nbr, metric);
    }
</script>

View Code

getQueryParam(name)方法,是从弹出的子窗口地址栏上,获取父页传过来的参数。
如何传,参考上面showModalForRows(this)事件。

子窗口处理结果,赋值回合局变量var nbr,metric;

最后是执行父页中javascript设值方法,setMeasurementData()

 if (window.parent && window.parent.setMeasurementData) {
     window.parent.setMeasurementData(rowIndex, nbr, metric);
 }