How to fetch and display data, in card view, from database in ASP with image

13-11-2021 | Share: Whatsapp

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 />

We had inserted the image's name along with the path in this post, so print the value of the "image" field in the ImageUrl attribute and you will get the full path of the image.

Thank you.