当前位置：网站首页>asp. Net datalist to display product information and pictures
asp. Net datalist to display product information and pictures
2022-06-28 07:42:00 【No. 1006 Xiaobai】
DataList Can be used to display data
The effect is as follows , Show product photos and product names
Ideas ： Front desk Lane 8 individual datalist Control , Get the latest in the background 8 Pieces of data are stored in the data table , The... Of each row of data id Get out 、 Get the corresponding line 、 Then bind the corresponding row to Datalist Controls .
Select Edit template... In the design window — choice itemTemplat— End template editing 
stay itemTemplat Insert table
- <%#DataBinder.Eval(Container.DataItem,“good_name”) %>
<%# %> For data bound controls , Must be called in the corresponding control or parent control DataBind When the method is used , This instruction will be executed
The product name is bound here good_name- <asp:Image ID=“img” runat=“server” Width=“195px” Height=“195px” ImageUrl=’<%# Eval(“good_path”, “{0}”) %>’/>
utilize a The tag makes you jump to the product details page when you click on the image
<%= %> The function of is equivalent to using Response.Write sentence , Here, the parameters are passed when the page jumps id
utilize Image Control to bind pictures , by ImageUrl=’<%# Eval(“good_path”, “{0}”) %> Set the image path , Here is the image path of the database good_path
<%Eval(“good_path”)%> This is a simplified expression
If the picture folder is somewhere else ,“face” Is the name of your picture folder
ImageUrl=’<%# Eval(“good_path”, “face/{0}”) %>’
<asp:DataList ID="DataList1" runat="server" >
<ItemTemplate>
.<a href="GoodsDetials.aspx?id=<%=goodid %>" ><asp:Image ID="img" runat="server" Width="195px" Height="195px" ImageUrl='<%# Eval("good_path", "{0}") %>'/></a>
<table cellpadding="0" cellspacing="0" class="auto-style3" style="margin-top:5px;">
<tr>
<td>
<span style=" color:#3f90ca; font-size:18px;"> <%#DataBinder.Eval(Container.DataItem,"good_name") %> </span>
</td>
</tr>
</table>
</ItemTemplate>
</asp:DataList>
Make eight in the same way datalist Control
<div style="font-size:20px; color:#3581b8; margin-top:10px;"> The latest recommendation </div>
<div class="row" style="margin-top:20px; margin-bottom:10px;">
<div class="col-sm-3 col-md-3">
<asp:DataList ID="DataList1" runat="server" >
<ItemTemplate>
.<a href="GoodsDetials.aspx?id=<%=goodid %>"><asp:Image ID="img" runat="server" Width="195px" Height="195px" ImageUrl='<%# Eval("good_path", "{0}") %>'/></a>
<table cellpadding="0" cellspacing="0" class="auto-style3" style="margin-top:5px;">
<tr>
<td>
<span style=" color:#3f90ca; font-size:18px;"> <%#DataBinder.Eval(Container.DataItem,"good_name") %> </span>
</td>
</tr>
</table>
</ItemTemplate>
</asp:DataList>
</div>
<div class="col-sm-3 col-md-3">
<asp:DataList ID="DataList2" runat="server">
<ItemTemplate>
.<a href="GoodsDetials.aspx?id=<%=goodid2 %>" ><asp:Image ID="img2" runat="server" Width="195px" Height="195px" ImageUrl='<%# Eval("good_path", "{0}") %>'/></a>
<table cellpadding="0" cellspacing="0" class="auto-style3" style="margin-top:5px;">
<tr>
<td>
<span style="color:#3f90ca; font-size:18px;"> <%#DataBinder.Eval(Container.DataItem,"good_name") %> </span>
</td>
</tr>
</table>
</ItemTemplate>
</asp:DataList>
</div>
<div class="col-sm-3 col-md-3" >
<asp:DataList ID="DataList3" runat="server">
<ItemTemplate>
.<a href="GoodsDetials.aspx?id=<%=goodid3 %>" > <asp:Image ID="img3" runat="server" Width="195px" Height="195px" ImageUrl='<%# Eval("good_path", "{0}") %>'/></a>
<table cellpadding="0" cellspacing="0" class="auto-style3" style="margin-top:5px;">
<tr>
<td>
<span style=" color:#3f90ca; font-size:18px;"> <%#DataBinder.Eval(Container.DataItem,"good_name") %> </span>
</td>
</tr>
</table>
</ItemTemplate>
</asp:DataList>
</div>
<div class="col-sm-3 col-md-3">
<asp:DataList ID="DataList4" runat="server">
<ItemTemplate>
.<a href="GoodsDetials.aspx?id=<%=goodid4 %>" ><asp:Image ID="img4" runat="server" Width="195px" Height="195px" ImageUrl='<%# Eval("good_path", "{0}") %>'/></a>
<table cellpadding="0" cellspacing="0" class="auto-style3" style="margin-top:5px;">
<tr>
<td>
<span style="color:#3f90ca; font-size:18px;"> <%#DataBinder.Eval(Container.DataItem,"good_name") %> </span>
</td>
</tr>
</table>
</ItemTemplate>
</asp:DataList>
</div>
</div>
<div class="row" style="margin-top:20px;" >
<div class="col-sm-3 col-md-3">
<asp:DataList ID="DataList5" runat="server">
<ItemTemplate>
.<a href="GoodsDetials.aspx?id=<%=goodid5 %>" ><asp:Image ID="img5" runat="server" Width="195px" Height="195px" ImageUrl='<%# Eval("good_path", "{0}") %>'/></a>
<table cellpadding="0" cellspacing="0" class="auto-style3" style="margin-top:5px;">
<tr>
<td style="margin-left:70px; font-size:20px;">
<span style=" color:#3f90ca; font-size:18px;"> <%#DataBinder.Eval(Container.DataItem,"good_name") %> </span>
</td>
</tr>
</table>
</ItemTemplate>
</asp:DataList>
</div>
<div class="col-sm-3 col-md-3">
<asp:DataList ID="DataList6" runat="server">
<ItemTemplate>
.<a href="GoodsDetials.aspx?id=<%=goodid6 %>" ><asp:Image ID="img6" runat="server" Width="195px" Height="195px" ImageUrl='<%# Eval("good_path", "{0}") %>'/></a>
<table cellpadding="0" cellspacing="0" class="auto-style3" style="margin-top:5px;">
<tr>
<td>
<span style=" color:#3f90ca; font-size:18px;"> <%#DataBinder.Eval(Container.DataItem,"good_name") %> </span>
</td>
</tr>
</table>
</ItemTemplate>
</asp:DataList>
</div>
<div class="col-sm-3 col-md-3">
<asp:DataList ID="DataList7" runat="server">
<ItemTemplate>
.<a href="GoodsDetials.aspx?id=<%=goodid7 %>" ><asp:Image ID="img7" runat="server" Width="195px" Height="195px" ImageUrl='<%# Eval("good_path", "{0}") %>'/></a>
<table cellpadding="0" cellspacing="0" class="auto-style3" style="margin-top:5px;">
<tr>
<td>
<span style=" color:#3f90ca; font-size:18px;"> <%#DataBinder.Eval(Container.DataItem,"good_name") %> </span>
</td>
</tr>
</table>
</ItemTemplate>
</asp:DataList>
</div>
<div class="col-sm-3 col-md-3">
<asp:DataList ID="DataList8" runat="server">
<ItemTemplate>
.<a href="GoodsDetials.aspx?id=<%=goodid8 %>" > <asp:Image ID="img8" runat="server" Width="195px" Height="195px" ImageUrl='<%# Eval("good_path", "{0}") %>'/></a>
<table cellpadding="0" cellspacing="0" class="auto-style3" style="margin-top:5px;">
<tr>
<td>
<span style=" color:#3f90ca; font-size:18px;"> <%#DataBinder.Eval(Container.DataItem,"good_name") %> </span>
</td>
</tr>
</table>
</ItemTemplate>
</asp:DataList>
</div>
</div>
public String goodid = “”; We set the variable to public , The permission is sufficient only when used in the previous section
DataSet ds = op.SelectGoodInfo(); Get your own data sheet
goodid obtain id Assign the value of to this variable , The foreground can pass this variable to the jump page
SelectLeaguerInfo： Inquire about goodid The corresponding row of data
DataList1.DataSource = op.SelectLeaguerInfo(goodid);
DataList1.DataBind(); Yes Datalist Control
using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class _Default : System.Web.UI.Page
{
Operation op = new Operation();
public String goodid = "";
public String goodid2 = "";
public String goodid3 = "";
public String goodid4 = "";
public String goodid5 = "";
public String goodid6 = "";
public String goodid7 = "";
public String goodid8 = "";
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack) {
DataSet ds = op.SelectGoodInfo();
goodid = ds.Tables["good_info2"].Rows[0]["good_id"].ToString();
DataList1.DataSource = op.SelectLeaguerInfo(goodid);
DataList1.DataBind();
goodid2 = ds.Tables["good_info2"].Rows[1]["good_id"].ToString();
DataList2.DataSource = op.SelectLeaguerInfo(goodid2);
DataList2.DataBind();
goodid3 = ds.Tables["good_info2"].Rows[2]["good_id"].ToString();
DataList3.DataSource = op.SelectLeaguerInfo(goodid3);
DataList3.DataBind();
goodid4 = ds.Tables["good_info2"].Rows[3]["good_id"].ToString();
DataList4.DataSource = op.SelectLeaguerInfo(goodid4);
DataList4.DataBind();
goodid5 = ds.Tables["good_info2"].Rows[4]["good_id"].ToString();
DataList5.DataSource = op.SelectLeaguerInfo(goodid5);
DataList5.DataBind();
goodid6 = ds.Tables["good_info2"].Rows[5]["good_id"].ToString();
DataList6.DataSource = op.SelectLeaguerInfo(goodid6);
DataList6.DataBind();
goodid7 = ds.Tables["good_info2"].Rows[6]["good_id"].ToString();
DataList7.DataSource = op.SelectLeaguerInfo(goodid7);
DataList7.DataBind();
goodid8 = ds.Tables["good_info2"].Rows[7]["good_id"].ToString();
DataList8.DataSource = op.SelectLeaguerInfo(goodid8);
DataList8.DataBind();
}
}
}
Add ： We click on the picture to jump to the page , And transmission id Parameters to the product details page 
<form id="form1" runat="server">
<div class="container">
<div class="row">
<div class="col-sm-1 col-md-1 col-lg-1"></div>
<div class="col-sm-4 col-md-4 col-lg-4">
<asp:Image ID="txtImage" runat="server" ImageUrl="~/images/new/3.jpg" Width="400px" Height="400px" />
</div>
<div class="col-sm-6 col-md-6 col-lg-6">
<div class="row">
<div class="col-xs-6 text-right"> Name of commodity ：</div>
<div class="col-xs-6 text-left"><span id="txtName" runat="server" ></span></div>
</div>
<div class="row">
<div class="col-xs-6 text-right"> commodity price ：</div>
<div class="col-xs-6 text-left"><span id="txtPrice" runat="server" ></span></div>
</div>
<div class="row">
<div class="col-xs-6 text-right"> Commodity Description ：</div>
<div class="col-xs-6 text-left"><span id="txtDetails" runat="server" ></span></div>
</div>
<div class="row">
<div class="col-xs-6 text-right"> Traffic volume ：</div>
<div class="col-xs-6 text-left"><span id="txtvisitor" runat="server" ></span></div>
</div>
<div class="row">
<div class="col-xs-7 text-right" style="margin-top:20px; ">
<asp:Button ID="btnlogon2" CssClass="header_login2" runat="server" Text=" Add to cart " OnClick="btnlogon2_Click" />
</div>
</div>
</div>
<div class="col-sm-1 col-md-1 col-lg-1"></div>
</div>
</div>
</form>
using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class GoodsDetials : System.Web.UI.Page
{
Operation operation = new Operation();
string gid = "";
protected void Page_Load(object sender, EventArgs e)
{
gid = Request.Params["id"]; // Receive from the previous page id
if ((gid = Request.QueryString["id"]) != null) {
// according to id The queried data is stored in DataSet Inside
DataSet ds = operation.SelectLeaguerInfo(gid);
//ds There's a row and nine columns
txtImage.ImageUrl = ds.Tables["good_info"].Rows[0]["good_path"].ToString();
txtName.InnerText = ds.Tables["good_info"].Rows[0]["good_name"].ToString();
txtPrice.InnerText = ds.Tables["good_info"].Rows[0]["good_price"].ToString();
txtDetails.InnerText = ds.Tables["good_info"].Rows[0]["good_details"].ToString();
txtvisitor.InnerText = ds.Tables["good_info"].Rows[0]["good_visitor"].ToString();
}
}
}
About Dataset Use , You can refer to https://blog.csdn.net/weixin_45626404/article/details/118253588
边栏推荐
- R and RGL draw 3D knots
- Section VII starting principle and configuration of zynq
- Kubernetes理论基础
- HJ character count
- HJ字符串排序
- Mysql8.0 and mysql5.0 accessing JDBC connections
- Evolution of vivo push platform architecture
- Mysql8.0和Mysql5.0访问jdbc连接
- Introduction and several months' experience of extending the solution thanos of Prometheus
- 8 张图 | 剖析 Eureka 的首次同步注册表
猜你喜欢
Static resource compression reduces bandwidth pressure and increases access speed
Unity UI shadow component
Cloud native: cloud computing technology is upgraded again to open an era of comprehensive cloud development
Mysql57 zip file installation
阿里云服务器创建快照、回滚磁盘
The practice of traffic and data isolation in vivo Reviews
What is EC blower fan?
Redis implements distributed locks
flex布局
kubernetes删除pod的流程的源码简析
随机推荐
Conversion between HJ integer and IP address
ACM notes
Analyze 5 indicators of NFT project
ZYNQ_ IIC read / write m24m01 record board status
vite2.9 中指定路径别名
Code submission specification
Section 8: DMA of zynq
什么是EC鼓风机(ec blower fan)？
Block transmission by golang gin framework
卸载重装最新版mysql数据库亲测有效
MMR rearrangement (similarity is calculated by editing distance and repeatability)
Co process, asyncio, asynchronous programming
goland IDE和delve调试位于kubernetes集群中的go程序
Porting ucosiii to stm32f429
Application and Optimization Practice of redis in vivo push platform
HJ character count
ABAP 技能树
open62541直接导入NodeSet文件
8 figures | analyze Eureka's first synchronization registry
Evaluation of inverse Polish expression ＜ difficulty coefficient ＞