ASP.Net отображать изображения в GridView охватывают столбцы и строки? Использование C #

Question

У меня есть несколько миниатюр, которые я хочу отобразить в Gridview. Я не знаком со всеми настройками, которые предлагаются. По сути, я хочу сохранить изображения в Gridview, возможно, охватывающие 5 столбцов в ширину ... и затем столько строк, сколько потребуется для завершения остальных. Я не хочу никаких заголовков столбцов или строк, и действительно не хочу видеть доказательства фактической сетки. Я также хочу сделать изображения кликабельными.

Я буду извлекать изображения из базы данных Sql в Asp.net. Я не хочу привязывать сетку к источнику sqldatasource, а вставлять изображения в сетку с помощью какого-то цикла в коде за страницей. Вот где это смущает меня. Я знаю, что вы можете создать таблицу данных и добавить столбцы и строки. Тем не менее, кажется, что строки / столбцы не охватывают. Как бы вы сохранили изображения, чтобы они работали как сетка. Ниже я предоставил некоторый (очень) код sudo, чтобы дать вам представление о том, что я пытаюсь сделать.

код sudo:

colcount = 0;  
rowcount = 0;  
imagecount = 0;  
while(images.length > imagecount){  
    if(colcount < 5){  
        grid[rowcount][colcount] = images[imagecount];  
        colcount++;  
        imagecount++;  
    }  
    else{  
        rowcount++;
        colcount = 0; 
    }
}  

Answer 1

Если вам нужен конкретный HTML, то вы все время будете сражаться с GridView. Вместо этого используйте ListView или Repeater.

<asp:ListView runat="server">
   <LayoutTemplate>
      <table>
         <asp:PlaceHolder id="itemPlaceHolder" runat="server" />
       </table>
   </LayoutTemplate>
   <ItemTemplate>
          <tr>
             <td colspan="5"><asp:Image runat="server" src='<%# Eval("ImageUrl")' %></td>
             <td><%# Eval("Column1") %></td>
          </tr>
   </ItemTemplate>
 </asp:ListView>

Я знаю, что вы можете создать таблицу данных и добавить столбцы и строки. Тем не менее, кажется, что строки / столбцы не охватывают.

Похоже, вы создаете System.Data.DataTable - структуру данных, а не элемент управления макетом. Если вы хотите создать <table> программно, вы можете использовать System.Web.UI.WebControls.Table a System.Web.UI.HtmlControls.HtmlTable. Вы можете установить colspan и rowspan для связанных TableRow или HtmlTableRow для них.

Answer 2

Для всего, что вы здесь описали, лучше всего использовать элемент управления DataList. Вы можете указать, сколько столбцов должно быть в ширину, используя свойство RepeatColumns, и вы даже можете устранить любое чувство «табличности», установив для свойства RepeatLayout значение «Поток».

Это также позволит вам не беспокоиться о подсчете столбцов и даже связать коллекцию изображений для привязки.

РЕДАКТИРОВАТЬ: так как вы запросили пример, это будет так просто, как это. Сначала создайте свою сетку и убедитесь, что у вас есть заполнитель для изображения:

<asp:DataList ID="dlImages" runat="server" 
              RepeatColumns="5" 
              RepeatDirection="Horizontal" 
              RepeatLayout="Flow">

   <ItemTemplate>
      <asp:Image ID="imgPrettyPic" runat="server" />
   </ItemTemplate>

</asp:DataList>

Тогда в вашем коде все, что вам нужно сделать, это простая привязка данных. Я не уверен, как хранятся ваши изображения, но в качестве аргумента, скажем, у вас был запрос к базе данных, который дал вам URL-адреса для каждого изображения, которое вы хотите отобразить. Загрузка вашей страницы будет выглядеть примерно так:

if (!Page.IsPostBack())
{

    dtImageURLs = GetImageUrlsFromDB();
    dlImages.DataSource = dtImageURLs;

    dlImages.DataBind();
}

Теперь здесь люди будут отличаться друг от друга. Я предпочитаю использовать все мои методы типа RowBinding в коде, а не в строке, поэтому я использую событие RowDataBound моего DataList и просто соответствующим образом связываю свойство URL.

    protected void dlImages_ItemDataBound(object sender, System.Web.UI.WebControls.DataListItemEventArgs e)
   {

       Image TargetImage = default(Image);
       DataRow DataSourceRow = default(DataRow);

       DataSourceRow = ((System.Data.DataRowView)e.Item.DataItem).Row;
       TargetImage = (Image)e.Item.FindControl("imgPrettyPicture");

       TargetImage.ImageUrl = DataSourceRow.Item("ImageURL").ToString;
   }

... и это должно заставить вас работать. Обратите внимание, что вам нужно изменить объект DataSourceRow на любой тип элемента, с которым вы связываете данные. Я использовал DataRow, так как это наиболее распространенный сценарий, с которым я обычно сталкиваюсь.

Answer 3

Вы могли бы использовать ретранслятор ... Это позволило бы вам действительно определить, как выглядели каждая "строка" или "столбец" и повторяются ли они по горизонтали или по вертикали

Answer 4

Почему бы вам не создать свою сетку вручную?

Создайте в своем коде метод, который выводит необходимый HTML-код с помощью операторов Response.Write. На странице .aspx используйте <% RenderGrid(); %> для вызова метода и отображения соответствующей сетки.