如何在另一个旁边显示动态创建的DIV?

时间:2013-04-25 16:25:59

标签: c# asp.net html .net css

我正在创建一个页面,它将在页面上创建日志文件。这是我的前端:

                <div id="container">
                <asp:UpdatePanel UpdateMode="Conditional" runat="server"     ID="ServerUpdates"> 
                    <Triggers>
                        <asp:AsyncPostBackTrigger ControlID="Timer" />
                    </Triggers>
                </asp:UpdatePanel>
            </div>
        </div>

这是我的css:

#container {
width:100%;
display: inline-block;
height:100%;
}

.textboxStatus
{
 /*background-image:url('http://placehold.it/15/15');*/
 background-repeat:no-repeat;
/* background-position:3px 3px;*/
 border:solid 1px black;
 padding:20px;
 width:600px;
 height:500px;
 float:left;
 clear:left;
 /*position:relative;*/
}
/*.textbox input
{
 border:none;
 background:transparent;
 width:100%;     
 outline: none;
}*/
.textboxURL
{
 /*background-image:url('http://placehold.it/15/15');*/
 background-repeat:no-repeat;
/* background-position:3px 3px;*/
 border:solid 1px black;
 padding:20px;
 width:575px;
 height:475px;
 float:right;
 /*clear: right;
 position:relative;*/
 display:inline;
}

这是我背后的代码:

        protected void CreateDiv(object sender, EventArgs e)
    {
        string path = @"\\server\d$\websites\Updates\Product\Production\Logs";
        //int rowCount = 0;

        DirectoryInfo dir = new DirectoryInfo(path);
        List<FileInfo> FileList = dir.GetFiles().ToList();
        ServerUpdates.ContentTemplateContainer.Controls.Add(new LiteralControl("<asp:GridView runat='server' ID='Grid' AutoGenerateColumns='false'>"));
        ServerUpdates.ContentTemplateContainer.Controls.Add(new LiteralControl("<Columns>"));

        foreach (FileInfo file in FileList)
        {

            StreamReader sr = new StreamReader(new FileStream(file.FullName, FileMode.Open, FileAccess.Read, FileShare.ReadWrite));

            // string[] findStatus = System.IO.Directory.Exists(path, "codepush.log.*", System.IO.SearchOption.TopDirectoryOnly);
            // string[] findURL = System.IO.Directory.GetFiles(path, "sql.output.log.*", System.IO.SearchOption.TopDirectoryOnly);
            bool findStatus = (file.Name.Contains("codepush.log.")) ? true : false;//File.Exists(Path.Combine(path, ".txt"));
            bool findURL = (file.Name.Contains("sql.output.")) ? true : false;

            if (findStatus == true)
            {
                //ServerUpdates.ContentTemplateContainer.Controls.Add(new LiteralControl(String.Format("<br /><div class=\"statusLog\"><asp:TextBox runat=\"server\" id=\"tbStatus{0}\"/> </div><div class=\"urlLog\"></div>", count)));
                //(TextBox)ServerUpdates.ContentTemplateContainer.FindControl("tbStatus" + count.ToString());
                ServerUpdates.ContentTemplateContainer.Controls.Add(new LiteralControl(string.Format("<asp:BoundField Datafield={0} /><div class='textboxStatus'>", rowCount)));
                TextBox txt = new TextBox();
                txt.TextMode = TextBoxMode.MultiLine;
                txt.Wrap = false;
                txt.Width = 600;
                txt.Height = 500;

                while (!sr.EndOfStream)
                    txt.Text = txt.Text + sr.ReadLine() + "\r\n";
                //Panel txt = new Panel();
                //txt.ScrollBars = ScrollBars.Vertical;
                //txt.Wrap = true;
                ServerUpdates.ContentTemplateContainer.Controls.Add(txt);
                ServerUpdates.ContentTemplateContainer.Controls.Add(new LiteralControl("</div>"));
                ServerUpdates.ContentTemplateContainer.Controls.Add(new LiteralControl("</Columns>"));
            }

            if (findURL == true)
            {
                //ServerUpdates.ContentTemplateContainer.Controls.Add(new LiteralControl(String.Format("<br /><div class=\"statusLog\"><asp:TextBox runat=\"server\" id=\"tbStatus{0}\"/> </div><div class=\"urlLog\"></div>", count)));
                //(TextBox)ServerUpdates.ContentTemplateContainer.FindControl("tbStatus" + count.ToString());
                ServerUpdates.ContentTemplateContainer.Controls.Add(new LiteralControl("<Columns>"));
                ServerUpdates.ContentTemplateContainer.Controls.Add(new LiteralControl(string.Format("<asp:BoundField Datafield={0} /><div class='textboxURL'>", rowCount)));
                TextBox txt = new TextBox();
                txt.TextMode = TextBoxMode.MultiLine;
                txt.Wrap = false;
                txt.Width = 575;
                txt.Height = 475;

                while (!sr.EndOfStream)
                    txt.Text = txt.Text + sr.ReadLine() + "\r\n";
                //Panel txt = new Panel();
                //txt.ScrollBars = ScrollBars.Vertical;
                //txt.Wrap = true;
                ServerUpdates.ContentTemplateContainer.Controls.Add(txt);
                ServerUpdates.ContentTemplateContainer.Controls.Add(new LiteralControl("</div>"));
                ServerUpdates.ContentTemplateContainer.Controls.Add(new LiteralControl("</Columns>"));
           }
            //rowCount++;
        }
        ServerUpdates.ContentTemplateContainer.Controls.Add(new LiteralControl("</asp:GridView>"));
    }

我的问题是它没有显示第一个Status div旁边的URL div,所以第四个。 URL div最后显示。

我需要它来显示每个div(文件)的Status div旁边的URL div。

我一直在尝试GridView,所以任何建议都会有所帮助。

4 个答案:

答案 0 :(得分:1)

我不确定我是否理解这个问题,但是对于你的问题“它没有显示第一个状态div旁边的URL div,所以第四个.URL div显示最后一个,”我推荐以下内容:

<div class="row">
  <div class="textboxStatus">
  </div>
  <div class="textboxURL">
  </div>
</div>

float: left;应用于textboxStatustextboxURL。我理解,这是动态生成的,但是,为什么AJAX不能获取内容然后只是填充它?

您可以轻松地将AJAX与webforms一起使用:

http://encosia.com/using-jquery-to-directly-call-aspnet-ajax-page-methods/

答案 1 :(得分:1)

在你的“.textboxStatus”css-class中,你已经定义了一个“float:left”并且使用“clear:left”同时清除了float。

删除这两个属性,在“.textboxURL”中将“float:right”替换为“float:left”,你应该没问题。

答案 2 :(得分:1)

首先我们将定义主div或body,其中将包含其他div,样式将为

  #maindiv{
          width: 100%;
          font-size: 12px;
          overflow: hidden;
          background: #ccc
    }

在你的情况下,它将是“容器”

现在将div添加为

然后第一个div风格将是

         #leftdiv {
                 float: left; 
                 width: 33%;
                 background-color: #bbb;
          }

之后设置每个div的宽度并将宽度设置为该d的样式

    #nextdiv { 
             float: left;
              background-color: #eee;
             width: 33%;
      }

依旧......

答案 3 :(得分:0)

您应该使用一行<TABLE>和多列<TR>生成<td>,而不是通过Literal控件生成Asp.net Gridview控件。

请记住在使用Literal控件时编写Html标记

最终html示例:

<Table>
<tr>
<td>First div inside</td>
<td>Second div inside</td>
...
</tr>
</Table>
相关问题