_Starbug_ Ответов: 1

Как создать пользовательский gridview в ASP.NET

Я хочу создать пользовательский gridview с изображением внутри него. Я извлекаю изображения из базы данных, а также другие данные. Как я могу это сделать? Спасибо. ниже Ссылка-это то, чего я хочу достичь.
ссылка

Что я уже пробовал:

Я использовал asp.net управление toolbox, но я не знаю, как реализовать изображение внутри его столбцов.

F-ES Sitecore

Вы лучше используете ретранслятор, чем GridView, у вас больше контроля над разметкой.

1 Ответов

Рейтинг:
5

Vincent Maverick Durano

Если ваше намерение состоит только в том, чтобы отображать данные и изображения, то вы можете использовать Repeater управление, как предполагается, имеет большую гибкость с точки зрения форматирования макета. Вы также можете использовать DataList так как он обеспечивает такие свойства, как RepeatLayout и RepeatDirection это вы можете установить.

Вот краткий пример с 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 управление с помощью Image, TextBox и Label элементы управления, определенные в нем. Вы также можете заметить, что каждый элемент управления привязан к полям, которые мы хотим отобразить. А теперь давайте продолжим и заселим DataList с образцом данных. Вот код, стоящий за частью ниже:

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 веб-формы: загрузка, проверка и отображение изображения