当前位置：网站首页>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
边栏推荐
- 分析 NFT 项目的 5 个指标
- Hj21 simple password
- Solving the longest palindrome substring by dynamic programming
- okcc呼叫中心没有电脑的坐席能不能开展工作？
- Section 5: zynq interrupt
- goland IDE和delve调试位于kubernetes集群中的go程序
- Ice, protobuf, thrift -- Notes
- Real time database - Notes
- Practice and exploration of vivo live broadcast application technology
- 本周二晚19：00战码先锋第8期直播丨如何多方位参与OpenHarmony开源贡献
猜你喜欢
GoLand IDE and delve debug Go programs in kubernetes cluster
mysql57 zip文件安装
Cloud native (to be updated)
Recommended system series (Lecture 5): Optimization Practice of sorting model
Resizing node of rediscluster cluster cluster mode
Kubernetes deploys a secret pit where thanos ruler sends repeated alarms
Modifying MySQL port number under Linux
Section VII starting principle and configuration of zynq
Section 8: DMA of zynq
At 19:00 on Tuesday evening, the 8th live broadcast of battle code Pioneer - how to participate in openharmony's open source contribution in multiple directions
随机推荐
在idea中，get和set方法爆红可能是没有安装Lombok插件
Is it safe for flush to open an account online
kubelet驱逐机制的源码分析
Introduction and several months' experience of extending the solution thanos of Prometheus
A single node obtains the lock lock of the order number
Dbeaver 22.1.1 release, visual database management platform
[ thanos源码分析系列 ]thanos query组件源码简析
安全培训是员工最大的福利！2022新员工入职安全培训全员篇
"Three routines" of digital collection market
Tencent continued to lay off staff in the second half of the year, and all business groups reduced by at least 10%. What do you think of this? Followers
No suspense about the No. 1 Internet company overtime table
Disposition Flex
打新债注册开户靠谱吗？安全吗？
Software design of power control board
分析 NFT 项目的 5 个指标
kubelet垃圾(退出的容器和未使用的镜像)回收源码分析
HJ整数与IP地址间的转换
flex布局
Ice, protobuf, thrift -- Notes
Source code analysis of kubernetes' process of deleting pod