动态生成的div InnerHtml呈现与静态编码时

时间:2015-09-04 02:23:06

标签: c# html css html5 innerhtml

我在带有和UpdatePanel的表单中有以下html标记。此代码在静态编码时完全按照我的要求进行渲染/显示。但是,当我在c#codebehind中使用while循环动态地将所有'docbox'元素的代码连接成一个字符串然后将该字符串设置为InnerHtml for div'bookshelf_items'时,它呈现/显示的方式非常不同。看来,在生成第一个.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#代码隐藏

2 个答案:

答案 0 :(得分:0)

试试这个

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

                    }
                }
            }
        }​

答案 1 :(得分:0)

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

将InnerHtml设置为我的div时,以下代码打破了父/子层次结构

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

解决方案是用特定的div close标签替换嵌入的close字符,如下所示:

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

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