如何在ASP.NET中设计自定义gridview [英] How to design a custom gridview in ASP.NET

问题描述

我想设计一个带有图像的自定义gridview。我从数据库和其他数据中获取图像。我怎样才能做到这一点？谢谢。以下链接是我想要实现的目标。

链接



我尝试了什么：



我使用的是asp.net工具箱控件但是我不知道如何在它的列内实现图像。

I want to design a custom gridview with image inside it. I fetch images from database and also other data. How can i do that? Thanks. below link is what i want to achive it.
link

What I have tried:

I used asp.net toolbox control but i do not know how to implement image inside columns of it.

推荐答案

如果你的意图只是显示数据和图像，那么你可以使用 Repeater 按照建议进行控制，以便在布局格式方面具有更大的灵活性。您还可以使用 DataList ，因为它提供的属性如 RepeatLayout 和 RepeatDirection 你可以设置。



这是一个快速的例子， DataList ：

If your intent is just to display data and images, then you may use a Repeater control as suggested to have more flexibility in terms of layout formatting. You could also use DataList since it provides properties like RepeatLayout and RepeatDirection that you can set.

Here's a quick example with DataList:

<asp:DataList ID="DataList1" runat="server" RepeatColumns="2" RepeatDirection="Vertical">
        <ItemTemplate>
                <table>
                    <tr>
                        <td><asp:Image ID="imgProduct" runat="server" ImageUrl='<%# DataBinder.Eval(Container.DataItem, "ProductImage") %>' style="width:100px; height:100px;" /></td>
                        <td> 
                            <asp:Label ID="lblProduct" Text='<%# DataBinder.Eval(Container.DataItem, "ProductName") %>' runat="server" />
                            <br />
                            <asp:Label ID="lblPrice" Text='<%# DataBinder.Eval(Container.DataItem, "Price") %>' runat="server" />
                            <br />
                            <asp:TextBox ID="txtQty" runat="server"></asp:TextBox>
                        </td>
                    </tr>
                </table>
        </ItemTemplate>
</asp:DataList>

如你所见，对于上面的标记真的没有看中。它只包含 DataList 控件，其中图像， TextBox 和标签在其中定义的控件。您可能还注意到每个控件都与我们要显示的字段绑定在一起。现在让我们继续使用示例数据填充 DataList 。以下是以下部分的代码：

As you can see, there's really no fancy about the mark-up above. It just contain a DataList control with Image, TextBox and Label controls defined within it. You may also noticed that each control are binded with the fields that we want to display. Now let’s go ahead and populate the DataList with a sample data. Here’s the code behind part below:

using System;
using System.Data;

namespace WebAppDemo {
    public partial class Repeater : System.Web.UI.Page {

        private DataTable GetSampleData() {

            //NOTE: THIS IS JUST FOR DEMO
            //If you are working with database
            //You can query your actual data and fill it to the DataTable

            DataTable dt = new DataTable();
            DataRow dr = null;

            //Create DataTable columns
            dt.Columns.Add(new DataColumn("ID", typeof(string)));
            dt.Columns.Add(new DataColumn("ProductImage", typeof(string)));
            dt.Columns.Add(new DataColumn("ProductName", typeof(string)));
            dt.Columns.Add(new DataColumn("Price", typeof(string)));

            //Create Row for each columns
            dr = dt.NewRow();
            dr["ID"] = 1;
            dr["ProductName"] = "Product 1";
            dr["ProductImage"] = "~/Images/Image1.jpg";
            dr["Price"] = "100";
            dt.Rows.Add(dr);

            dr = dt.NewRow();
            dr["ID"] = 2;
            dr["ProductName"] = "Product 2";
            dr["ProductImage"] = "~/Images/Image2.jpg";
            dr["Price"] = "200";
            dt.Rows.Add(dr);

            dr = dt.NewRow();
            dr["ID"] = 3;
            dr["ProductName"] = "Product 3";
            dr["ProductImage"] = "~/Images/Image3.jpg";
            dr["Price"] = "50";
            dt.Rows.Add(dr);

            dr = dt.NewRow();
            dr["ID"] = 3;
            dr["ProductName"] = "Product 4";
            dr["ProductImage"] = "~/Images/Image4.jpg";
            dr["Price"] = "500";
            dt.Rows.Add(dr);

            dr = dt.NewRow();
            dr["ID"] = 3;
            dr["ProductName"] = "Product 5";
            dr["ProductImage"] = "~/Images/Image5.jpg";
            dr["Price"] = "70";
            dt.Rows.Add(dr);

            return dt;
        }

        protected void Page_Load(object sender, EventArgs e) {
            if (!IsPostBack) {
                DataList1.DataSource = GetSampleData();
                DataList1.DataBind();
            }
        }       
    }
}

就是这样。



使用图片时，请查看以下文章： ASP.NET WebForms：上传，验证和显示图像

这篇关于如何在ASP.NET中设计自定义gridview的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！