设置使用 Javascript 创建的文本框的值答案

【问题标题】：Setting Values of textboxes that were created using Javascript设置使用 Javascript 创建的文本框的值
【发布时间】：2013-09-25 10:54:16
【问题描述】：

我有一个表单，我在其中使用 javascript 制作了一些文本框。基本上，我给了一个按钮，然后单击该按钮，我使用 Javascript 添加了一个文本框。然后，这些值在服务器端以字符串形式获取，并存储在不同的 List 列中。

现在我想创建编辑功能。所以我必须从 List COlumns 中检索值并将其插入到文本框中。当我的控件是服务器控件时，这很容易，但是如何为使用 Javascript 创建的文本框执行此操作。

我是客户端脚本的新手。任何帮助将不胜感激。

我只需要一种从 List COlumn 中获取值的方法，然后使用这些值再次创建这些文本框。

PS：如果您想查看我如何创建文本框并在服务器端获取这些值的代码，请告知。谢谢！

创建文本框的Javascript代码：

<script type="text/javascript">
                function GetDynamicTextBoxB(value)
                { return '<input name = "DynamicTextBoxB" type="text" value = "' + value + '" />' + '<input type="button" value="Remove" onclick = "RemoveTextBoxB(this)" />' }
                var y = 0;
                function AddTextBoxB() {
                    if (y < 10) {
                        var div = document.createElement('DIV'); div.innerHTML = GetDynamicTextBoxB(""); document.getElementById("TextBoxContainerB").appendChild(div);                       
                                 }
                    else        {
                        alert("Only 10 CSPs can be added")
                                 } y++
                  }
                function RemoveTextBoxB(div)
                { document.getElementById("TextBoxContainerB").removeChild(div.parentNode); }
                function RecreateDynamicTextboxesB() {
                    var values = eval('<%#Values%>');
                    if (values != null) {
                        var html = ""; for (var i = 0; i < values.length; i++)
                        { html += "<div>" + GetDynamicTextBoxB(values[i]) + "</div>"; } document.getElementById("TextBoxContainerB").innerHTML = html;
                    }
                }
                $("#tabs-1").ready(RecreateDynamicTextboxesB);
                //                //  window.onload = RecreateDynamicTextboxesB;
           </script>

在服务器端获取这些值并存储在 List COlumns 中的代码隐藏

string PartyACSP1 = string.Empty, PartyACSP2 = string.Empty, PartyACSP3 = string.Empty, PartyACSP4 = string.Empty, PartyACSP5 = string.Empty, PartyACSP6 = string.Empty, PartyACSP7 = string.Empty, PartyACSP8 = string.Empty, PartyACSP9 = string.Empty, PartyACSP10 = string.Empty;
                if (textboxValues != null)
                {
                    PartyACSP1 = safeGetString(textboxValues, 0);
                    PartyACSP2 = safeGetString(textboxValues, 1);
                    PartyACSP3 = safeGetString(textboxValues, 2);
                    PartyACSP4 = safeGetString(textboxValues, 3);
                    PartyACSP5 = safeGetString(textboxValues, 4);
                    PartyACSP6 = safeGetString(textboxValues, 5);
                    PartyACSP7 = safeGetString(textboxValues, 6);
                    PartyACSP8 = safeGetString(textboxValues, 7);
                    PartyACSP9 = safeGetString(textboxValues, 8);
                    PartyACSP10 = safeGetString(textboxValues, 9);
                }


                newISDAAgreement[Constants.PartyACSPColumn] = PartyACSP1;
                newISDAAgreement[Constants.PartyACSP2Column] = PartyACSP2;
                newISDAAgreement[Constants.PartyACSP3Column] = PartyACSP3;
                newISDAAgreement[Constants.PartyACSP4Column] = PartyACSP4;
                newISDAAgreement[Constants.PartyACSP5Column] = PartyACSP5;
                newISDAAgreement[Constants.PartyACSP6Column] = PartyACSP6;
                newISDAAgreement[Constants.PartyACSP7Column] = PartyACSP7;
                newISDAAgreement[Constants.PartyACSP8Column] = PartyACSP8;
                newISDAAgreement[Constants.PartyACSP9Column] = PartyACSP9;
                newISDAAgreement[Constants.PartyACSP10Column] = PartyACSP10;

【问题讨论】：

请分享你已经得到的代码。
请分享代码。

标签： c# javascript asp.net textbox

【解决方案1】：

从列表列中检索数据时，您必须拥有要为其创建编辑功能的数据映射。例如假设你有数据

listcolumn = {'data1': 123, 'data2': 234, 'data3': 345}

所以您可以循环进入该数据并创建包含其值的文本框。

for(listcolumn 中的键){ 从 listcolumn[key] 创建一个文本框及其值（这将为您提供该特定文本框的值） }

或者如果对字典的东西不满意您可以使用任何一种方式，即数据是列表形式

listcolumn = [123,234,345]

for(listcolumn 中的数据){ 创建一个文本框并在其中插入值。 }

但我希望您从服务器端到前端使用 JSON 格式您可以使用 JSON.parse(data) 解析数据。并将字典作为对象获取。

【讨论】：

是的，这只是您解释的上述场景的假设。不满意请分享代码
所以我有列表列中的值，然后我将如何在我的 UI 中创建一个文本框来显示这些值？
在页面上基本上有一个隐藏字段，它是一个服务器端控件，使用 Tajinder 提供的 JSON 填充它，然后在按钮上单击解析这个 JSON 并对其进行迭代并创建每个文本框并填充价值。
我们如何做到这一点？

【解决方案2】：

我建议使用不同的架构： knockout.js - 用于客户端，您可以在其中开发 MVVM， MVC - 作为应用程序类型， Ajax 将查询发送到服务器端以执行加载、保存等操作。

【讨论】：