Coding HTML within VB.Net codebehind file!
What I am trying to do is load a directory of images using VB.Net code. Here is essentially what I'm trying to do.
Code:
Dim fiArr As FileInfo() = di.GetFiles()
' Display the names of the files.
Dim fri As FileInfo
For Each fri In fiArr
Image1.ImageUrl = imgPath & fri.Name
Panel1.Controls.Add("<tr>")
Panel1.Controls.Add("<td>" & Panel1.Controls.Add(Image1) & _
Panel1.Controls.Add("</td>")
Next fri
I want to display all the thumbnail images in 6 columns and as many rows as necessary. I know the above code won't work but that is what I'm trying to accomplish. I just don't know which objects to use to write out the HTML code.
Thanks,
Re: Coding HTML within VB.Net codebehind file!
Wouldn't it be easier to use a DataList or Repeater control?
The DataList.DataSource property can be set directly to the FileInfo array.
After setting the DataSource property call the DataList.DataBind method. The ItemDataBound event will fire for each item in the array. Then simply set the appropriate properties of each control contained in the DataList's ItemTemplate.
Re: Coding HTML within VB.Net codebehind file!
Bruce,
Unfortunately, I haven't gotten to that control yet. I am teaching myself ASP.Net and still have alot to learn. Wouldn't by any chance have an example of that would you?
Thanks,
Re: Coding HTML within VB.Net codebehind file!
Here is a quick example
test.aspx file
Code:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="test.aspx.vb" Inherits="test" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<asp:DataList ID="DataList1" runat="server" RepeatColumns="6" RepeatDirection="Horizontal" ShowFooter="False" ShowHeader="False">
<ItemTemplate>
<asp:Image ID="imgThumb" runat="server" />
</ItemTemplate>
</asp:DataList>
</form>
</body>
</html>
test.aspx.vb file
Code:
Partial Class test
Inherits System.Web.UI.Page
Private Const ImageDir As String = "~/images/"
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
DataList1.DataSource = New System.IO.DirectoryInfo(MapPath(ImageDir)).GetFiles
DataList1.DataBind()
End Sub
Protected Sub DataList1_ItemDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DataListItemEventArgs) Handles DataList1.ItemDataBound
If e.Item.ItemType = ListItemType.Item Or e.Item.ItemType = ListItemType.AlternatingItem Then
Dim img As Image = DirectCast(e.Item.FindControl("imgThumb"), Image)
If img IsNot Nothing Then
img.ImageUrl = ImageDir & DirectCast(e.Item.DataItem, System.IO.FileInfo).Name
img.Height = 50
img.Width = 50
End If
End If
End Sub
End Class
Re: Coding HTML within VB.Net codebehind file!
Hey,
The only problem that I see with this direct approach of loading images from the file system is that you are loading the "full" image into the browser. Depending on the resolution of these images, then it is going to take a long time to load the page. Even though you are setting the height and width of the image, you are still loading the full information about that image into that space, it is just getting "shrunk" in the browser.
Did you look at the PSK Site that I pointed you at? It covers the resizing of images on the fly to make the loading of pages with thumbnail images possible.
Gary
Re: Coding HTML within VB.Net codebehind file!
Gary,
I'm actually loading thumbnail images. I did take a look at the PSK. Due to the fact that I'm under a time constraint, I'm not going to be able to use it at this time. It looked confusing to me but I would like to look into more when I have more time.
Re: Coding HTML within VB.Net codebehind file!
Hey Bruce,
Your code worked. It actually displayed all the thumbnail images in the directory. Now I just need to associate them with the full-size picture. Don't suppose you know how to do that would ya???
Thanks,
Re: Coding HTML within VB.Net codebehind file!
Quote:
Now I just need to associate them with the full-size picture.
That all depends on what you mean! What do you want to happen?
The ImageButton might be a better control to use than the Image control. It automatically raises events/causes postbacks in response to mouse clicks.
Re: Coding HTML within VB.Net codebehind file!
I basically want the user to be able to roll the mouse over an image and display it in full size...
Re: Coding HTML within VB.Net codebehind file!
Hey,
This isn't really a "basic" thing to achieve though :)
Unless you are pre-loading each full size image to the client when the page is loaded, you are going to need to request the full size image from the server each time each time a roll over happens. i.e. you are going to need to post back to the server.
Are you using AJAX in this application?
One way to do this without a full page post back would be to use something like a ModalPopUp Extender which shows when you click on the image, and requests that full size image from the server.
Gary
Re: Coding HTML within VB.Net codebehind file!
Gary,
What would be the best method to do this. I mean...all I want to do is display the thumbnail images and whenever the user mouses over an image, the full size images pops up. Ideally, I don't want them to have to click anything to cancel the current image but just move the mouse to the next image. Do you know what the industry standards for this kind of functionality might be?
Thanks,
Re: Coding HTML within VB.Net codebehind file!
Hey,
I certainly can't comment on the industry standard, I honestly don't know :)
I guess the real question we need to answer is, are you simply wanting to show a larger version of the thumbnail image, i.e. a zoomed in version, or are you wanting to see a higher resolution version of the same photo?
From what I understand, I think it is the latter, which is the harder one.
You might be able to do something with the following:
http://visuallightbox.com/
or
http://ajaxphotogallery.com/ajax-thumbnail-gallery.html
If this is the type of thing you are after, and you want to code it yourself, then I would have said that AJAX would be your best bet. Use a combination of the SlideShow with some Animation to pop up a div the contains the bigger picture.
Gary
Re: Coding HTML within VB.Net codebehind file!
Hi,
I added a little javascript and html to brucevde mark up and a little more code which will display a image when you click the thumbnail. It's bare bones but it shows you a simple method to get started with - if you want to try something yourself ELSE go for Gary's links.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript">
function showPic (whichpic) {
if (document.getElementById) {
document.getElementById('imgBig').src = whichpic.href;
return false;
} else {
return true;
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<img id="imgBig" />
<asp:DataList ID="DataList1" runat="server" RepeatColumns="6" RepeatDirection="Horizontal" ShowFooter="False" ShowHeader="False">
<ItemTemplate>
<a id="imgLink" onclick='return showPic(this)' runat="server">
<asp:Image ID="imgThumb" runat="server" />
</a>
</ItemTemplate>
</asp:DataList>
</div>
</form>
</body>
</html>
Code:
Private Const ImageDir As String = "~/images/"
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
DataList1.DataSource = New System.IO.DirectoryInfo(MapPath(ImageDir)).GetFiles
DataList1.DataBind()
End Sub
Protected Sub DataList1_ItemDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DataListItemEventArgs) Handles DataList1.ItemDataBound
If e.Item.ItemType = ListItemType.Item Or e.Item.ItemType = ListItemType.AlternatingItem Then
Dim img As Image = DirectCast(e.Item.FindControl("imgThumb"), Image)
If img IsNot Nothing Then
img.ImageUrl = ImageDir & DirectCast(e.Item.DataItem, System.IO.FileInfo).Name
img.Height = 50
img.Width = 50
End If
Dim hl As HtmlAnchor = DirectCast(e.Item.FindControl("imgLink"), HtmlAnchor)
If hl IsNot Nothing Then
'change to name of big image like maybe the difference is thumbs have _th on the end so remove this from the "name"
hl.HRef = ImageDir & DirectCast(e.Item.DataItem, System.IO.FileInfo).Name
End If
End If
End Sub
