当前位置：网站首页>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
边栏推荐
猜你喜欢
Porting ucosiii to stm32f429
Path alias specified in vite2.9
Hash slot of rediscluster cluster cluster implementation principle
Modifying MySQL port number under Linux
数字藏品市场“三大套路”
安全培训是员工最大的福利！2022新员工入职安全培训全员篇
SOC serial port configuration
Kubernetes cluster command line tool kubectl
异或的应用。（提取出数字中最右侧的1，面试中经常用的到）
"Three routines" of digital collection market
随机推荐
DBeaver 22.1.1 发布，可视化数据库管理平台
HJ delete the character with the least number of occurrences in the string
Uninstall and reinstall the latest version of MySQL database. The test is valid
No suspense about the No. 1 Internet company overtime table
Unity-UI-shadow组件
HTTP Caching Protocol practice
Redis one master multi slave cluster setup
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
HJ explicit random number
在idea中，get和set方法爆红可能是没有安装Lombok插件
Resizing node of rediscluster cluster cluster mode
7-2 Finnish wooden chess structure Sorting
What is EC blower fan?
Construction and exploration of vivo database and storage platform
Application of XOR. (extract the rightmost 1 in the number, which is often used in interviews)
Kubernetes theoretical basis
逆波兰表达式求值＜难度系数＞
以动态规划的方式求解最长回文子串
Cloud native (to be updated)
mysql57 zip文件安装