We can use a listview or a datalist for showing the images for one particular coin for example.(I have many images for a coin in my website.)
I have used Listview in the website i am developing so lets see the code
In .aspx page asp:ListView ID="lstvwCoin" runat="server" ItemPlaceholderID="itemPlaceholder" GroupItemCount="2" OnItemDeleting="lstvwCoin_ItemDeleting" DataKeyNames="PictureId"
LayoutTemplate
table id="Table1" runat="server" width="100%"
tr id="Tr1" runat="server"
td
Coin Images
/td
/tr
tr runat="server" id="itemPlaceholder" /
tr id="Tr2" runat="server"
td id="Td2" runat="server"
table id="groupPlaceholderContainer" runat="server" border="0" cellspacing="0" cellpadding="0" width="100%"
tr id="groupPlaceholder" runat="server"
/tr
/table
/td
/tr
/table
/LayoutTemplate
GroupTemplate
tr id="itemPlaceholderContainer" runat="server"
td id="itemPlaceholder" runat="server"
/td
/tr
/GroupTemplate
EmptyDataTemplate
center
No Images are inserted for this coin !
/center
/EmptyDataTemplate
ItemTemplate
tr
td
asp:Image ID="coinimg" runat="server" ImageUrl='%#"~/CoinImages/Thumbnail/"+ Eval("PictureId") +".jpg" %' /
asp:Label ID="lblPicId" runat="server" Text='<%#Eval("PictureId")%>' Visible="false" /asp:Label
/td
/tr
tr
td
asp:LinkButton ID="lnkbtnDelete" runat="server" CausesValidation="false" CommandName="Delete"
Text='<%# WebUtil.GetTranslatedString("lnk_ListM_Delete")%>' /
/td
/tr
/ItemTemplate
/asp:ListView -Here for listview we have ItemDeleting property which is useful for deleting the images by delete link.
-We have 4 templates in the code pasted ItemTemplate,LayoutTemplate,GroupTemplate & EmptyDataTemplate.
-Layout template is used for the displaying the headings of each column (just like headertemplate in datalist).
-EmptyData Template is used for displaying a message if no data available for the criteria we are searching for.
-Item Template is used here for the items to be displayed according to the layout template headings.
-Group Template is used displaying the images in an album format.
Note: Please add lessthan and greater than for each line pasted coz they are not getting displayed once i put them so i have removed them.In .aspx.cs Pageprivate void bindimageview(int coinid)
{
CoinDao coinDao = new CoinDao();
lstvwCoin.DataSource = coinDao.GetImages(coinid);
lstvwCoin.DataBind();
}
The Method above is for assigning the datasource to the list view and binding the data. protected void btnAddImg_Click(object sender, EventArgs e)
{
if (!string.IsNullOrEmpty(lblCoinId.Text))
{
Guid picId = Guid.NewGuid();
CoinDao coinDao = new CoinDao();
Coins coin = new Coins();
coin.CoinId = int.Parse(lblCoinId.Text);
coin.Country.CountryId = int.Parse(lblCountryId.Text);
coin.CoinName = txtCoinName.Text;
coin.Country.CountryName = txtCName.Text;
coin.PictureId = picId;
Bitmap originalBitmap = new Bitmap(FileUpload1.PostedFile.InputStream);
int orgHieght = originalBitmap.Height;
int orgWidth = originalBitmap.Width;
Bitmap thubmBitmap = (Bitmap)originalBitmap.Clone();
Bitmap passportBitmap = (Bitmap)originalBitmap.Clone();
string PicfilePath = Server.MapPath("~/CoinImages/Thumbnail/" + picId + ".jpg");
thubmBitmap = BitmapManipulator.ThumbnailBitmap(thubmBitmap, 75, 75);
thubmBitmap = BitmapManipulator.ConvertBitmapToJpeg(thubmBitmap, 100);
thubmBitmap.Save(PicfilePath, ImageFormat.Jpeg);
coinDao.AddImage(coin);
bindimageview(Convert.ToInt32( lblCoinId.Text));
//Response.Redirect("~/ListOfCoins.aspx");
}
}
protected void btnCancel_Click(object sender, EventArgs e)
{
Response.Redirect("~/ListOfCoins.aspx");
}
protected void lstvwCoin_ItemDeleting(object sender, ListViewDeleteEventArgs e)
{
string pictureId = ((System.Web.UI.WebControls.ListView)(sender)).DataKeys[0].Value.ToString();
CoinDao coindao=new CoinDao();
if (!string.IsNullOrEmpty(pictureId))
{
coindao.DeleteImage(pictureId);
}
//string imageFolder = Server.MapPath("~/Images/Albums/") + albumName + "/";
//if (Directory.Exists(imageFolder))
//{
// Directory.Delete(imageFolder, true);
//}
bindimageview(Convert.ToInt32(lblCoinId.Text));
}
}
We have 3 methods pasted here, one for
Add image click for adding the images in the file path given and also to the database.Here PictureId is uniqueidentifier in the Database and Guid in the VisualStudio and Cancel_click for redirecting to the page we started and the other method Item_Deleting for deleting the image from the Database.