I will explain how to save images into
folder and how we can bind that images
to datalist using asp.net. It's very
easy to store images in folder and binding
that images to datalist. This topic shows how
to integrate BinaryImage control into a DataList control
to display images stored as binary images, in data binding scenarios.
Step 1:
CREATE TABLE [products]
(
[ID] [numeric](18, 0) NOT NULL,
[ProductName] [nvarchar](50) NULL,
[Category] [varchar](50) NULL,
[Price] [int] NULL,
[Image] [varchar](50) NULL,
)
Step 2:
SELECT [ProductName], [Image], [Price],[Category] from products
ProductName Image Price Category
LG ~\images\lg\lg.jpg
10000 LG
Nexus 5 ~\images\lg\nexus.jpg 25000 LG
Optimus ~\images\lg\optim.jpg 30000 LG
Flex ~\images\lg\fl.jpg 20000
LG
GW-620 ~\images\lg\gw 620.jpg 8000 LG
Verizon ~\images\lg\ver.jpg 12000 LG
SELECT [ProductName], [Image], [Price] FROM [products] WHERE ([Category]='LG')
ProductName Image Price
LG ~\images\lg\lg.jpg 10000
Nexus 5 ~\images\lg\nexus.jpg 25000
Optimus ~\images\lg\optim.jpg 30000
Flex ~\images\lg\fl.jpg 20000
GW-620
~\images\lg\gw 620.jpg 8000
Verizon ~\images\lg\ver.jpg 12000
Under Div section you have to place this
code
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div class="center_content">
<div class="center_title_bar">My Product</div>
<br /><br />
<br />
<asp:DataList ID="DataList5" runat="server" CellPadding="6" CellSpacing="6"
DataSourceID="SqlDataSource5" RepeatColumns="3" Width="550px">
<ItemTemplate>
<div class="center_prod_box">
<table class="prod_box">
<tr>
<td class="product_title">
<asp:HyperLink ID = "HyperLink1" runat="server" Text='<%# Eval("ProductName") %>' Font-Underline="False" NavigateUrl='<%#"product details.aspx?ProductName="+Eval("ProductName") %>'></asp:HyperLink>
</td>
</tr>
<tr>
<td class="product_img">
<asp:ImageButton ID="ImageButton1" runat="server" Height="90px" ImageUrl ='<%# Eval("Image") %>' ImageAlign = "AbsMiddle" PostBackUrl='<%#"product
details.aspx?ProductName="+Eval("ProductName") %>'/>
</td>
</tr>
<tr>
<td class="prod_price">
<asp:Label ID="Label1" runat="server" Text = '<%# Eval("Price") %>' ></asp:Label>
</td>
</tr>
</table>
</div>
</ItemTemplate>
</asp:DataList>
<br />
<asp:SqlDataSource ID="SqlDataSource5" runat="server"
ConnectionString="<%$
ConnectionStrings:shauryaConnectionString %>"
SelectCommand="SELECT [ProductName], [Image], [Price] FROM [products] WHERE
([Category]='LG')">
</asp:SqlDataSource>
</div>
</form>
</body>
</html>
Note:In
above Source code I m using my own css for designing,may be U.I. will look like
different in your case.
Post a Comment