写给自己看的关于DataList的和RePeater
1.套用别人的CSS
新建一个样式表！将其 <style type="text/css">内的代码 复制到该样式表
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0;
font-size: 80%;
font-weight: bold;
background: #F3FAFF;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
/* =-=-=-=-=-=-=-[Menu One]-=-=-=-=-=-=-=- */
#menu {
width: 200px;
border-style: solid solid none solid;
border-color: #94AA74;
border-size: 1px;
border-width: 1px;
margin: 10px;
}
#menu li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}
#menu li a:link, #menu li a:visited {
color: #5E7830;
display: block;
background: url(menu1.gif);
padding: 8px 0 0 10px;
}
#menu li a:hover, #menu li #current {
color: #26370A;
background: url(menu1.gif) 0 -32px;
padding: 8px 0 0 10px;
}
#menu li a:active {
color: #26370A;
background: url(menu1.gif) 0 -64px;
padding: 8px 0 0 10px;
}
2.将CSS 样式表中的图片添加到项目中，并将更改项目中样式表中的图片路径，添加样式到项目中。
3.在项目中添加一DataList控件，并在后面添加如下代码
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
ShowCategories();
ShowProducts();
}
}
private void ShowCategories()
{
DataTable tb = NorthWind.DBHelp.GetTable("select * from 类别");
this.DataList1.DataSource = tb;
this.DataList1.DataBind();
}
private void ShowProducts()
{
if (Request.QueryString["categoryID"] != null)
{
int categoryID = int.Parse(Request.QueryString["categoryID"].ToString());
DataTable dt = NorthWind.DBHelp.GetTable("SELECT 产品ID from 产品 where 类别ID=" + categoryID);
this.DataList2.DataSource = dt;
this.DataList2.DataBind();
}
}
4.前台代码如下 (控件Repeater也一样，做如下处理便得到其Repeater效果)
<body>
<form id="form1" runat="server">
<div style="float:left">
<asp:DataList ID="DataList1" runat="server" RepeatLayout="Flow">
<HeaderTemplate>
<div id="menu3" >
<ul>
</HeaderTemplate>
<ItemTemplate>
<li><a href='<%# Default.aspx?nameID="+Eval("类别ID") %>' ><%# Eval("类别名称") %></a></li>
</ItemTemplate>
<FooterTemplate>
</ul>
</div>
</FooterTemplate>
</asp:DataList>
</div>
<div style="float:left"> //添加新的右边显示的DataList
<asp:DataList ID="DataList1" runat="server" RepeatLayout="Flow">
//在该控件模板中添加设计好了的用户控件 代码如5
<uc1:Product ID="Product1" runat="server" ProductID='<%# Eval("产品ID") %>'/>
</asp:DataList>
</div>
</form>
</body>
5.创建并设置 自定义模板 代码如下
public partial class UC_Product : System.Web.UI.UserControl
{
private int productID = 1;
public int ProductID
{
get { return productID; }
set { productID = value; }
}
protected void Page_Load(object sender, EventArgs e)
{
//if (!Page.IsPostBack)
{
//获取编号为ProductID的产品信息
DataTable dt = NorthWind.DBHelp.GetTable("SELECT Product.产品ID, Product.产品名称, Supply.公司名称, Supply.城市, Category.类别名称, Category.图片, Product.单位数量, Product.单价, Product.库存量, Product.中止 FROM Category INNER JOIN Product ON Category.类别ID = Product.类别ID INNER JOIN Supply ON Product.供应商ID = Supply.供应商ID where 产品ID=" + productID);
//显示出来
this.Image1.ImageUrl = "../" + dt.Rows[0]["图片"];
this.Label1.Text = dt.Rows[0]["产品名称"].ToString();
this.Label2.Text = dt.Rows[0]["单位数量"].ToString();
this.Label3.Text = dt.Rows[0]["单价"].ToString();
this.Label4.Text = dt.Rows[0]["公司名称"].ToString();
this.Label5.Text = dt.Rows[0]["库存量"].ToString();
}
}
}
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！