Показать несколько изображений в gridview

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(); 
       } 
      } 
     } 
    } 

Также смотрите HTML для GridView: -

<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 (или управление по вашему выбору держать элементы списка) и по событию DataBind 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> 

Dat abinding в 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(); 
      } 
} 

Надеется, что это поможет вам.