How to fetch and display data, in card view, from database in ASP with image
By Guest |
Nov 13, 2021 |
ASP NET
How to fetch data from database in ASP with image
We already have a database (.mdf) in our asp.net project with the below fields:
[name] VARCHAR (50) NOT NULL,
[description] VARCHAR (150) NOT NULL,
[image] VARCHAR (50) NULL,
We have inserted the data and image here. Now let's fetch the data from the database and display all the data along with images. We will be using the "DataList" tool from the asp toolbox.
Add the dataSource to the datalist and select all the columns you want to display.
<asp:DataList ID="DataList1" runat="server" DataKeyField="Id" DataSourceID="SqlDataSourcecategory" RepeatColumns="4" RepeatDirection="Horizontal" >
<ItemTemplate>
<div class="card-body shadow mx-2 mt-3">
<asp:Image ID="Image1" runat="server" Height="200px" Width="200" ImageUrl='<%# Eval("image") %>' />
<br />
<asp:Label ID="nameLabel" runat="server" Text='<%# Eval("name") %>' />
<br />
</div>
</ItemTemplate>
</asp:DataList>
<asp:SqlDataSource ID="SqlDataSourcecategory" runat="server"
ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
SelectCommand="SELECT * FROM [categories] WHERE [status]=0">
</asp:SqlDataSource>
<br />
Thank you.