ASP.NET AJAX Modal Popup - Динамические значения управления - PullRequest
Новая
       29

ASP.NET AJAX Modal Popup - Динамические значения управления

1 голос
/ 26 июля 2011

Я работаю над добавлением модального всплывающего окна на страницы 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 и получить введенные значения, но после нажатия кнопки «Отправить» больше нет строк.

Спасибо за помощь!

1 Ответ

2 голосов
/ 26 июля 2011

Вы можете попробовать использовать JavaScript для записи значений текстовых полей в HiddenField (который будет опубликован обратно, если он существует при загрузке страницы).

Вам придется кодировать значения и разделять их запятыми (или аналогичными), а затем анализировать значения на стороне сервера.

Редактировать: Пример

Хорошо, я бы лично использовал jQuery для части JavaScript, но я предполагаю, что вы делаете это "сырым".

Скажем, ваша разметка (с несколькими добавленными динамическими текстовыми полями) выглядит следующим образом: 

<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 будет динамическим, поэтому вы не можете (надежно) предсказать его до времени выполнения.

Наконец, в своем коде на стороне сервера, который получает обратную передачу, вы разделяете строку с разделителями и дешифруете ее, а затем делаете то, что хотите со значениями.

Самым большим предупреждением здесь является безопасность и валидация - хотя я и закодировал строку, вам нужно выполнить свою собственную проверку и проверки безопасности!

...