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

Question

这个案例听起来很复杂，但并没有那么糟糕。这段代码末尾的 javascript 似乎是正确的。

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

http://69.64.80.239/tmp/borked2.aspx

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

第二种情况仅使用 onClientClick，并在没有回传的情况下执行 javascript。

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

当回发发生时，我的文本框中出现了一个以前不存在的“value=",""属性。越来越多的逗号适合新添加的属性。

这个案例非常精简，以有效地突出问题。最终这导致了一个细节 View ，我正在执行相同的副本以在它提交的每个表单值的开头添加一个逗号。

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

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

Answer 1

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

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