以缩略图方式在网页中显示数据库中的图片

缩略图显示方式也就是分栏显示方式，适用于数据中包括图片，并且图片能够清楚的表现整条数据的实际含义的情况。采用该方法可以很直观的找到所需信息。经常应用于展示企业信息和商品信息等。下面将详细介绍缩略图显示方式。

1．方案分析

在实现应用缩略图显示方式显示搜索结果时，需要判断查询结果是否为空，只有查询结果不为空时，才可以分栏显示搜索结果。在实现分栏显示时，根据保存查询结果的对象不同，使用的方法也不同。

2．实施过程

缩略图显示方式是将数据中的图片及标题分栏等简要信息显示在主页面中，例如在开发“电子商务”网站，就使用了缩微图的显示方式，如图所示。当在页面左侧的搜索板块中选择类别为“电视区”，然后根据关键字“电视”进行查询，就会搜索出符合这两个查询条件的所有数据。如果数据带有相关的图片并且希望将搜索的数据直观的表现出来，那么就可以使用缩微图的方式来显示数据。

图  缩微图的显示方式

程序实现具体步骤：

（1）新建一个网站命名为01，默认主页为Default.aspx。

（2）在页面中添加一个DataList控件，用于显示所有的产品。

（3）新建一个名为left.ascx的Web用户控件，在控件上添加一个DropDownList控件，用于设置查询的范围。添加一个TextBox控件，用于输入查询关键字。添加一个Button控件，用于提交查询。

（4）新建一个名为search.aspx的页，在此页上添加一个DataList控件，用于显示查询结果。

（5）程序主要代码如下。

首先在Web.config文件中进行数据库连接配置，具体代码如下。

   <appSettings>

      <add key="ccc" value="Server=.;User id=sa;pwd=;DataBase=db_04"></add>

   </appSettings>

   设置好各项查询条件之后，单击【搜索】按钮进行查询。其原理是先获得下拉列表和问本框中的值，然后将这两个值通过显性传参的方式传递到search.aspx中，具体代码如下。

 protected void Button3_Click(object sender, EventArgs e)

    {

        string str = DropDownList1.SelectedValue.ToString();

        string key = TextBox1.Text.Trim().ToString();

        Response.Redirect("search.aspx?stype="+str+"&key="+key);

    }

在search.aspx中首先判断传递过来的参数key是否为空，如果为空，说明文本框中没有输入任何关键字，则将和选择的类别相关的所有数据按照编号的降序排列显示出来。如果不为空，则将会根据传递过来的参数stype和参数key进行查询，然后将查询的数据显示出来。具体代码如下。

      SqlConnection strcon = new SqlConnection(System.Configuration.ConfigurationManager.AppSettings["ccc"]);

    protected void Page_Load(object sender, EventArgs e)

    {

        string newque;

        int stype = Convert.ToInt32(Request.QueryString["stype"]);

        string key = Request.QueryString["key"].ToString();

        if (key == "")

        {

            newque = "select * from tb_goods where typeid='" + stype + "' order by id desc";

        }

        else

        {

            newque = "select * from tb_goods where typeid='" + stype + "' and goodsname like '%" + key + "%'";

        }

        DataList1.DataSource = DataBase.ReDataSet(newque);

        DataList1.DataKeyField = "id";

        DataList1.DataBind();

        string supertype = "select * from tb_supertype";

        string subtype = "select * from tb_subtype";

        DataSet dssuper = DataBase.ReDataSet(supertype);

        DataSet dssub = DataBase.ReDataSet(subtype);

        DataRow[] rows = dssuper.Tables[0].Select();

        DataRow[] subrows = dssub.Tables[0].Select();

        if (!IsPostBack)

        {

            foreach (DataRow row in rows)

            {

                TreeNode nd = new TreeNode();

                nd.Text = row["typename"].ToString();

                nd.Value = row["id"].ToString();

                TreeView1.Nodes.Add(nd);

                foreach (DataRow subrow in subrows)

                {

                    TreeNode subnd = new TreeNode();

                    subnd.Text = subrow["typename"].ToString();

                    subnd.Value = subrow["id"].ToString();

                    if (subrow["supertype"].ToString() == row["id"].ToString())

                    {

                        nd.ChildNodes.Add(subnd);

                    }

                }

            }

        }

    }

                                                                                                ——摘自《C#编程词典》