Display a single card design using markup.
Next, enclose the markup within a repeater to repeat the display.
Here is an example of the markup:
<asp:Repeater ID="Repeater1" runat="server" >
<ItemTemplate>
<div style="border-style:solid;color:black;width:320px;height:450px;float:left;margin-right:10px;margin-bottom:10px">
<div style="text-align:center;padding:2px 10px 2px 10px">
<h3><%# Eval("Fighter") %></h3>
<asp:Image ID="Image2" runat="server"
ImageUrl = '<%# Eval("ImagePath") %>' Width="170" />
<h4>Engine</h4>
<asp:Label ID="EngineLabel2" runat="server" Text='<%# Eval("Engine") %>' />
<h4>Description</h4>
<asp:Label ID="DescLabel" runat="server" Text='<%# Eval("Description") %>' />
</div>
</div>
</ItemTemplate>
</asp:Repeater>
Each row populates controls with "eval" expressions as instructed above.
Here's the code to load the data:
protected void Page_Load(object sender, System.EventArgs e)
{
if (!IsPostBack)
{
DataTable rstData;
rstData = MyRst("select * from Fighters");
Repeater1.DataSource = rstData;
Repeater1.DataBind();
}
}
public DataTable MyRst(string strSQL)
{
DataTable rstData = new DataTable();
using (SqlConnection conn = new SqlConnection(Properties.Deafult.Settings.TEST4))
{
using (SqlCommand cmdSQL = new SqlCommand(strSQL, conn))
{
conn.Open();
rstData.Load(cmdSQL.ExecuteReader);
rstData.TableName = strSQL;
}
}
return rstData;
}
The output will look like this:
https://i.sstatic.net/LTTy8.png
If viewed on a larger screen, it will appear like this:
https://i.sstatic.net/kV8p7.png
As each div is floated left, they stack horizontally until there is no more room.
When space runs out, cards move to the next line automatically.
You can also use datalists for specifying column numbers, but a simple repeater works well too.
If you have repeating markup, a repeater like the one shown above is ideal. Similar elements like ListView, datalist, GridView operate by creating instances for every record fed to them through a datasource.