您现在的位置：程式碼之家 >> 編程語言 > >> 更多程式語言 >> 程式設計疑難解答

ASP.NET 動態網頁連接數據庫：從靜態 HTML 遷移到 Repeater 數據綁定

編輯：程式設計疑難解答

遷移策略

保留現有 HTML 結構作為模板，使用 ASP.NET 數據綁定控件（Repeater/ListView/GridView）實現動態渲染。

核心步驟

1. 提取重復 HTML 片段作為 ItemTemplate

<!-- 原靜態 HTML (每篇文章重復部分) -->
<div class="post">
    <h2>文章標題</h2>
    <span class="author">作者名</span>
    <span class="time">2024-01-15</span>
    <div class="content">文章內容摘要...</div>
</div>

2. 使用 Repeater 控件綁定

<asp:Repeater ID="rptPosts" runat="server">
    <ItemTemplate>
        <div class="post">
            <h2><%# Eval("Title") %></h2>
            <span class="author"><%# Eval("Author") %></span>
            <span class="time"><%# Eval("PublishTime", "{0:yyyy-MM-dd}") %></span>
            <div class="content"><%# Eval("Summary") %></div>
        </div>
    </ItemTemplate>
    <SeparatorTemplate><hr /></SeparatorTemplate>
    <HeaderTemplate><div class="post-list"></HeaderTemplate>
    <FooterTemplate></div></FooterTemplate>
</asp:Repeater>

3. 後台代碼綁定數據

protected void Page_Load(object sender, EventArgs e) {
    if (!IsPostBack) {
        BindPosts();
    }
}

private void BindPosts() {
    string connStr = ConfigurationManager.ConnectionStrings["BlogDB"].ConnectionString;
    string sql = "SELECT Title, Author, PublishTime, Summary FROM Posts ORDER BY PublishTime DESC";
    
    using (SqlConnection conn = new SqlConnection(connStr))
    using (SqlCommand cmd = new SqlCommand(sql, conn))
    using (SqlDataAdapter adapter = new SqlDataAdapter(cmd)) {
        DataTable dt = new DataTable();
        adapter.Fill(dt);
        rptPosts.DataSource = dt;
        rptPosts.DataBind();
    }
}

進階優化

優化點	方案	代碼示例
分頁	`DataPager` + `ListView` 或 `GridView` + `PagerSettings`	`ListView` 內置分頁支持
參數化查詢防注入	`SqlParameter`	`cmd.Parameters.AddWithValue("@cat", category)`
緩存減少 DB 壓力	`OutputCache` / `MemoryCache`	`[%@ OutputCache Duration="60" VaryByParam="*" %]`
異步加載提升響應	`PageAsyncTask` / `async/await`	`public async Task BindPostsAsync()`
前端模板引擎	Knockout/Vue/React + WebAPI	分離前後端，Repeater 僅輸出 JSON

Repeater vs GridView vs ListView

控件	HTML 控制度	內置功能	性能	推薦場景
Repeater	完全控制 (無外層 table)	無 (純模板)	最輕量、最快	自定義佈局、博客列表、產品展示
GridView	輸出 table，難定制	分頁、排序、編輯、選擇	較重	後台管理、表格數據、快速原型
ListView	完全控制	分頁、排序、編輯、分組	中等	需要分頁/編輯的列表頁

數據訪問層最佳實踐 (ADO.NET 核心模式)

public class PostRepository {
    private readonly string _connStr;
    
    public PostRepository(string connStr) { _connStr = connStr; }
    
    public IEnumerable<Post> GetPosts(int page, int pageSize) {
        var posts = new List<Post>();
        string sql = @"SELECT Title, Author, PublishTime, Summary 
                       FROM Posts ORDER BY PublishTime DESC
                       OFFSET @offset ROWS FETCH NEXT @pageSize ROWS ONLY"; // SQL Server 2012+
        
        using (var conn = new SqlConnection(_connStr))
        using (var cmd = new SqlCommand(sql, conn)) {
            cmd.Parameters.AddWithValue("@offset", (page - 1) * pageSize);
            cmd.Parameters.AddWithValue("@pageSize", pageSize);
            conn.Open();
            using (var reader = cmd.ExecuteReader()) {
                while (reader.Read()) {
                    posts.Add(new Post {
                        Title = reader.GetString(0),
                        Author = reader.GetString(1),
                        PublishTime = reader.GetDateTime(2),
                        Summary = reader.GetString(3)
                    });
                }
            }
        }
        return posts;
    }
}