Question

我有一个显示发布到论坛的消息的程序。现在，我在后面的代码中使用Response.Write方法来插入我想要的HTML。但我宁愿避免将HTML放在代码背后（因为它不符合.NET的整个代码背后/设计分离功能的精神）。我想使用内容占位符，并动态插入子控件。但是，我似乎只能并排插入它们，并且一个接一个地插入它们。我想有一些看起来像这样的东西：

表栏第1栏表第2栏用户名：[UserName]
[MessageSubject]
发表于：[PostDate]
用户评价：[UserRating]

但我唯一能做的就是：

用户名：[UserName]发布时间：[PostDate]用户评级[UserRating] [MessageSubject]，没有链接或格式。

如何将段落，换行符，表单按钮和常规超链接放入内容占位符，并按照我希望的方式对齐？

Answer 1

您可以像在.aspx页面中那样执行此操作，例如：

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

相当于：

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

当然代码可能更聪明，这只是为了说明这一点。您可以声明性地构建控件布局的任何控件层次结构，也可以以编程方式进行。

Answer 2

在Web Parts上尝试此概述。或者更简单地说，只需使用User Controls

即可

Answer 3

你可以这样做：

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

这会产生这样的结果：

有些人可能会与我争辩或投票让我失望，但桌子不是邪恶的，而是你如何使用它们。

Answer 4

汤姆，我已经实现了与您尝试的完全相同的模式。

请记住，重要的区别不是ASPX和代码隐藏之间，而是UI和业务逻辑之间。实际上，ASPX页面的代码隐藏是所有关于确保适当的UI行为。更糟糕的是，在这方面保持纯粹的尝试阻止你执行你所寻求的设计。最后，我最终在我的控件之间放置了间距HTML - 在代码中 - 以使布局工作并且从未后悔过。

我强烈建议您专注于从业务逻辑中分离UI代码，而不是专注于ASPX / Code-behind区别。为此，只需将一个类库（DLL）项目添加到您的解决方案，然后在您的BIN目录中放置对DLL的引用。然后，您将使ASPX页面调用DLL以执行业务规则并从数据库中提取信息。是从最佳实践角度出发的区别。

Answer 5

我同意将其转换为UserControl可能是正确的方法。我建议输出类似于以下内容的html：

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

然后，您可以通过CSS应用样式，例如：

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

您会看到<div>标记通常是“如何将其置于下一行？”的答案。

编辑：如果您是网络布局的新手，您可能希望尽快发现blueprint，而不是稍后发现。{/ p>

占位符控件和对齐子控件

5 个答案: