利用C#實現HTML模板的循環(huán)輸出

更新時間：2024年06月26日 09:58:07 作者：初九之潛龍勿用

模板循環(huán)輸出 ,是指使用 UI 前端設計的 HTML 模板片斷,并結合數據記錄進行循環(huán)輸出的過程,本文將介紹如何中通過 C# 實現操作 HTML 模板的循環(huán)輸出,文章通過代碼示例講解的非常詳細,需要的朋友可以參考下

關于模板循環(huán)輸出

數據感應也即數據捆綁，是一種動態(tài)的，Web控件與數據源之間的交互，模板循環(huán)輸出，是指使用 UI 前端設計的 HTML 模板片斷，并結合數據記錄進行循環(huán)輸出的過程，比如，有如下如圖輸出：

如圖人員列表是一個循環(huán)輸出的過程，我們按照圖示設計模板，并結合數據查詢結果即可，模板代碼如下：

<div id="pitemdetail" runat="server" class="query-box" onclick="waittip(this);window.location='answer.aspx?cid={wxmpCid}&pid={cid}'" 
                style="border-radius:5px; cursor:pointer; padding:10px; background-color:White; margin-bottom:10px">
                   <div style="display:flex;flex-direction:row; flex-wrap:wrap;justify-content:space-between; "><label style="cursor:pointer; font-size:12pt; color:Gray; "  >
                   <b>{name}</b></label>{dtip}</div>
                    <div style="width:100%; color:Silver; ">{dname}</div>
                    
                    <div></div>
</div><!-- pitemdetail  -->
 
<asp:Literal ID="result" runat="server"></asp:Literal>

其中 id 為 pitemdetail 的 div 即為設計模板片斷，其設計要點如下：

（1）需要添加 runat="server" 服務器標記

（2）輸出的數據，用花括號和字段名表示，如代碼中的 "{wxmpCid}","{name}" 。字段名可以用DataSet.Tables.Colums 里的序號進行表示，如 “{0}”，“{1}” ，用序號表示，性能會略有提升，但從代碼易讀性來講相對較差。

（3）不可在模板中放置其它服務器控件

id 為 result 的 Literal 控件（用于顯示最原始狀態(tài)靜態(tài)文本的輸出控件），隸屬于Microsoft.Web.UI.WebControls 集合，該控件用于存儲并顯示最后的輸出結果。

本文將介紹如何中通過 C# 實現操作 HTML 模板的循環(huán)輸出。

準備數據源

我們在 MS SQL Server 創(chuàng)建 CCVC_PriceList（支付卡等級表），其結構如下表：

序號	字段名	類型	說明
1	[PName]	[nvarchar](10)	產品名稱
2	[CCVC]	[int]	初始積分
3	[Price]	[money]	產品價格
4	[LogoUrl]	[nvarchar](500)	產品Logo

執(zhí)行如下創(chuàng)建表的 SQL 語句：

CREATE TABLE [dbo].[CCVC_PriceList](
	[PName] [nvarchar](50) NOT NULL,
	[CCVC] [int] NOT NULL,
	[Price] [money] NOT NULL,
	[LogoUrl] [nvarchar](500) NULL,
) 
GO

執(zhí)行如下SQL語句，創(chuàng)建一些數據：

 
insert into CCVC_PriceList(PName,CCVC,Price,LogoUrl]) values('禮遇卡',24000,1900.00,'v1.jpg');
insert into CCVC_PriceList(PName,CCVC,Price,LogoUrl]) values('金卡',56000,6900.00,'v2.jpg');
insert into CCVC_PriceList(PName,CCVC,Price,LogoUrl]) values('白金卡',120000,15900.00,'v3.jpg');
insert into CCVC_PriceList(PName,CCVC,Price,LogoUrl]) values('鉆石卡',210000,18900.00,'v4.jpg');
insert into CCVC_PriceList(PName,CCVC,Price,LogoUrl]) values('至尊卡',1000000,78900.00,'v5.jpg');

通過查詢分析器，執(zhí)行查詢SQL語句，顯示如下圖：

最后我們將數據填充到 DataReader ,并生成對應的二維數組。

范例運行環(huán)境

操作系統： Windows Server 2019 DataCenter

數據庫：Microsoft SQL Server 2016

.net版本： .netFramework4.0 或以上

開發(fā)工具：VS2019 C#

RepeatHtml 方法

設計與實現

RepeatHtml 方法主要是通過 object[,] 二維對象數組數據源進行提取并根據模板 HTML 循環(huán)輸出到指定的接收控件上，其參數設置見下表：

序號	參數名	類型	說明
1	Html	string	要輸出的 HtmlTable 對象

GetReaderData 方法可以訪問數據庫數據表進行查詢結果的提取，并轉化為 object[,] 二維數組

RepeatHtml 方法實現代碼如下：

ArrayList paras=new ArrayList();
string refSql="";
bool HasTitle=false;
System.Data.CommandType ct=System.Data.CommandType.Text;
 
 
public string RepeatHtml(string Html)
{
                string rv = "";
                object[,] ReaderData = GetReaderData("SqlServer","您的連接串",refSql,paras,hastitle,ct);
                if (ReaderData == null) return "";
                if (HasTitle == true)
                {
                    for (int k = 0; k < ReaderData.GetLength(1); k++) //列
                    {
                        string fieldname = ReaderData[0,k].ToString();
                        Html = Html.Replace("{" + fieldname + "}", "{" + k.ToString() + "}");
                    }
                }
                for (int i = (HasTitle == true ? 1 : 0); i < ReaderData.GetLength(0); i++) //行
                {
                    object[] repl = new object[ReaderData.GetLength(1)];
                    for (int j = 0; j < ReaderData.GetLength(1); j++) //列
                    {
                        repl[j] = ReaderData[i, j].ToString() ;
                    }
                    rv+=string.Format(Html, repl);
                }
                return rv;
}//RepeatHtml

如何獲取模板內容

獲取服務器控件的內容元素可劃分為兩個范圍，類似 JavaScript 里的 innerHTML（獲取 HTML 元素內部的內容，即元素的子節(jié)點，不包括元素本身的標簽）和 outerHTML（除了包含 innerHTML 的全部內容外，還包含對象標簽本身，用于獲取 HTML 元素及其包含的內容的完整HTML表示，包括元素本身在內），下面我們將逐一實現這兩種服務器方法：

getOuterHtml 方法

getOuterHtml 通過傳遞服務器控件參數，獲取服務器控件完整的HTML元素內容，代碼如下：

public string  getOuterHtml(Control ctl){
                System.Text.StringBuilder strb = new System.Text.StringBuilder();
                System.IO.StringWriter sw = new System.IO.StringWriter(strb);
                System.Web.UI.HtmlTextWriter htw = new HtmlTextWriter(sw);
                ctl.RenderControl(htw);
                string str = strb.ToString();
                return str;
}

getInnerHtml 方法

getInnerHtml 基于 getOuterHtml 方法，獲取服務器控件內部元素的所有內容，傳遞參數用法相同，實現代碼如下：

public string getInnerHtml(Control ctl)
{
                string str = "";
                for (int j = 0; j < ctl.Controls.Count; j++)
                {
                    str += getOuterHtml(ctl.Controls[j]);
                }
                return str;
}

調用示例

客戶端模板設計代碼如下：

<div id="pitemdetail" runat="server" style=" width:270px; border-radius:10px; cursor:pointer; padding:10px; background-color:WhiteSmoke; margin-bottom:10px">
     <div style="display:flex;flex-direction:row; flex-wrap:wrap;justify-content:space-between; ">
     <img src="{LogoUrl}" width="125" height="75" /><div><span style="font-size:14pt;">{PName}</span><div style="width:100%; color:Gray;font-size:9pt "><br>售價：{Price}元<br>贈積分：{CCVC}</div></div></div>
</div><!-- pitemdetail  -->
 
<asp:Literal ID="result" runat="server"></asp:Literal>

服務端示例代碼如下：

string refSql="SELECT [PName],[CCVC],[Price], LogoUrl FROM [CCVC_PriceList]  order by CCVC";
bool HasTitle=false;
System.Data.CommandType ct=System.Data.CommandType.Text;
 
        pitemdetail.Visible = true;
        string itemmodule = getOuterHtml(pitemdetail);
        result.Text = RepeatHtml(itemmodule);
        pitemdetail.Visible = false;

提示：pitemdetail 模板塊，需要在調用前顯示，調用后隱藏。

調用成功顯示效果如下圖所示：