当前位置：网站首页>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
边栏推荐
- kubernetes部署thanos ruler的发送重复告警的一个隐秘的坑
- XML serialization backward compatible
- 股票炒股注册开户靠谱吗？安全吗？
- Sentinel mechanism of redis cluster
- Leetcode learning records
- R language drawing ggplot2 seasonal graph
- flex布局
- Block transmission by golang gin framework
- Dbeaver 22.1.1 release, visual database management platform
- open62541直接导入NodeSet文件
猜你喜欢
安全培训是员工最大的福利！2022新员工入职安全培训全员篇
阿里云服务器创建快照、回滚磁盘
Spark 离线开发框架设计与实现
Section VII starting principle and configuration of zynq
Resizing node of rediscluster cluster cluster mode
linux下修改mysql端口号
A single node obtains the lock lock of the order number
云原生（待更新）
Application of XOR. (extract the rightmost 1 in the number, which is often used in interviews)
Design and implementation of spark offline development framework
随机推荐
Installing redis on Linux
MMR rearrangement (similarity is calculated by editing distance and repeatability)
ACM notes
goland IDE和delve调试位于kubernetes集群中的go程序
R language Kolmogorov Smirnov tests whether the two samples follow the same distribution.
HJ character count
In idea, the get and set methods may be popular because the Lombok plug-in is not installed
Kubernetes theoretical basis
Disposition Flex
The solution of "user account control to continue, please enter administrator user name and password" appears in win10 Professional Edition
kubelet垃圾(退出的容器和未使用的镜像)回收源码分析
es6箭头函数中return的用法
kubernetes部署thanos ruler的发送重复告警的一个隐秘的坑
Redis implements distributed locks
Update pip to the latest version
2021 programming language ranking summary
Cloud native (to be updated)
HJ prime factor
Block transmission by golang gin framework
Mysql57 zip file installation