Question

我想一次在single行的网格视图中显示多个图像。

此外，我想确保对于一次上传的多个图片，应该只有一行插入到表格中。

查看我的BindGrid（）代码; -

private void BindGrid()
    {
        string conString = ConfigurationManager.ConnectionStrings["DefaultCSRConnection"].ConnectionString;
        SqlCommand cmd = new SqlCommand("Select Id, gallery_id, image_title, image_description, image_path from tbl_gallery_stack order by Id desc");
        using (SqlConnection con = new SqlConnection(conString))
        {
            using (SqlDataAdapter sda = new SqlDataAdapter())
            {
                cmd.Connection = con;
                sda.SelectCommand = cmd;
                using (DataTable dt = new DataTable())
                {
                    sda.Fill(dt);
                    grdGalleryData.DataSource = dt;
                    grdGalleryData.DataBind();
                }
            }
        }
    }

另请参阅gridview的HTML： -

<asp:GridView ID="grdGalleryData"
            runat="server"
            Width="100%" border="1"
            Style="border: 1px solid #E5E5E5;"
            CellPadding="3"
            AutoGenerateColumns="False"
            AllowPaging="True"
            PageSize="10"
            OnPageIndexChanging="grdGalleryData_PageIndexChanging"
            CssClass="hoverTable"
            DataKeyNames="Id">
            <AlternatingRowStyle BackColor="#CCCCCC" />
            <Columns>
                <asp:TemplateField HeaderText="Select" ItemStyle-Width="30" HeaderStyle-CssClass="k-grid td">
                    <ItemTemplate>
                        <asp:CheckBox ID="chkDelete" runat="server" />
                    </ItemTemplate>
                    <HeaderStyle CssClass="k-grid td"></HeaderStyle>
                    <ItemStyle Width="30px"></ItemStyle>
                </asp:TemplateField>
                <asp:BoundField DataField="gallery_id" HeaderText="Id" ItemStyle-Width="25" HeaderStyle-CssClass="k-grid td" />
                <asp:BoundField DataField="image_title" HeaderText="Gallery title" ItemStyle-Width="25" HeaderStyle-CssClass="k-grid td" />
                <asp:BoundField DataField="image_description" HeaderText="Gallery Description" ItemStyle-Width="25" HeaderStyle-CssClass="k-grid td" />
                <asp:TemplateField HeaderText="Images" ItemStyle-Width="25" HeaderStyle-CssClass="k-grid td">
                    <ItemTemplate>
                        <asp:Image ID="imgDisplay" runat="server" ImageUrl='<%#Getimage(Eval("image_path").ToString()) %>' Width="100px" Height="100px" />
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>

Answer 1

我建议您定期访问网站：https://social.msdn.microsoft.com/Forums/windowsapps/en-US/0565b55e-3daf-4eef-85ac-a8ab72af4e68/displaying-the-images-into-the-gridview /。

Answer 2

您似乎在查询数据为每行图像而不是与行相关的图像。因此，您需要将数据库查询模式更改为如下所示（仅用于演示目的以保存嵌套数据集）：

       void BindGrid()
        {
            using (SqlConnection con = new SqlConnection("YOUR CONNECTION STRING"))
            {
                using (SqlDataAdapter personAdapter = new SqlDataAdapter("SELECT * FROM PersonTable", con))
                using (SqlDataAdapter personImagesAdapter = new SqlDataAdapter("SELECT * FROM PersonImages", con))
                {

                    DataSet dataSet = new DataSet("PersonAndImagesDataSet");
                    personAdapter.Fill(dataSet, "PersonTable");
                    personImagesAdapter.Fill(dataSet, "PersonImages");

                    DataRelation personWithImages = dataSet.Relations.Add("PersonAndImages", dataSet.Tables["PersonTable"].Columns["Id"],
     dataSet.Tables["PersonImages"].Columns["Person_Id"]);
                    if (grdGalleryData.DataSource == null)
                    {
                        grdGalleryData.DataSource = dataSet.Tables["PersonTable"];
                        grdGalleryData.DataBind();
                    }


                }
            }
        }

在HTML中，您可以包含ListView（或您选择的控件以保存列表项），并在GridView的数据绑定事件中执行以下操作：

ASPX查看

 <asp:GridView ID="grdGalleryData"
        runat="server"
        Width="100%" border="1"
        Style="border: 1px solid #E5E5E5;"
        CellPadding="3"
        AutoGenerateColumns="False"
        AllowPaging="True"
        PageSize="3"
        CssClass="hoverTable"
        DataKeyNames="Id" OnRowDataBound="grdGalleryData_RowDataBound">
        <AlternatingRowStyle BackColor="#CCCCCC" />
        <Columns>
            <asp:TemplateField HeaderText="Select" ItemStyle-Width="30" HeaderStyle-CssClass="k-grid td">
                <ItemTemplate>
                    <asp:CheckBox ID="chkDelete" runat="server" />
                </ItemTemplate>
                <HeaderStyle CssClass="k-grid td"></HeaderStyle>
                <ItemStyle Width="30px"></ItemStyle>
            </asp:TemplateField>
            <asp:BoundField DataField="Id" HeaderText="Id" ItemStyle-Width="25" HeaderStyle-CssClass="k-grid td" />
            <asp:BoundField DataField="Name" HeaderText="Gallery title" ItemStyle-Width="25" HeaderStyle-CssClass="k-grid td" />
            <asp:TemplateField HeaderText="Images" ItemStyle-Width="25" HeaderStyle-CssClass="k-grid td">
                <ItemTemplate>
                    <asp:ListView runat="server" ID="lvImages" OnDataBinding="lvImages_DataBinding" >
                        <ItemTemplate>
                            <asp:Image ID="imgDisplay" runat="server" ImageUrl='<%#Eval("ImagePath")%>' Width="50px" Height="50px" />
                        </ItemTemplate>
                    </asp:ListView>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>

数据绑定到ListView（C＃）

protected void grdGalleryData_RowDataBound(object sender, GridViewRowEventArgs e)
{
            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                var personId = Convert.ToInt32((e.Row.DataItem as DataRowView)["Id"]);
                var imageListView = e.Row.FindControl("lvImages") as ListView;

                //Just for demo purpose. Get only required image data based on the parent table id  in actual code.
                if (data == null)
                {
                    data = GetData();
                }
                //In below line, based on the parent table id , get the image data from data store. Just for brevity I am querying a complete dataset on every row data bind.
               //E.g: var resultRows =  DataStore.GetImage(int personId); and bind this to ListView directly.
                var resultRows = data.Tables["PersonImages"].AsEnumerable().Where(img => img.Field<int>("Person_Id") == personId); 
                DataTable dtImages = new DataTable();
                if (resultRows != null && resultRows.Count()>0)
                    dtImages = resultRows.CopyToDataTable();

                imageListView.DataSource = dtImages; //Here you should be assigning result table/collection that you get from data store.
                imageListView.DataBind();
            }
 }

希望这对你有所帮助。

在gridview中显示多个图像

2 个答案: