使用ImageField

Question

我需要绑定网格。数据表结构如下

我需要使用用户名，nooflikes，徽章绑定网格。还有一件事是徽章是一个图像场，需要用＆＃39; |＆＃39;来分隔徽章。符号

这里的第一行需要将徽章分隔为www.img1和www.img2并绑定为图像。

我添加了这样的

List<UserInteractionList> TestList = new List<UserInteractionList>();
        UserInteractionList test;

        while (reader.Read())
        {
            test = new UserInteractionList();
            test.UserName = reader["UserName"].ToString();
             test.Action = reader["nooflikes"].ToString();
            test.Image = reader["Badges"].ToString();
            TestList.Add(test);
        }  
dgv1.datasource = testlist;
dgv1.databind();




protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        string images= e.Row.Cells[2].Text;
        string[] strArray = x.Split('|');

        for (int i = 0; i < strArray.Length; i++)
        {

            Image photoImageField = new Image();
            photoImageField.ImageUrl = strArray[i];
            e.Row.Cells[2].Controls.Add(photoImageField);
        }

    }

我添加了这样的内容，在调试过程中，每次通过评估GridView1_RowDataBound

获得null时，我都会发现string images= e.Row.Cells[2].Text;

请帮我添加一下。

谢谢！

Answer 1

这里首先将image / bagde保存到隐藏字段中，然后在GridviewRowcommand上我们从隐藏字段中获取值，拆分它将动态图像控件添加到Panel Control

伪代码：

HTML标记：

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" OnRowDataBound="GridView1_RowDataBound">
                <Columns>
                    <asp:TemplateField HeaderText="Col1">
                        <ItemTemplate>
                            <asp:HiddenField ID="HiddenField1" Value='<%# Bind("Image") %>' runat="server" />
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Col2">
                        <ItemTemplate>
                            <asp:Label ID="Label1" runat="server" Text='<%# Bind("UserName ") %>' ></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="col3">
                        <ItemTemplate>
                            <asp:Panel ID="myPanelContainer" runat="server"></asp:Panel>

                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>

 protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            HiddenField hd1 = (HiddenField)e.Row.FindControl("HiddenField1");
            Panel pnl = (Panel)e.Row.FindControl("myPanelContainer");

            string[] strArray = hd1.Value.Split('|');

            for (int i = 0; i < strArray.Length; i++)
            {
                Image photoImageField = new Image();
                photoImageField.ImageUrl = strArray[i];

                pnl.Controls.Add(photoImageField);
            }
        }
    }

这里有很多 Gridview Related Article

Answer 2

在RowDataBound事件中，行的DataItem property将被设置为绑定行的数据源中的项目。

在这种情况下，这将是您的UserInteractionList类的实例。

您需要做的就是将DataItem投射到UserInteractionList班级，然后访问相关媒体资源：

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    var dataItem = (UserInteractionList)e.Row.DataItem;
    string images = dataItem.Image;
    string[] strArray = images.Split('|');

    for (int i = 0; i < strArray.Length; i++)
    {
        Image photoImageField = new Image();
        photoImageField.ImageUrl = strArray[i];
        e.Row.Cells[2].Controls.Add(photoImageField);
    }
}

您可以使用带有嵌套列表的TemplateField来简化此操作：

<asp:TemplateField HeaderText="Images">
<ItemTemplate>
    <asp:ListView runat="server"
        DataSource='<%# Eval("Image", "{0}").Split(new[] { "|" }) %>'
    >
    <ItemTemplate>
        <asp:Image runat="server"
            ImageUrl='<%# Container.DataItem %>'
        />
    </ItemTemplate>
    </asp:ListView>
</ItemTemplate>
</asp:TemplateField>

如果您可以修改UserInteractionList类，则可以通过为拆分图像添加新属性来进一步简化此操作：

public class UserInteractionList
{
    ...

    public string[] Images
    {
         get { return Image.Split('|'); }
    }
}

然后，您将使用该属性作为嵌套列表的数据源：

<asp:ListView runat="server" DataSource='<%# Eval("Images") %>'>