asp.net DataList实现显示商品信息和图片

最新推荐文章于 2021-07-12 16:12:34 发布
最新推荐文章于 2021-07-12 16:12:34 发布
阅读量4k 收藏 79
点赞数 4
分类专栏： ASP.NET 文章标签： asp.net
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45626404/article/details/118675691
版权

DataList 可以用来展示数据

实现效果如下，显示商品照片和商品名称
思路：前台弄8个datalist控件，后台获取最新的8条数据存入数据表中，将每行数据的id获取出来、获取对应的行、再将对应的行绑定在Datalist控件上。
在这里插入图片描述
在这里插入图片描述
在设计窗口选择编辑模板—选择itemTemplat—结束模板编辑
在这里插入图片描述
在itemTemplat插入表格

  1. <%#DataBinder.Eval(Container.DataItem,“good_name”) %>
    <%# %>用于数据绑定控件，就是必须在对应控件或父控件调用DataBind方法时，这个指令才会被执行
    这里绑定了商品名称good_name
  2. <asp:Image ID=“img” runat=“server” Width=“195px” Height=“195px” ImageUrl=’<%# Eval(“good_path”, “{0}”) %>’/>

利用a标签使点击图片时跳转到商品详细页面
<%= %>的功能等效于使用 Response.Write 语句，这里页面跳转的时候传递参数id

利用Image 控件进行图片绑定，为ImageUrl=’<%# Eval(“good_path”, “{0}”) %>设置图片路径，这里是读取了数据库的图片路径good_path
<%Eval(“good_path”)%>这是一种简化的表达
如果图片文件夹放在其他地方，“face”是你的图片文件夹名
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>

同样的方式弄八个datalist控件

  <div style="font-size:20px; color:#3581b8; margin-top:10px;">最新推荐</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 = “”; 我们将变量设置为public ，前面使用的时候才够权限
DataSet ds = op.SelectGoodInfo(); 获取你自己的数据表
goodid 获取id的值赋给这个变量，前台就可以传递这个变量给跳转的页面
SelectLeaguerInfo：查询goodid对应的那一行数据
DataList1.DataSource = op.SelectLeaguerInfo(goodid);
DataList1.DataBind(); 对Datalist控件进行绑定

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();
         
        }
    }
}

补充：我们点击图片跳转页面，并传递id参数到商品详细页面
在这里插入图片描述

 <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">商品名称：</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">商品价格：</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">商品描述：</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">访问量：</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="加入购物车" 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"];  //接收前一个页面传递过来的id
       
        if ((gid = Request.QueryString["id"]) != null) {
            //根据id查询的数据存储到DataSet里面
            DataSet ds = operation.SelectLeaguerInfo(gid);
            //ds里面有一行九列
            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();
        }
    }
}

关于Dataset的使用，可以参考https://blog.csdn.net/weixin_45626404/article/details/118253588

第1006号小白
关注
  • 4
    点赞
  • 踩
  • 79
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
ASP.NET中利用DataList实现图片无缝滚动 实例分享
10-27
总结来说，这个实例展示了如何在ASP.NET中使用DataList和ObjectDataSource控件，结合JavaScript，实现图片的无缝滚动。这种方法不仅可以用于图片展示，还可以扩展到其他类型的数据展示，例如文本、产品信息等。通过...
asp.net GridView和DataList实现鼠标移到行行变色
10-30
在设计页面添加了DataList控件后，我在使用DataList绑定数据时是通过单元格来绑定的,因此鼠标效果就在源代码页面去实现
读取文件夹中的图片,显示在datalist中
weixin_30700977的博客
12-16 206
在app_Image文件夹中有一些图片,我想显示在页面中,就是打开本页面的时候显示所有的图片,我在页面中用datalist控件控制图片读取图片后台: void dobindPicture() { string url = System.Web.HttpContext.Current.Server.MapPath(Request.ApplicationPath+"/App_Images/Top...
ASP.NET利用DataList实现从购物车添加商品
weixin_42978759的博客
12-08 2043
目录前言新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 前言 最近在练习ASP.NET，创建一个购物网站时用到...
asp.net Datalist有多个数据显示的时候
weixin_45626404的博客
07-12 252
当Datalist有多个数据显示的时候 将查询到的整个表都绑定在一个Datalist控件里面 string search = "绫波丽"; DataSet ds = op.SelectInfo(search); DataList1.DataSource = ds; DataList1.DataBind(); 全部显示在一行 设置 RepeatDirection=“Horizontal” 全部显示在一列 RepeatDirection=“Vert
ASP.NET DataList通过PageDataSource类实现分页功能
victorzhangwt的博客
01-17 535
ASP.NET DataList通过PageDataSource类实现分页功能PageDataSource的使用前台页面DataList模板编写编写DataList的ItemCommand事件编写DataList的ItemDataBound事件 DataList控件中没有像GridView控件那样通过设置AllowPaging、PageSize等属性来实现分页的功能（了解GridView的分页实现...
ASP.NET DataList控件的了解与使用
victorzhangwt的博客
01-17 2696
ASP.NET DataList控件的了解与使用DataList控件概述使用DataList绑定数据源设计DataList控件模板 DataList控件概述 看了些帖子，有说到和Repeater控件类似，博主刚接触ASP.NET没多久，先学了DataList，还没接触过Repeater控件，就记录下所学所得。 DataList控件可以使用模板及定义样式来显示数据，并且还能对数据进行选择、删除及编辑...
ASP.NET Datalist制作显示效果和img的数据库存储
cash.yuan
04-13 3594
1. 具体实现效果如下图： 2.首先使用datalist控件编辑模板，在属性面板选择RepeatColumns="3" RepeatDirection="Horizontal"，然后使用html中的table属性建立好要编辑的模板样式（img控件+label） 3.在使用Eval语句，进行绑定数据操作。（img图片记得也是在此绑定，不是在属性中imgurl绑定）例如：此时的img
在ASP.NET项目中datalist控件绑定数据源，数据源中怎么获取图片
okpypy的博客
04-20 887
在ASP.NET项目中datalist控件绑定数据源，数据源中怎么获取图片 数据库SQL Server 数据库中就建一张数据表。不再创建多张数据表。本次的案例是对于一个图书的列表展示，展示其图片，价格、等信息。 拖一个datalist空间到web窗体，选择数据源，之后编辑模板itemtemplate。 模板里的每个空间均进行数据绑定，比如在模板里加一个图片控件，图片控件绑定的数据是数据表的哪一列呢？显然是ImagAds 数据绑定结束，运行页面 ...
在ASP.NET中分页显示DataList控件中的数据
白水的博客
04-29 1190
效果图： 所用的数据库是这个样子的： 代码，分别是.aspx文件和.aspx.cs文件，自行复制粘贴使用，注意如果要匹配自己的数据库就要修改数据库连接以及字段名： Default.aspx <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> &...
Asp.Net DataList
SheeranX的博客
04-16 700
DataList 控件概述 DataList控件可以使用模板与定义样式来显示数据，并可以进行数据的选择、删除以及编辑。DataList控件的最大特点就是一定要通过模板来定义数据的显示格式。如果想要设计出美观的界面，就需要花费一番心思。正因为如此，DataList控件显示数据时更具灵活性，开发人员个人发挥的空间也比较大。DataList控件支持的模板如下。 AlternatingItemTe
asp.net datalist绑定数据后可以上移下移实现示例
10-26
在本示例中，我们将探讨如何在 ASP.NET 的 DataList 控件中实现数据项的上移和下移功能，这通常用于排序或管理列表中的条目。 首先，DataList 控件是一个可重复的布局控件，它允许我们以自定义的方式显示数据源中的...
asp.net使用for循环实现Datalist的分列显示功能
10-29
工程业绩--用for循环代替了DataList多列显示，得到2行四列的表格，需要内存表的8行数据
asp.net Datalist控件实现分页功能
10-29
asp.net Datalist控件实现分页功能代码。大家可以参考下。
VS如何打开文件夹&&找不到工具箱和属性
weixin_45626404的博客
03-21 5078
1、文件–打开–文件夹 2、选中你要打开的文件夹 打开后是这个样子的，但是你会发现，你新建项目的时候跟之前不一样，新建之后也不会有.cs项目 3、双击.sln 当你看到这个像地球一样的符号，也就说明你可以正确导入并且可以正常使用。 二、当你打开页面找不到工具箱，属性，解决方案资源管理器时候，有时候是因为你把他们关闭了 此时只需要在视图里面，选中就可以让他们在页面中显示出来。 ...
Dataset填充数据，以及行、列的使用
weixin_45626404的博客
06-26 1745
1、创建DataSet对象 DataSet ds = new DataSet(); DataSet ds = new DataSet("DataSetName"); 2、用数据集填充DataSet 方法一：最常用DataAdapter对象的Fill()方法进行填充数据 //数据集对象 DataSet ds = new DataSet(); //数据适配器 SqlDataAdapter adapt = new SqlDataAdapter(sqlcmd,con) //填充到数据集 adapt.Fill(ds
“/”应用程序中的服务器错误。 分析器错误消息: 未能找到 CodeDom 提供程序类型“Microsoft.CodeDom.Providers.DotNetCompilerPlatform,,,,
weixin_45626404的博客
06-24 1574
在自己电脑重新打开项目，发现报错 “/”应用程序中的服务器错误。 配置错误 说明: 在处理向该请求提供服务所需的配置文件时出错。请检查下面的特定错误详细信息并适当地修改配置文件。 分析器错误消息: 未能找到 CodeDom 提供程序类型“Microsoft.CodeDom.Providers.DotNetCompilerPlatform.CSharpCodeProvider, Microsoft.CodeDom.Providers.DotNetCompilerPlatform, Version=3.6.0
asp.net Bootstrap轮播图
weixin_45626404的博客
07-12 1154
点击boostrap 的 JavaScript插件 选择Carousel 可以看到如何制作轮播图的模板 我将代码粘贴过来 多少个小圆点对应多少张图片 <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- 显示多少张照片的小圆点 --> <ol class="carousel-indicators"> <li data-targe
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值