动态生成的 div InnerHtml 呈现与静态编码时非常不同答案

【问题标题】：Dynamically generated div InnerHtml rendering very different than when statically coded动态生成的 div InnerHtml 呈现与静态编码时非常不同
【发布时间】：2015-11-30 02:04:07
【问题描述】：

我在带有和 UpdatePanel 的表单中有以下 html 标记。此代码在静态编码时完全按照我的意愿呈现/显示。但是，当我在 c# 代码隐藏中使用 while 循环将所有“docbox”元素的代码动态连接到一个字符串中，然后将该字符串设置为 div 'bookshelf_items' 的 InnerHtml 时，它的呈现/显示非常不同。似乎在生成第一个 .docbox div 之后，后续的 docbox div 都在其中。另一个奇怪的事情是，在“bookshelf_items”之后应该显示的所有内容都消失了。

编辑

 <div class="bookshelf_items" id="bookshelf_items" runat="server">

                    <div class='docbox'>
                        <div class='doc' contenteditable='true' id='doc_50'>
                            <div class='doc_title'>TEST TITLE</div>
                            <div class='doc_txt'>TEST TEXT</div>
                        </div>
                        <div class='doc_date'>TEST DATE</div>
                        <div class='doc_del' ID='del_50' runat='server'  />
                        <div class='doc_getlyt' ID='getlyt_50' runat='server' />
                    </div>

  </div>

编辑 - 移除 CSS 编辑 - 删除了 C# 代码隐藏

【问题讨论】：

请缩小问题范围。使代码尽可能小，同时它仍然会产生问题。或许你会顺便找到原因和解决办法。
我对 1 到 4 个 'docbox' div 元素做了同样的事情，结果相同。我还用一个非常简单的“xxyy”字符串替换了动态插入的变量，以防万一数据库中的动态内容内部发生了一些事情并且结果相同。在等待帮助的同时，我会继续积极排除故障。
如果您能够使您的代码更小/更简单仍然遇到同样的问题，请更新帖子，以便其他人更容易分析它。

标签： c# css html innerhtml

【解决方案1】：

试试这个

        private void GetUserDocs(string user_id)
        {

            using (SqlConnection connection = new SqlConnection(conn))
            using (SqlCommand cmd = new SqlCommand("SELECT id, title, alias, dt from dbo.user_works WHERE user_id = @user_id", connection))
            {
                cmd.Parameters.AddWithValue("user_id", user_id);
                connection.Open();
                using (var reader = cmd.ExecuteReader())
                {

                    // Check if the reader has any rows at all before starting to read.
                    if (reader.HasRows)
                    {
                        string doclist_html = "<div class=\"bookshelf_items\" id=\"bookshelf_items\" runat=\"server\">";
                        while (reader.Read())
                        {
                            string doc_id = reader["id"].ToString().Trim();
                            string title = reader["title"].ToString().Trim();
                            string alias = reader["alias"].ToString().Trim();
                            string dt = reader["dt"].ToString().Trim();
                            string date = DateTime.Parse(dt).ToShortDateString();

                            //build doc html
                            doclist_html = doclist_html + String.Format(
                                     "<div class='docbox'>" +
                                        "<div class='doc' contenteditable='true' id='doc_x{0}'>" +
                                                "<div class='doc_title'>{1}" +
                                                "</div>" +
                                                "<div class='doc_txt'>{2}" +
                                                "</div>" +
                                        "</div>" +
                                        "<div class='doc_date'>{3}</div>" +
                                            "<div class='doc_del' ID='del_{0}' runat='server'  />" +
                                            "<div class='doc_getlyt' ID='getlyt_{0}' runat='server' />" +
                                    "</div>",
                                    doc_id, title, alias, date);


                        }
                        doclist_html += "</div>";
                        bookshelf_items.InnerHtml = doclist_html;


                        string testhtml = bookshelf_items.InnerHtml;
                    }
                    else
                    {
                        //username not found
                        lbl_error.Text = ">>Failed to get documents<<";

                    }
                }
            }
        }

【讨论】：

当我有一个成员加入集合时，这几乎似乎有所帮助，因为它带回了“bookshelf_items”之后的所有内容，但该成员本身看起来仍然损坏，但是我向数据库添加了第二条记录并它再次打破了整个事情。你介意我问你对这个的看法吗？
尝试添加以下内容：cmd.CommandTimeout = 300;默认值为 30 秒，对于分段的 SQL Express 数据库，通话时间可以超过 30 秒。

【解决方案2】：

我想出了解决我自己问题的方法，我想在这里发布答案，以防其他人遇到同样的问题

在我的 div 中设置 InnerHtml 时，以下代码破坏了父/子层次结构

<div class='doc_del' ID='del_54 runat='server' />
<div class='doc_getlyt' ID='getlyt_54' runat='server' />

解决方法是将嵌入的关闭字符替换为特定的 div 关闭标记，如下所示：

<div class='doc_del' ID='del_54 runat='server'></div>
<div class='doc_getlyt' ID='getlyt_54' runat='server'></div>

希望这可以节省一些时间和挫败感。我不知道为什么它会这样工作。也许知道的人会分享。感谢那些对我的问题发表评论的人

【讨论】：