C# Web控件与数据感应之模板循环输出

 

目录

关于模板循环输出

准备数据源

​范例运行环境

RepeatHtml 方法

设计与实现

如何获取模板内容

getOuterHtml 方法

getInnerHtml 方法

调用示例 

小结


关于模板循环输出

数据感应也即数据捆绑,是一种动态的,Web控件与数据源之间的交互,模板循环输出 ,是指使用 UI 前端设计的 HTML 模板片断,并结合数据记录进行循环输出的过程,比如,有如下如图输出 :

如图人员列表是一个循环输出的过程,我们按照图示设计模板,并结合数据查询结果即可,模板代码如下:

<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 控件(用于显示最原始状态静态文本的输出控件),隶属于Microsoft.Web.UI.WebControls 集合,该控件用于存储并显示最后的输出结果。

本文将介绍如何中通过 C# 实现操作 HTML 模板的循环输出。

准备数据源

我们在 MS SQL Server 创建 CCVC_PriceList(支付卡等级表),其结构如下表:

序号字段名类型说明
1[PName][nvarchar](10)产品名称
2[CCVC][int]初始积分
3[Price][money]产品价格
4[LogoUrl][nvarchar](500)产品Logo

执行如下 创建表的 SQL 语句:

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

执行如下SQL语句,创建一些数据:


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

通过查询分析器,执行查询SQL语句,显示如下图:

最后我们将数据填充到 DataReader ,并生成对应的二维数组。

范例运行环境

操作系统: Windows Server 2019 DataCenter

数据库:Microsoft SQL Server 2016

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

开发工具:VS2019  C#

RepeatHtml 方法

设计与实现

RepeatHtml 方法主要是通过 object[,] 二维对象数组数据源进行提取并根据模板 HTML 循环输出到指定的接收控件上,其参数设置见下表:

序号参数名类型说明
1Htmlstring要输出的 HtmlTable 对象

GetReaderData 方法可以访问数据库数据表进行查询结果的提取,并转化为 object[,] 二维数组,具体实现请参考我的文章:《C# Web控件与数据感应之 填充 HtmlTable》中的GetReaderData 方法实现代码。

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 元素内部的内容,即元素的子节点,不包括元素本身的标签)和 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 模板块,需要在调用前显示,调用后隐藏。

调用成功显示效果如下图所示:

  

小结

RepeatHtml 方法一般配合 getOuterHtml 方法使用,如果运行出现服务器字符串格式错误,请检查花括号输出的字段是否存在以及大小写情况,尽量与SQL语句输出保持一致。以上就是关于模板循环输出的介绍,我们可以根据自己的实际需要进行改造,本示例代码仅供您参考。 

感谢您的阅读,希望本文能够对您有所帮助。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/853076.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Web前端进国企:挑战与机遇并存

Web前端进国企&#xff1a;挑战与机遇并存 随着互联网的飞速发展&#xff0c;Web前端技术已经成为企业信息化建设的重要组成部分。对于许多热衷于前端技术的年轻人来说&#xff0c;进入国企工作既是一种挑战&#xff0c;也是一种机遇。本文将从四个方面、五个方面、六个方面和…

Qt C++ TCP服务端响应多客户端通讯

本示例使用的设备&#xff1a;WIFI无线4G网络RFID云读卡器远程网络开关物流网阅读器TTS语音-淘宝网 (taobao.com) #include "mainwindow.h" #include "ui_mainwindow.h" #include "QMessageBox" #include <QDebug> #include <exceptio…

AI与Python:探索智能化时代的编程利器

AI与Python的强大组合 Python因其简洁易学的语法和丰富的库生态&#xff0c;成为了AI开发的首选语言。无论是数据处理、机器学习还是深度学习&#xff0c;Python都能提供强大的支持。以下是几个常见的AI应用领域&#xff1a; 数据分析与处理 使用Pandas和NumPy库进行数据处理和…

pnpm : 无法加载文件 C:\Users\WTK\AppData\Roaming\npm\pnpm.ps1,因为在此系统上禁止运行脚本。

PS D:\VUE3\vue-pure-admin-main> pnpm i pnpm : 无法加载文件 C:\Users\WTK\AppData\Roaming\npm\pnpm.ps1&#xff0c;因为在此系统上禁止运行脚本。有关详细信息&#xff0c;请参阅 https:/go.microsoft.com/fwlink/?Link ID135170 中的 about_Execution_Policies。 所在…

Lexar NM620 512GB SSD PCIE3.0 X4测评

Lexar NM620 512GB SSD PCIE3.0 X4测评 官方可选容量256GB~2TB PCIE 3.0X4 支持NVME 1.4协议 CDM顺序Read速度3448MB\s CDM顺序Write速度2626MB\s CDM 4K随机Read速度465MB\s CDM 4K随机Write速度602MB\s AS SSD顺序Read速度为2855MB\s AS SSD顺序Write速度为2331MB\s AS SSD…

vue2和vue 3 的响应式原理

vue 3 响应式原理 在 Vue 3 中&#xff0c;响应式系统的核心是使用了 ES6 的 Proxy 对象来实现对数据的拦截和响应式更新。 简单的 Proxy 示例&#xff1a; const data { count: 0 }; const handler {get(target, key, receiver) {// 当访问属性时触发track(target, key);…

几款让你怦然心动的神奇工具——搜嗖工具箱

alteredqualia AlteredQualia 脑洞爆炸器网站&#xff0c;不得不说这是一个神奇的网站&#xff0c;在这个网站上你可以实现不可思议的各种操作&#xff0c;让我们对网站有了新的认知&#xff0c;因为它告诉你不是所有有趣的网站都那么花哨&#xff0c;有些网站看着外形平淡无奇…

Javascript - 请问可以new一个箭头函数吗?

&#x1f690;new操作符的步骤 在JavaScript中&#xff0c;new 操作符用于创建一个对象实例&#xff0c;具体来说&#xff0c;它会执行以下几步操作&#xff1a; 创建一个新对象&#xff1a; 创建一个新的空对象&#xff0c;且这个对象的 __proto__ 属性会被设置为构造函数的 …

LabVIEW结构体内部缺陷振动检测

结构体内部缺陷会改变其振动特性&#xff0c;通过振动分析可以检测并定位这些缺陷。本文详细分析内部缺陷对振动的影响&#xff0c;从频谱分析、时域分析和模态分析等多角度探讨基于LabVIEW的检测方法&#xff0c;提供实施步骤和注意事项&#xff0c;帮助工程师有效利用LabVIEW…

如何解决跨境传输常见的安全及效率问题?

在当今全球化的商业版图中&#xff0c;企业为了拓展国际市场和增强竞争力&#xff0c;跨境传输数据已成为一项不可或缺的业务活动。合格的数据跨境传输方案&#xff0c;应考虑以下要素&#xff1a; 法律合规性&#xff1a;确保方案符合所有相关国家的数据保护法律和国际法规&am…

对大数据的批量导入MySQL数据库

自己的库里有索引在用insert导入数据时会变慢很多 使用事务批量导入 可以配置使用springmybatis整合的方式关闭自动提交事务&#xff08;地址&#xff09;&#xff0c;选择批量导入每一百条导入使用list存储值传入到mybatis中 http://x125858805.iteye.com/blog/2369243 list.a…

c语言中的gets()函数记录

C语言中的gets()函数用于从标准输入&#xff08;通常是键盘&#xff09;中读取一行输入&#xff0c;并将其存储为C字符串。该函数会读取输入直至遇到换行符&#xff08;\n&#xff09;&#xff0c;然后丢弃换行符&#xff0c;将其余字符存储在字符串中&#xff0c;并在字符串末…

ATF是如何完成双系统切换的?

ATF&#xff08;Arm Trusted Firmware&#xff09;是一个用于ARM架构处理器的可信固件&#xff0c;它最初提供的最主要的功能就是&#xff1a;双系统切换和电源管理。 那么如何进行双系统切换呢&#xff0c;在双系统切换的示例中&#xff0c;除了CPU的跳转&#xff0c;例如CPU…

Ubuntu Updates for this repository will not be applied

1. 问题描述 在Ubuntu中使用apt update时提示如下错误信息。 Get:1 http://archive.ubuntu.com/ubuntu jammy InRelease [270 kB] Get:2 http://archive.ubuntu.com/ubuntu jammy-updates InRelease [119 kB] Get:3 http://archive.ubuntu.com/ubuntu jammy-backports InRele…

使用静态方法接受对象参数

我们先来看一个例子 public class MyInteger { private int value; // 构造函数 public MyInteger(int value) { this.value value; } // 实例方法 public boolean isEven() { return value % 2 0; } // 静态方法接受int参数 public static boolean isEvenStatic…

leetcode打卡#day44 1049. 最后一块石头的重量 II、494. 目标和、474. 一和零

1049. 最后一块石头的重量 II class Solution { public:int lastStoneWeightII(vector<int>& stones) {vector<int> dp(1501, 0);int sum 0;for (int i 0; i < stones.size(); i) {sum stones[i];}int target sum / 2;for (int i 0; i < stones.si…

动态功能连接评估方法的变异性

摘要 背景&#xff1a;动态功能连接(dFC)已成为理解大脑功能的一种重要测量指标。虽然已经开发了各种各样的方法来评估dFC&#xff0c;但目前尚不清楚方法的选择会如何影响结果。在这里&#xff0c;本研究旨在考察常用dFC方法的结果变异性。 方法&#xff1a;本研究在Python中…

IT人的拖延——拖是因为不想离开“舒适区”?

人都是求“稳”的,在一个区域内呆了很久,也很舒适了,如果冒险离开进入未知的区域,万一结果不好怎么办?万一自己不适合怎么办?万一这个区域有着自己难以忍受的东西怎么办?这些对未知区域的恐惧感让我们在面对应该要做的事情时,不自觉地又拖延了起来。比如,我们在面临需…

【TF-IDF|1】深入解析TF-IDF算法—基础介绍

TF-IDF&#xff08;Term Frequency-Inverse Document Frequency&#xff09;是一种用于文本挖掘和信息检索的加权技术&#xff0c;用来评估一个词语对于一个文档集或一个语料库的重要程度。下面我们将从理论到实践&#xff0c;逐步解析TF-IDF算法&#xff0c;并编写一个简单的实…

阻塞IO、非阻塞IO、IO复用的区别 ?(非常详细)零基础入门到精通,收藏这一篇就够了

前言 在《Unix网络编程》一书中提到了五种IO模型&#xff0c;分别是&#xff1a;阻塞IO、非阻塞IO、IO复用、信号驱动IO以及异步IO。本篇文章主要介绍IO的基本概念以及阻塞IO、非阻塞IO、IO复用三种模型&#xff0c;供大家参考学习。 一、什么是IO 计算机视角理解IO: 对于计…