利用C#實現(xiàn)HTML模板的循環(huán)輸出
關(guān)于模板循環(huán)輸出
數(shù)據(jù)感應(yīng)也即數(shù)據(jù)捆綁，是一種動態(tài)的，Web控件與數(shù)據(jù)源之間的交互，模板循環(huán)輸出 ，是指使用 UI 前端設(shè)計的 HTML 模板片斷，并結(jié)合數(shù)據(jù)記錄進(jìn)行循環(huán)輸出的過程，比如，有如下如圖輸出 ：
如圖人員列表是一個循環(huán)輸出的過程，我們按照圖示設(shè)計模板，并結(jié)合數(shù)據(jù)查詢結(jié)果即可，模板代碼如下：
<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 即為設(shè)計模板片斷，其設(shè)計要點如下：
（1）需要添加 runat="server" 服務(wù)器標(biāo)記
（2）輸出的數(shù)據(jù)，用花括號和字段名表示，如代碼中的 "{wxmpCid}","{name}" 。字段名可以用DataSet.Tables.Colums 里的序號進(jìn)行表示，如 “{0}”，“{1}” ，用序號表示，性能會略有提升，但從代碼易讀性來講相對較差。
（3）不可在模板中放置其它服務(wù)器控件
id 為 result 的 Literal 控件（用于顯示最原始狀態(tài)靜態(tài)文本的輸出控件），隸屬于Microsoft.Web.UI.WebControls 集合，該控件用于存儲并顯示最后的輸出結(jié)果。
本文將介紹如何中通過 C# 實現(xiàn)操作 HTML 模板的循環(huán)輸出。
準(zhǔn)備數(shù)據(jù)源
我們在 MS SQL Server 創(chuàng)建 CCVC_PriceList（支付卡等級表），其結(jié)構(gòu)如下表：
| 序號 | 字段名 | 類型 | 說明 |
|---|---|---|---|
| 1 | [PName] | [nvarchar](10) | 產(chǎn)品名稱 |
| 2 | [CCVC] | [int] | 初始積分 |
| 3 | [Price] | [money] | 產(chǎn)品價格 |
| 4 | [LogoUrl] | [nvarchar](500) | 產(chǎn)品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)建一些數(shù)據(jù)：
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語句，顯示如下圖：
最后我們將數(shù)據(jù)填充到 DataReader ,并生成對應(yīng)的二維數(shù)組。
范例運(yùn)行環(huán)境
操作系統(tǒng)： Windows Server 2019 DataCenter
數(shù)據(jù)庫：Microsoft SQL Server 2016
.net版本： .netFramework4.0 或以上
開發(fā)工具：VS2019 C#
RepeatHtml 方法
設(shè)計與實現(xiàn)
RepeatHtml 方法主要是通過 object[,] 二維對象數(shù)組數(shù)據(jù)源進(jìn)行提取并根據(jù)模板 HTML 循環(huán)輸出到指定的接收控件上，其參數(shù)設(shè)置見下表：
| 序號 | 參數(shù)名 | 類型 | 說明 |
|---|---|---|---|
| 1 | Html | string | 要輸出的 HtmlTable 對象 |
GetReaderData 方法可以訪問數(shù)據(jù)庫數(shù)據(jù)表進(jìn)行查詢結(jié)果的提取，并轉(zhuǎn)化為 object[,] 二維數(shù)組
RepeatHtml 方法實現(xiàn)代碼如下：
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如何獲取模板內(nèi)容
獲取服務(wù)器控件的內(nèi)容元素可劃分為兩個范圍，類似 JavaScript 里的 innerHTML（獲取 HTML 元素內(nèi)部的內(nèi)容，即元素的子節(jié)點，不包括元素本身的標(biāo)簽）和 outerHTML（除了包含 innerHTML 的全部內(nèi)容外，還包含對象標(biāo)簽本身，用于獲取 HTML 元素及其包含的內(nèi)容的完整HTML表示，包括元素本身在內(nèi)），下面我們將逐一實現(xiàn)這兩種服務(wù)器方法：
getOuterHtml 方法
getOuterHtml 通過傳遞服務(wù)器控件參數(shù)，獲取服務(wù)器控件完整的HTML元素內(nèi)容，代碼如下：
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 方法，獲取服務(wù)器控件內(nèi)部元素的所有內(nèi)容，傳遞參數(shù)用法相同，實現(xiàn)代碼如下：
public string getInnerHtml(Control ctl)
{
string str = "";
for (int j = 0; j < ctl.Controls.Count; j++)
{
str += getOuterHtml(ctl.Controls[j]);
}
return str;
}調(diào)用示例
客戶端模板設(shè)計代碼如下：
<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>服務(wù)端示例代碼如下：
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 模板塊，需要在調(diào)用前顯示，調(diào)用后隱藏。
調(diào)用成功顯示效果如下圖所示：
小結(jié)
RepeatHtml 方法一般配合 getOuterHtml 方法使用，如果運(yùn)行出現(xiàn)服務(wù)器字符串格式錯誤，請檢查花括號輸出的字段是否存在以及大小寫情況，盡量與SQL語句輸出保持一致。以上就是關(guān)于模板循環(huán)輸出的介紹，我們可以根據(jù)自己的實際需要進(jìn)行改造，本示例代碼僅供您參考。
以上就是利用C#實現(xiàn)HTML模板的循環(huán)輸出的詳細(xì)內(nèi)容，更多關(guān)于C#模板循環(huán)輸出的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
c#調(diào)用arcgis地圖rest服務(wù)示例詳解(arcgis地圖輸出)
ArcGIS REST API提供了簡單、開放的接口來訪問和使用ArcGIS Server發(fā)布的服務(wù)。使用ArcGIS REST API通過URL可以獲取和操作每一個服務(wù)中的所有資源和操作2013-12-12
C#使用StackExchange.Redis實現(xiàn)分布式鎖的兩種方式介紹
分布式鎖在集群的架構(gòu)中發(fā)揮著重要的作用,這篇文章主要為大家介紹了C#使用StackExchange.Redis實現(xiàn)分布式鎖的兩種方式,希望對大家有一定的幫助2025-04-04
用.net自帶的FtpWebRequest做的ftp客戶端得程序，有一個功能實現(xiàn)起來會非?？嚯y，就是移動文件和文件夾的功能。所以后來又找了一個類，用socket實現(xiàn)的，發(fā)現(xiàn)比用ftpWebRequest功能要強(qiáng)?；镜膄tp客戶端得命令都實現(xiàn)了。2015-05-05
StackExchange.Redis?是?C#?操作?Redis?數(shù)據(jù)庫的客戶端，本文通過圖文并茂的形式給大家介紹C#?StackExchange.Redis?用法匯總，感興趣的朋友一起看看吧2021-12-12
這篇文章主要介紹了C#實現(xiàn)Dev Grid拖拽移動行的方法,可實現(xiàn)Dev Grid拖拽移動行的效果,非常具有實用價值,需要的朋友可以參考下2015-05-05
PDF 文件如果文件太大則會影響傳輸效果同時也會占用過多磁盤空間,所以這篇文章主要為大家詳細(xì)介紹了如何使用C#實現(xiàn)有效地壓縮 PDF 文件,需要的可以參考下2023-11-11
這篇文章主要想來和大家一起討論一下C#線程本地存儲中為什么線程間值不一樣,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01
Unity?UGUI的VerticalLayoutGroup垂直布局組件介紹使用
這篇文章主要為大家介紹了Unity?UGUI的VerticalLayoutGroup垂直布局組件介紹使用，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
這篇文章主要介紹了C#中Params的用法,以實例的形式展示了采用Params在不知道參數(shù)的數(shù)量時的應(yīng)用技巧,非常具有實用價值,需要的朋友可以參考下2014-11-11
裝飾器是wpf中可以浮在控件上面的一種組件，我們通?？梢杂脕韺崿F(xiàn)一些諸如控件拖動點、提示框、自定義鼠標(biāo)等界面功能。本文主要是利用附加屬性實現(xiàn)界面上定義裝飾器，需要的可以參考下2022-12-12