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

Question

I am creating a page that will display log files on a page dynamically as they are created. Here is my front end:

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

Here is my 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;
}

Here is my code behind:

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

My issue is that it is not displaying the URL div next to the first Status div and so fourth. The URL div displays last.

I need it to display the URL div next to the Status div for each div (file).

I have been trying GridView so any suggestions would be helpful.

Answer 1

I am not sure I understand the problem, but to your issue " it is not displaying the URL div next to the first Status div and so fourth. The URL div displays last," I recommend the following:

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

Apply float: left; to both textboxStatus and textboxURL . I understand, this is dynamically generated, but instead, why not AJAX to fetch the content and then simply fill it?

You can easily use AJAX with webforms like so:

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

Answer 2

In your ".textboxStatus" css-class you have defined a "float:left" and are clearing the float at the same time with "clear:left".

Remove both attributes and in ".textboxURL" replace "float:right" with "float:left" and you should be fine.

Answer 3

first we will define the main div or body in which other will be contained for that div the style will be

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

in your case it will be "container"

now when you are adding the divs as

then first div style will be

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

after that set the width of each div and put the width to the style of that d

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

and so on..

Answer 4

You should generate a <TABLE> with one line <TR> and multiple columns <td> instead of generating an Asp.net Gridview control by Literal controls.

Remember to write Html tags when you use Literal controls

Example of final html:

<Table>
<tr>
<td>First div inside</td>
<td>Second div inside</td>
...
</tr>
</Table>