Question

I am working on adding a modal popup to ASP.NET pages. The popup will give the user some textboxes to fill in, with a Cancel and Submit button.

The issue I’m running into is that the textboxes are being created dynamically, as the number of textboxes needed and what they are asking for will change depending on what is clicked on the page. When attempting to retrieve the values that have been entered after clicking Submit on the modal window (which is not tied to the modal window so that it will do a postback), the textboxes are gone by that point and the data cannot be retrieved.

Here’s the code for the modal popup:

                <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;" />

Before the modal popup is shown, rows will be added to PromptTable, with a label and textbox in each row.

The btnSubmitDocPrompts_Click method will attempt to go through each row in PromptTable and retrieve the values entered, but once Submit is clicked, there are no rows anymore.

Thanks for the help!

Answer 1

You could try using JavaScript to write the values of the textboxes to a HiddenField (which will get posted back if it exists when the page loads).

You’ll have to encode the values and comma-separate them (or similar), then parse the values out server-side.

Edit: Example

OK, I’d personally use jQuery for the JavaScript part, but I’ll assume you’re doing it ‘raw’.

Say your markup (with a few added dynamic textboxes) looks like this:

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

and you have a JavaScript function that looks like this:

    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) + '|';           
        }        
    }

Then when the submit button gets pressed, the value of the HiddenField will become a pipe-delimited string of encoded values.

For example, if text boxes 1 through 4 had the values:

I'm

encoding

dynamic

values!

then the HiddenField’s value would become I%27m|encoding|dynamic|values%21|

Remember, you’ll need to output the function above from ASP.NET server side. Look at the ScriptManager documentation for how to do this. The reason is that the HiddenField’s ID will be dynamic, so you can’t (reliably) predict it before runtime.

Finally, in your server-side code that recieves the postback, you split out the delimited string and unencode it, then do what you want with the values.

The biggest caveat here is security and validation – although I’ve encoded the string, you need to do your own validation and security checks!