显示每个数据库对象的 HTML

Question

我有一个学校项目，它看起来像 Facebook。当用户登录时，它将从数据库中收到许多帖子。我正在使用 ASP.NET WebForms。

但是我怎样才能为数据库中的每个帖子创建 HTML 代码呢？

这是一篇文章的 HTML 代码：

<article class="post">
    <header>
        <div class="title">
            <h2><a href="#">Post Title</a></h2>
        </div>
        <div class="meta">
            <time class="published" datetime="2015-11-01">November 1, 2015</time>
            <a href="profile.html" class="author"><span class="name">Jane Doe</span><img src="images/avatar.jpg" alt="" /></a>
        </div>
    </header>
    <a href="#" class="image featured"><img src="images/pic01.jpg" alt="" /></a>
    <p>Post text</p>
    <footer>
        <ul class="actions">
            <li><a href="#" class="button big">View Comments</a></li>
        </ul>
        <ul class="stats">
            <li><a href="#" class="icon fa-heart">28</a></li>
            <li><a href="#" class="icon fa-comment">128</a></li>
        </ul>
    </footer>
</article>

我真的不知道如何为每个数据库对象制作这个 HTML 博客。

数据库中的数据不多，所以现在一次加载所有帖子没有问题。

Answer 1

我会制作像这样的简单数据库表：

帖子表格

PostID     - int (primary key)
Title      - nvarchar
Status     - varchar (Published, Pending, etc.)
PostDate   - datetime
UserID     - int (foreign key)
Image      - varchar (save the file name / file path + file name)
Post       - nvarchar
Likes      - int (count total)
Comments   - int (count total)

用户表

UserID     - int (primary key)
FirstName  - nvarchar
LastName   - varchar
Image      - varchar (save the file name / file path + file name)

然后在 .aspx 中，我将使用 Repeater 或 ListView ASP.NET 控件并在其中放置 HTML 标记：

<asp:ListView id="lvPosts" runat="server">
    <ItemTemplate>
        <article class="post">
            <header>
                <div class="title">
                    <h2><a href='details.aspx?ID=<%# Eval("PostID) %>'><%# Eval("Title") %></a></h2>
                </div>
                <div class="meta">
                    <time class="published" datetime='<%# Eval("PostDate", "{0: yyyy-MM-dd}") %>'><%# Eval("PostDate", "{0: MMMM dd, yyyy}") %></time>
            <a href="profile.aspx?ID=<%# Eval("UserID") %>' class="author"><span class="name"><%# Eval("Username") %></span><img src='images/<%# Eval("UserImage") %>' alt="" /></a>
                </div>
            </header>
            <a href='post.aspx?ID=<%# Eval("PostID") %>' class="image featured"><img src='images/<%# Eval("PostImage") %>' alt="" /></a>
            <p><%# Eval("Post")</p>
            <footer>
                <ul class="actions">
                    <li><a href="#" class="button big">View Comments</a></li>
                </ul>
                <ul class="stats">
                    <li><a href="#" class="icon fa-heart"><%# Eval("Likes")</a></li>
                    <li><a href="#" class="icon fa-comment"><%# Eval("Comments")</a></li>
                </ul>
            </footer>
        </article>
    </ItemTemplate>
</asp:ListView>

在代码隐藏中，我将创建一个允许设置 ASP.NET 控件的数据源值的方法。

我还可以包含一个简单的 SQL 语句来显示 Eval() 方法所需的每个数据：

SELECT p.PostID, p.Title, p.PostDate, p.UserID,
u.FirstName + ' ' + u.LastName as Username, 
p.Image as PostImage, u.Image as UserImage,
p.Post, p.Likes, p.Comments FROM Posts p
JOIN Users u ON u.UserID = p.PostID
// include WHERE keyword if conditions are needed

您可能还需要使用 CSS 来分隔每个帖子。要显示的项目数将基于您的查询。

希望这些有所帮助。我没有费心检查 IDE 的语法。编码愉快！