点击单元格弹出窗口处理数据返回父页

在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事件实现。

 

你还会看到showModalForRows(this)事件，这是为javascript代码准备。即用户点击单元格而驱动事件。

<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>

 

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

<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>

 

似乎还少了一些代码，即是modal关闭代码，

 

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

 

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

父页程序大概这样子。

在弹出窗口子页中，

<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>

 

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

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

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

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