WebForms DataList控件的使用

懒羊羊♛

于 2021-01-08 16:28:56 发布

阅读量501

点赞数 1

文章标签： web .net c# 后端 html

本文链接：https://blog.csdn.net/weixin_46596213/article/details/112367214

版权

asp.net 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

在浏览器浏览的效果图如下图所示：
在这里插入图片描述
第一步：
首先是搭建数据库，创建表，由于我这里用的是之前的数据库，所以数据库大家自行搭建；只需要创建一张表，表的字段、里面的数据如下图：

我的图片是从网上下载的，你们也可以随便弄一些图片。

第二步：
添加三个类库，分别是Model、BLL、DAL
在这里插入图片描述

最终这就是我们创建好的一个ASP.NET Web应用程序和3个类库

接下来需要添加引用，DAL层引用Model，BLL层引用DAL和Model，表现层引用BLL和Model层。

添加引用的方式如下：
在这里插入图片描述

第三步：
Model层的代码，添加一个productModel类，将数据库中的字段封装成属性

代码如下：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace Model
{
    public class productModel
    {
        public int ProductID { get; set; }
        public string ProductImg { get; set; }
        public string ProductName { get; set; }
        public string ProductPrice { get; set; }

    }
}

第四步：
在DAL层中添加一个DBHelper类
代码如下：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Data;
using System.Data.SqlClient;

namespace DAL
{
    public class DBHelper
    {
        //创建连接字符串
        public static string connString = "server=.;database=stuClassDB;integrated security=true";
        //创建连接对象
        public static SqlConnection conn = new SqlConnection(connString);
        /// <summary>
        /// 增删改
        /// </summary>
        /// <param name="sql"></param>
        /// <returns></returns>
        public static bool ExecuteNonQuery(string sql)
        {
            conn.Open();
            SqlCommand cmd = new SqlCommand(sql, conn);
            int result = cmd.ExecuteNonQuery();
            conn.Close();
            return result > 0;
        }
        /// <summary>
        /// 查询方法
        /// </summary>
        /// <param name="sql"></param>
        /// <returns></returns>
        public static DataTable GetDataTable(string sql)
        {
            conn.Open();
            DataTable dt = new DataTable();
            SqlDataAdapter dap = new SqlDataAdapter(sql,conn);
            dap.Fill(dt);
            conn.Close();
            return dt;
        }
    }
}

借下来添加一个ProductDAL类，里面写一个查询所有产品的方法

注意这里需要引入命名空间，以及在这个类的前面添加一个public关键字

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Model;
using System.Data;

namespace DAL
{
    public class ProductDAL
    {
        /// <summary>
        /// 查询所有产品
        /// </summary>
        /// <returns></returns>
        public static List<productModel> SelectProduct()
        {
            string sql = "select * from product";
            DataTable dt = DBHelper.GetDataTable(sql);
            if (dt.Rows.Count > 0 && dt != null)
            {
                List<productModel> list = new List<productModel>();
                foreach (DataRow item in dt.Rows)
                {
                    productModel pro = new productModel();
                    pro.ProductID = int.Parse(item["ProductID"].ToString());
                    pro.ProductImg = item["ProductImg"].ToString();
                    pro.ProductName = item["ProductName"].ToString();
                    pro.ProductPrice = item["ProductPrice"].ToString();
                    list.Add(pro);
                }
                return list;
            }
            return null;
        }
    }
}

第五步：
BLL层中添加ProductBLL类

同样也需要注意引入命名空间以及public关键字的使用
代码如下：

using Model;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using DAL;

namespace BLL
{
    public class ProductBLL
    {
        /// <summary>
        /// 查询所有产品
        /// </summary>
        /// <returns></returns>
        public static List<productModel> SelectProduct()
        {
            return ProductDAL.SelectProduct();
        }
    }
}

第六步：
在表现层中添加一个images文件夹，然后将对应的图片放进去
在这里插入图片描述

紧接着就是添加一个Web窗体，我用的是它默认的命名

在Web窗体中拖入一个DataList控件，然后切换到设计视图（这里我是新建了一个窗体，为了方便演示）
在这里插入图片描述

点击编辑模板，然后在找到表，

上图需要注意，你需要在里面点击一下，在选插入表格
如下图：

在这里插入图片描述
最后点击结束模板编辑即可。

紧接着我们就可以去到源界面去编写代码了

代码如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="DataListExample.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        .auto-style1 {
            width: 100%;
        }

        img {
            width: 400px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:DataList ID="DataList1" runat="server" RepeatColumns="3">
                <ItemTemplate>
                    <table class="auto-style1">
                        <tr>
                            <td>
                                <asp:Image ID="Image1" runat="server" ImageUrl='<%#"~/images/"+Eval("ProductImg") %>' /></td>
                        </tr>
                        <tr>
                            <td style="text-align: center"><%#Eval("ProductName") %></td>
                        </tr>
                        <tr>
                            <td style="text-align: center">￥<%#Eval("ProductPrice") %></td>
                        </tr>
                    </table>
                </ItemTemplate>
            </asp:DataList>
        </div>
    </form>
</body>
</html>

接下来就需要去后台写代码，右键选择查看代码
在这里插入图片描述
代码如下：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using BLL;

namespace DataListExample
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                BindProduct();
            }
        }

        private void BindProduct()
        {
            this.DataList1.DataSource = ProductBLL.SelectProduct();
            this.DataList1.DataBind();
        }
    }
}

懒羊羊♛

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
WebForms DataList控件的使用

在浏览器浏览的效果图如下图所示：第一步：首先是搭建数据库，创建表，由于我这里用的是之前的数据库，所以数据库大家自行搭建；只需要创建一张表，表的字段、里面的数据如下图：我的图片是从网上下载的，你们也可以随便弄一些图片。第二步：添加三个类库，分别是Model、BLL、DAL最终这就是我们创建好的一个ASP.NET Web应用程序和3个类库接下来需要添加引用，DAL层引用Model，BLL层引用DAL和Model，表现层引用BLL和Model层。添加引用的方式如下：第三步：Mo
复制链接

扫一扫