How to make Datalist control responsive in image display time dynamically
Design code :
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>How to make Datalist control responsive in image display time dynamically</title>
</head>
<body>
<form id="form1" runat="server">
<div class="container table-responsive">
<asp:DataList ID="DataList1" runat="server" RepeatColumns="5" RepeatDirection="Horizontal" RepeatLayout="Flow">
<ItemTemplate>
<div style="float: left;">
<asp:Image ID="Data" runat="server" CssClass="img-rounded img-responsive" Width="200px"
Height="200px" ImageUrl='<%#Eval("ImagePath") %>'/>
<br />
<br />
</div>
</ItemTemplate>
</asp:DataList>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
</form> </body></html>
In code behind :
Add name space
using System;
using System.Data;
using System.Data.SqlClient;
In code section, First, we need to create a connection string to connect database. Write sql query to retrive data from database's table and store in dataset. Bind datalist with dataset.
Source Code:
SqlConnection con = new SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["test"].ConnectionString);
protected void Page_Load(object sender, EventArgs e)
{
con.Open();
string sql = "select * from tbl_image";
SqlCommand cmd = new SqlCommand(sql, con);
SqlDataAdapter adap = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
adap.Fill(ds);
DataList1.DataSource = ds;
DataList1.DataBind();
}
Comments
Post a Comment