ASP.NET AJAX 模态弹出窗口 - 动态控制值

Question

我正在向 ASP.NET 页面添加模式弹出窗口。弹出窗口会给用户一些文本框来填写，带有一个取消和提交按钮。

我遇到的问题是文本框是动态创建的，因为所需的文本框数量和它们要求的内容会根据页面上单击的内容而变化。当尝试检索在模式窗口上单击提交后输入的值时（未绑定到模式窗口，因此它将执行回发），文本框到那时已经消失并且无法检索数据。

这是模式弹出窗口的代码：

                <div id="divModalContainer">
                    <div id="PromptContentHeader">
                        <asp:Label ID="lblHeader1" runat="server">
                        </asp:Label>
                        <br />
                        <asp:Label ID="lblHeader2" runat="server">
                        </asp:Label>
                        <asp:Label ID="lblPassFileName" runat="server">
                        </asp:Label>
                    </div>

                    <!--<ul id="ulTabModalPrompt" class="tabnav" runat="server">
                    </ul>-->
                    <div id="divModalPrompts" runat="server">
                        <table id="PromptTable" runat="server">
                        </table>
                    </div>
                    <div id="divModalButtons" style="width:230px;">
                        <div style="float:left">
                            <asp:Button ID="btnCancelDocPrompts" runat="server" Text="Cancel" OnClick="btnCancelDocPrompts_Click" />
                        </div>
                        <div style="float:right">
                            <asp:Button ID="btnSubmitDocPrompts" runat="server" Text="Submit" OnClick="btnSubmitDocPrompts_Click" />
                        </div>
                    </div>
                </div>
            </asp:Panel>

            <ajaxtoolkit:ModalPopupExtender ID="modalDocPrompt" runat="server"
                    TargetControlID="btnOpenPromptWindow" 
                    PopupControlID="panelPrompts" 
                    OkControlID="btnHiddenOkButton"
                    CancelControlID="btnCancelDocPrompts"
                    BackgroundCssClass="ModalPromptBackground"
                    DropShadow="true" />

            <asp:Button ID="btnOpenPromptWindow" runat="server" Text="Test Modal" Style="display: none;" />
            <asp:Button ID="btnHiddenOkButton" runat="server" Text="Test Modal" Style="display: none;" />

在显示模式弹出窗口之前，行将被添加到 PromptTable，每行中都有一个标签和文本框。

btnSubmitDocPrompts_Click 方法将尝试遍历 PromptTable 中的每一行并检索输入的值，但是一旦单击提交，就没有行了。

感谢您的帮助！

Answer 1

您可以尝试使用 JavaScript 将文本框的值写入 HiddenField（如果页面加载时存在，则会回传）。

您必须对值进行编码并用逗号分隔它们（或类似的），然后在服务器端解析值。

编辑： 示例

好的，我个人会在 JavaScript 部分使用 jQuery，但我会假设你是在“原始”地做它。

说您的标记（添加了一些动态文本框）如下所示：

<input type="hidden" id="hdnFormValues" />
<div id="dynamicForm">
    <div id="textBoxArea">
        <input type="text" id="newField1" /><br />
        <input type="text" id="newField2" /><br />
        <input type="text" id="newField3" /><br />
        <input type="text" id="newField4" /><br />
    </div>
    <input type="submit" onclick="saveValues()" value="Save Values" />
</div>

你有一个如下所示的 JavaScript 函数：

    function saveValues()
    {
        theBoxes = document.getElementById('textBoxArea').getElementsByTagName('input');
        hdnValues = document.getElementById('hdnFormValues');
        hdnValues.value = "";

        for(var i = 0; i < theBoxes.length; i++)
        {            
                hdnValues.value += escape(theBoxes[i].value) + '|';           
        }        
    }

然后当提交按钮被按下时，HiddenField 的值将变成一个管道分隔的编码值字符串。

例如，如果文本框 1 到 4 具有以下值：

I'm

encoding

dynamic

values!

那么 HiddenField 的值将变为 I%27m|encoding|dynamic|values%21|

请记住，您需要从 ASP.NET 服务器端输出上述函数。查看ScriptManager 文档以了解如何执行此操作。原因是 HiddenField 的 ID 将是动态的，因此您无法（可靠地）在运行前预测它。

最后，在接收回发的服务器端代码中，拆分分隔字符串并取消编码，然后对值执行所需操作。

这里最大的警告是安全和验证 - 虽然我已经对字符串进行了编码，但您需要自己进行验证和安全检查！