为什么在 Postback 后复制 innerHTML 时要插入逗号？答案

【问题标题】：Why are commas inserted when innerHTML is copied after Postback?为什么在 Postback 后复制 innerHTML 时要插入逗号？
【发布时间】：2008-12-04 22:26:27
【问题描述】：

这个案子听起来很复杂，但还不错。这段代码末尾的 javascript似乎是正确的。

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

http://69.64.80.239/tmp/borked2.aspx

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

第二种情况只是使用了一个 onClientClick，并在没有回发的情况下执行 javascript。

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

当回发发生时，'value=","' 属性出现在我的文本框中，这是以前没有的。越来越多的逗号适合新添加的属性。

这个案例被极度精简，以有效地突出问题。最终，这导致了一个详细信息视图，我正在执行相同的副本，以在它提交的每个表单值的开头添加一个逗号。

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

<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 代码隐藏

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

}

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

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

// Javascript 函数函数展开（图像，索引）{ // 获取图片的来源 var src = image.getAttribute("src");

    // 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);
    }

【问题讨论】：

是否可以将网站或页面放在网络上，以便我们可以看到它的运行情况。很难从帖子中全面了解您要完成的工作。
页面已发布。请参阅我编辑的链接。

标签： c# asp.net javascript

【解决方案1】：

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

对于一个解决方案，如果您只需要显示或隐藏一个 div，最好的方法是从 javascript、客户端通过更改该 div 的样式（可见性）而不是克隆它来实现。这样，您的功能可以减少到一行代码。

【讨论】：

这正是发生的事情......我正在使用它来扩展gridview，因此使div可见是行不通的，因为脚本做了更多。但是，我所要做的就是添加行以删除我在扩展后复制的 div。所有扩展都是在服务器端以一种方式完成的，因此不需要折叠。

【解决方案2】：

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

这最终会连接用逗号分隔的两个值。

【讨论】：