C# 回发后复制innerHTML时为什么插入逗号？

这个案子听起来很复杂，但没那么糟。这段代码末尾的javascript看起来很好

编辑：这是在实时服务器上运行的页面。第一个示例没有在打开和关闭之间交替，因为为了尽可能缩小示例的范围，我删除了很多代码

以下客户端代码中列出了两种情况。第一种情况是在单击imagebutton时返回，并使用imagebutton的clientid作为参数添加对大型javascript函数的调用

第二种情况只是使用onClientClick，在不回发的情况下执行javascript

这两种方法都完成了应该显示的文本框的显示和隐藏。但是，使用回发方法时，每次来回都会插入逗号-先是1，然后是3，然后是7，然后是15，然后是31。这种奇怪的行为不会发生在案例2中，这让我相信本案例中的javascript是可靠的

回发时，我的文本框中会出现一个以前没有的“value=”，“”属性。新添加的属性中包含不断增加的逗号

为了有效地突出问题，本案例被极度简化。最终，这会导致一个我正在执行相同复制的detailsview，在它提交的每个表单值的开头添加一个逗号

我完全被难住了，所以我要尽我所能发布代码！任何想法都将不胜感激

<h5>CASE 1: Using Serverside postback to insert Javascript into a Literal</h5>
<table><tr><td>

    <asp:ImageButton id="CollapseExpand" runat="server" ImageUrl="/images/plus.gif" src="/images/plus.gif"
        AlternateText="Hide Tasks" Width="12" Height="12"  onclick="CollapseExpand_Click"
        />

     <div style="display:none">
     <asp:TextBox runat="server" ID="Textbox1"></asp:TextBox>
     <asp:Button runat="server" ID="btnSubmit1" Text="Submit 1" />
     </div>

    <asp:Literal runat="server" ID="ScriptAnchorTest"></asp:Literal>     

</td></tr></table>

案例1：使用服务器端回发将Javascript插入文本

案例1代码隐藏

protected void CollapseExpand_Click(object sender, ImageClickEventArgs e)
{

    Literal l = (Literal)this.ScriptAnchorTest;
    l.Text = "<script type=\"text/javascript\">Expand(document.getElementById('" + this.CollapseExpand.ClientID + "'));</script>";

}

protectedvoid CollapseExpand\u单击（对象发送者，ImageClickEventArgs e）
{
Literal=（Literal）this.ScriptAnchorTest；
l、 Text=“展开（document.getElementById（'“+this.CollapseExpand.ClientID+”）；”；
}

案例2：直接执行Javascript客户端

//Javascript函数 函数展开（图像、索引）{ //获取图像的来源 var src=image.getAttribute（“src”）

//如果src当前为“plus.”，则将其切换为“minus.png”
如果（src.indexOf（“plus”）>0）{
//切换图像
image.src=image.src.replace（“加”、“减”）；
var tr=image.parentNode.parentNode；
//获取对图像所在的下一行的引用
var next_tr=tr.nextSibling；
//获取对网格标记的引用
var tbody=tr.parentNode；
//获取对图像列的引用
var td=image.parentNode；
变量详细节点
//循环浏览图像列的内容。如果找到隐藏的div，则获取一个引用
对于（var j=0；j

我没有时间阅读您的全部代码，但请注意以下几点：您可能正在复制HTML块并在代码中创建其克隆。这样，您实际上会得到两个具有相同Id的文本框，尽管您只看到其中一个。回发时，浏览器会将这些值连接为逗号分隔的列表。例如le，如果分别在文本框中输入“Test1”和“Test2”，然后提交，两个文本框的值都会翻倍。现在，如果只展开其中一个（比如第一个）并提交，则只有展开的文本框会再次翻倍，而未展开的文本框在回发过程中保持不变

---

对于一个解决方案，如果您只需要显示或隐藏一个div，最好的方法是从javascript客户端更改该div的样式（可见性），而不是克隆它。这样，您的函数可以简化为一行代码。

Sergiu是对的，您正在创建两个具有相同ID“Textbox1”的html输入正如您在使用Firebug捕获的屏幕截图中所看到的

---

这会将两个用逗号分隔的值连接起来。

是否可以将网站或页面放到web上，让我们可以看到它的运行情况。很难从文章中全面了解您试图完成的内容。页面已发布。请查看我编辑的链接。这正是发生的情况……我正在使用此扩展gridview的o使div可见是行不通的，因为脚本做的更多。但是，我所要做的就是添加行以删除扩展后复制的div。所有扩展都是单向服务器端完成的，因此不需要进行折叠。

    <asp:ImageButton id="CollapseExpand2" runat="server" src="/images/plus.gif" 
        AlternateText="Hide Tasks" Width="12" Height="12"  onClientClick="Expand(this); return false;"
        />

     <div style="display:none">
     <asp:TextBox runat="server" ID="TextBox2"></asp:TextBox>
     <asp:Button runat="server" ID="btnSubmit2" Text="Submit 2" />
     </div>

</td></tr></table>    

    // if src is currently "plus.", then toggle it to "minus.png"    
    if (src.indexOf("plus") > 0) {

        //  toggle the  image
        image.src = image.src.replace("plus", "minus");

        var tr = image.parentNode.parentNode;
        // Get a reference to the next row from where the image is
        var next_tr = tr.nextSibling;

        // Get a refernece to the <tbody> tag of the grid
        var tbody = tr.parentNode;

        // Get a reference to the image's column
        var td = image.parentNode;
        var detailnode

        //loop through the content of the image's column. if hidden div is found, get a reference
        for (var j = 0; j < td.childNodes.length; j++) {
            if (td.childNodes[j].nodeType == 1) {
                if (td.childNodes[j].nodeName.toLowerCase() == 'div') {
                    detailnode = td.childNodes[j].cloneNode(true);
                }
            }
        }

        // Create a new table row for "Expand"  
        var newtr = document.createElement('tr');
        var newtd = document.createElement('td');
        var newfirsttd = newtd.cloneNode(true);

        /* insert an empty cell first */
        newtr.appendChild(newfirsttd);
        newtd.colSpan = 8;

        // insert the  hidden div's content  into the new row
        newtd.innerHTML = detailnode.innerHTML;


        newtr.appendChild(newtd);
        tbody.insertBefore(newtr, next_tr);

        tr.className = "selected";
    }


    else {
        image.src = src.replace("minus", "plus");
        var row = image.parentNode.parentNode;
        var rowsibling = row.nextSibling;
        var rowparent = row.parentNode;
        rowparent.removeChild(rowsibling);
    }