Placeholder control, and aligning child controls

Question

I have a program that displays messages posted to a forum. Right now, I am using the Response.Write method in the code behind to insert the HTML I want. But I would much rather avoid putting HTML in the code behind (because it is not in the spirit of the whole code behind/design separation feature of .NET). I would like to use a content placeholder, and insert child controls dynamically. However, I can only seem to insert them side by side, and one after another. I would like to have something that looks like this:

Table Column 1       Table Column 2
Username: [UserName]      
[MessageSubject]
Posted on: [PostDate]
User Rating: [UserRating]

But the only thing I can seem to accomplish is:

Username: [UserName]Posted On: [PostDate] User Rating [UserRating][MessageSubject], without links or formatting.

How do I put paragraphs, line breaks, form buttons and regular hyperlinks into a content placeholder, and make them align the way I want them to?

Answer 1

Try this overview on Web Parts. Or more simply, just use User Controls

Answer 2

You could do something like this:

<table>
<tr><td>Table Column 1</td><td>Table Column 2</td></tr>
<tr><td>Username:</td><td>[UserName]</td></tr>
<tr><td></td><td><p>[MessageSubject]</td></tr>
<tr><td>Posted On:</td><td>[PostDate]</td></tr>
<tr><td>User Rating:</td><td>[UserRating]</td></tr>
</table>

This will produce something like this:

Some may argue with me or vote me down, but tables are not evil, it's how you use them that is.

Answer 3

Tom, I've implemented essentially the exact same pattern as you are attempting.

Keep in mind that the important distinction isn't between the ASPX and the code-behind but rather between the UI and the business logic. Indeed, the code-behind for ASPX pages is all about ensuring appropriate UI behavior. Worse yet, the attempt to stay pure in this regard is preventing you from executing the design you seek. In the end, I did end up placing spacing HTML - in code - between my controls in order to make the layout work and have never regretted it.

Rather than focusing on the ASPX/Code-behind distinction, I'd strongly suggest that you focus on pulling apart your UI code from your business logic. To do this, just add a Class Library (DLL) project to your solution and then place a reference to the DLL in your BIN directory. You will then have the ASPX page make calls into the DLL to execute business rules and pull information from your database. That is the distinction that makes sense from a best-practices perspective.

Answer 4

You do it much the same way as you would int the .aspx page, for example:

Table table = new Table();
TableRow row1 = new TableRow();
table.Rows.Add(row1);
TableCell cell1 = new TableCell();
TableCell cell2 = new TableCell();
row1.Cells.Add(cell1);
row1.Cells.Add(cell2);
Label label1 = new Label();
label1.Text = "Username:";
cell1.Controls.Add(label1);
TextBox textBox1 = new TextBox();
textBox1.ID = "userNameTextBox";
cell2.Controls.Add(textBox1);
// and so on...
myPlaceholder.Controls.Add(table);

would be equivalent to:

<asp:Table runat="server">
  <asp:TableRow runat="server">
    <asp:TableCell runat="server">
      <asp:Label runat="server" Text="Username:" />
    </asp:TableCell>
    <asp:TableCell runat="server">
      <asp:TextBox runat="server" ID="userNameTextBox" />
    </asp:TableCell>
  </asp:TableRow>
</asp:Table>

Of course the code could be cleverer, this is just to illustrate the point. Any hierarchy of controls you can build declaratively to control you layout, you can do programatically too.

Answer 5

I agree that turning this into a UserControl is probably the right way to go. I would propose outputting html similar to the following:

<div class="message">
    <div>
        <span class="column1">Username:</span>
        <span class="column2">[UserName]</span>
    </div>
    <div>[MessageSubject]</div>
    <div>
        <span class="column1">Posted On:</span>
        <span class="column2">[PostedOn]</span>
    </div>
    <div>
        <span class="column1">User Rating:</span>
        <span class="column2">[UserRating]</span>
    </div>
</div>

You can then apply styling via CSS such as:

<style>
    .message .column1
    {
        display: inline-block;
        width: 150px;
    }
    .message .column2
    {
        display: inline-block;
        width: 300px;
    }
</style>

You'll see that the <div> tag is generally the answer to "how do I put this on the next line?"

EDIT: If you're new to web layout, you might appreciate discovering blueprint sooner, rather than later.