如何使用 Javascript 克隆 ASP.NET 控件

Question

我只是想问是否可以使用 Javascript 克隆一个 asp 控件，因为我发现很难添加另一行，与它之前的行相同..

这里是 Javascript：

<script type="text/javascript">
    function deleteRow(row) {
        var i = row.parentNode.parentNode.rowIndex;
        document.getElementById('POITable').deleteRow(i);
    }
    function myFunction()
        {
        var table = document.getElementById("POITable");
        var row = table.insertRow(2);
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var cell3 = row.insertCell(2);
        var cell4 = row.insertCell(3);
        var cell5 = row.insertCell(4);
        var cell6 = row.insertCell(5);
        cell1.innerHTML = row.cells[1].getElementsByTagName('#asp:DropDownList')[0];
        cell2.innerHTML = row.cells[2].getElementsByTagName('#asp:DropDownList')[0];
        cell3.innerHTML = row.cells[3].getElementsByTagName('#asp:TextBox')[0];
        cell4.innerHTML = row.cells[4].getElementsByTagName('#asp:TextBox')[0];
        cell5.innerHTML = row.cells[5].getElementsByTagName('#asp:TextBox')[0];
        cell6.innerHTML = row.cells[6].getElementsByTagName('#asp:Label')[0];
        }
        </script>

这是我要克隆行的表：

<div id="POItablediv">
           <table class="table" id="POITable">
           <tr class="th">
               <td>Fabric</td>
               <td>Color</td>
               <td>Good For How Many</td>
               <td>Consumption</td>
               <td>Allowance</td>
               <td>MRP Quantity</td>
           </tr>
           <tr>
                <td> <asp:DropDownList ID="ddlFab" runat="server" DataSourceID="DSFabric" 
                                DataTextField="Description" DataValueField="Description" Width="120px">
                                </asp:DropDownList></td>
                <td><asp:DropDownList ID="ddlColor" runat="server" DataSourceID="ddlColors" 
                                DataTextField="Description" DataValueField="Description" Width="120px">
                                </asp:DropDownList></td>
                <td><asp:TextBox ID="txtGdForHwMany" runat="server" Width="120px" 
                        ontextchanged="txtGdForHwMany_TextChanged" ></asp:TextBox></td>
                <td><asp:TextBox ID="txtConsump" runat="server" Width="120px" 
                        ontextchanged="txtConsump_TextChanged"></asp:TextBox></td>
                <td><asp:TextBox ID="txtAllow" runat="server" Width="120px" 
                        ontextchanged="txtAllow_TextChanged"></asp:TextBox></td>
                <td><asp:Label ID="lblMRPQuantity" runat="server" Text="0" Width="120px"></asp:Label></td>
                    <td><input type="button" id="delPOIbutton" value="Delete" onclick="deleteRow(this)"/></td>
                    <td><input type="button" id="addmorePOIbutton" value="Add More POIs" onclick="myFunction()"/></td>
           </tr>
           </table>
       </div>

DropDownList 是数据绑定的。

Answer 1

1. 客户端的DropDown 将被转换为“”，因此getElementByTagName 不适用于asp:DropDownList。您将不得不使用 getElementByTagName("select") 之类的方法，或者如果您使用的是 jQuery，那么您可以提供一个类名以进行下拉，并为该类名提供选择器，例如 $(".className") 以获取下拉列表.

2. 类似 标签将是 或使用它的类名

3. 对于 ，标签将是 或者使用它的类名

希望这会有所帮助！

Answer 2

这不会像您期望的那样工作，因为 asp.net 将控件呈现为 HTML。即asp:dropdownlist 变为<select>...</select> ，asp:textbox 是<input type="text/> 等，当呈现到页面时。

此外，如果您成功克隆该行，您的表单元素将拥有重复的 name 和 id 属性。

另一个问题是新元素不会像普通的 asp.net 元素那样暴露在页面后面的代码中。可以使用Request 对象访问，但仍然存在重复名称属性的问题。