Thumbnail control does not update after images added/removed.

[RB]

Hi there,

I'm having a problem with an ASP.NET/VB.NET Control I am writing.

The control is a simple gallery control, which shows a set of thumbnails
(using a DataList), and a main image of the selected thumbnail. It also
has "Add Picture" and "Delete Picture" buttons.
"Add Picture" will add a new picture, while "Delete Picture" will remove
the currently selected picture. These are both ASP:ImageButtons, with
the functionality implemented in the OnClick events.

This control is then embedded in a page. This all works, with only 1
problem.

When I add a new picture it does not appear until I manually reload the
page. Conversely, when I delete a picture it leaves a blank picture in
place (the file itself has been deleted, so I get the missing image
'X'), until I manually reload the page.

I'm an experienced programmer, but I'm new to ASP .NET, so please take
that into account ;-)

Regards,

RB.

CODE SNIPPETS:
' ASCX PAGE
<div id="dvToolbar" class="toolbar">
File:
<INPUT
id="MyFile"
type="file"
size="40"
name="MyFile"
RunAt="Server"
/>
<br>
Caption:
<asp:textbox id="txtCaption"
runat="server"
EnableViewState="False">
</asp:textbox>
<asp:imagebutton id="btnAddPicture"
Runat="server"
ImageUrl="\image\add_.gif"
AlternateText="Add new picture"
EnableViewState="False">
</asp:imagebutton>
<asp:imagebutton id="btnDeletePicture"
Runat="server"
ImageUrl="\image\del_.gif"
AlternateText="Remove current picture"
EnableViewState="False">
</asp:imagebutton>
<asp:imagebutton id="btnEditCaption"
Runat="server"
ImageUrl="\GEMs\image\Edit.gif"
AlternateText="Set caption of current picture"
EnableViewState="False">
</asp:imagebutton>
</div>
<div id="dvPhotos" runat="server">
<div id="dvThumbnails" class="thumbnails">
<asp:datalist id="dlPhotos"
RepeatDirection="Horizontal"
runat="server"
RepeatLayout="Flow"
Height="18px"
EnableViewState="False">
<ItemTemplate>
<asp:Image ID="Image1"
Runat=server ImageUrl='<%# "Thumbnail.aspx?filename=" &
Container.DataItem("photoFileName") & "&width=120" %>'
AlternateText='<%# Container.DataItem("photoDescription")%>'>
</asp:Image>
</ItemTemplate>
</asp:datalist>
</div>
<div id="dvMain" class="mainimage">
<asp:image id="imgMain"
runat="server"
EnableViewState="False">
</asp:image>
<br />
<div style="VISIBILITY:hidden">
<asp:TextBox id="txtHiddenPhotoId" Runat="server" />
</div>
</div>
</div>

' CODE BEHIND
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As
System.EventArgs) Handles MyBase.Load
' Bind thumbnail images to grid
Dim sr As SqlClient.SqlDataReader = myDev.GetDevPhotos(DevId)
If (sr.Read) Then
ShowPhotoControls(True)
Else
ShowPhotoControls(False)
End If
dlDevelopmentPhotos.DataSource = myDev.GetDevPhotos(DevId)
dlDevelopmentPhotos.DataBind()
End Sub

Private Sub ShowPhotoControls(ByVal bShow As Boolean)
'Hide the photos div block (dvPhotos) and the
'Delete button if required (because there are no
'photos available).
If bShow Then
dvPhotos.Attributes.Item("style") = ""
Else
dvPhotos.Attributes.Item("style") = "VISIBILITY:hidden"
End If
btnDeletePicture.Visible = bShow
End Sub

Private Sub btnDeletePicture_Click(ByVal sender As System.Object,
ByVal e As System.Web.UI.ImageClickEventArgs) Handles btnDeletePicture.Click
'Code to remove picture from database
End Sub

Private Sub btnAddPicture_Click(ByVal sender As System.Object,
ByVal e As System.Web.UI.ImageClickEventArgs) Handles btnDeletePicture.Click
'Code to save uploaded picture.
'Code to insert photo into database.
End Sub

[Mark Fitzpatrick]

Your code to show the photos may be happening before the photo is being
added. In this case, you need to force a re-show of the photos. You could
put your photo-showing code into a function so that you can call it again
from your insert and delete functions.
--
Hope this helps,
Mark Fitzpatrick
Microsoft MVP - FrontPage

"RB" <ow************@mailinator.comwrote in message
news:aL******************************@eclipse.net. uk...

Hi there,

I'm having a problem with an ASP.NET/VB.NET Control I am writing.

The control is a simple gallery control, which shows a set of thumbnails
(using a DataList), and a main image of the selected thumbnail. It also
has "Add Picture" and "Delete Picture" buttons.
"Add Picture" will add a new picture, while "Delete Picture" will remove
the currently selected picture. These are both ASP:ImageButtons, with the
functionality implemented in the OnClick events.

This control is then embedded in a page. This all works, with only 1
problem.

When I add a new picture it does not appear until I manually reload the
page. Conversely, when I delete a picture it leaves a blank picture in
place (the file itself has been deleted, so I get the missing image 'X'),
until I manually reload the page.

I'm an experienced programmer, but I'm new to ASP .NET, so please take
that into account ;-)

Regards,

RB.

CODE SNIPPETS:
' ASCX PAGE
<div id="dvToolbar" class="toolbar">
File:
<INPUT
id="MyFile"
type="file"
size="40"
name="MyFile"
RunAt="Server"
/>
<br>
Caption:
<asp:textbox id="txtCaption"
runat="server"
EnableViewState="False">
</asp:textbox>
<asp:imagebutton id="btnAddPicture"
Runat="server"
ImageUrl="\image\add_.gif"
AlternateText="Add new picture"
EnableViewState="False">
</asp:imagebutton>
<asp:imagebutton id="btnDeletePicture"
Runat="server"
ImageUrl="\image\del_.gif"
AlternateText="Remove current picture"
EnableViewState="False">
</asp:imagebutton>
<asp:imagebutton id="btnEditCaption"
Runat="server"
ImageUrl="\GEMs\image\Edit.gif"
AlternateText="Set caption of current picture"
EnableViewState="False">
</asp:imagebutton>
</div>
<div id="dvPhotos" runat="server">
<div id="dvThumbnails" class="thumbnails">
<asp:datalist id="dlPhotos"
RepeatDirection="Horizontal"
runat="server"
RepeatLayout="Flow"
Height="18px"
EnableViewState="False">
<ItemTemplate>
<asp:Image ID="Image1"
Runat=server ImageUrl='<%# "Thumbnail.aspx?filename=" &
Container.DataItem("photoFileName") & "&width=120" %>'
AlternateText='<%# Container.DataItem("photoDescription")%>'>
</asp:Image>
</ItemTemplate>
</asp:datalist>
</div>
<div id="dvMain" class="mainimage">
<asp:image id="imgMain"
runat="server"
EnableViewState="False">
</asp:image>
<br />
<div style="VISIBILITY:hidden">
<asp:TextBox id="txtHiddenPhotoId" Runat="server" />
</div>
</div>
</div>

' CODE BEHIND
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As
System.EventArgs) Handles MyBase.Load
' Bind thumbnail images to grid
Dim sr As SqlClient.SqlDataReader = myDev.GetDevPhotos(DevId)
If (sr.Read) Then
ShowPhotoControls(True)
Else
ShowPhotoControls(False)
End If
dlDevelopmentPhotos.DataSource = myDev.GetDevPhotos(DevId)
dlDevelopmentPhotos.DataBind()
End Sub

Private Sub ShowPhotoControls(ByVal bShow As Boolean)
'Hide the photos div block (dvPhotos) and the
'Delete button if required (because there are no
'photos available).
If bShow Then
dvPhotos.Attributes.Item("style") = ""
Else
dvPhotos.Attributes.Item("style") = "VISIBILITY:hidden"
End If
btnDeletePicture.Visible = bShow
End Sub

Private Sub btnDeletePicture_Click(ByVal sender As System.Object,
ByVal e As System.Web.UI.ImageClickEventArgs) Handles
btnDeletePicture.Click
'Code to remove picture from database
End Sub

Private Sub btnAddPicture_Click(ByVal sender As System.Object, ByVal e
As System.Web.UI.ImageClickEventArgs) Handles btnDeletePicture.Click
'Code to save uploaded picture.
'Code to insert photo into database.
End Sub

[RB]

Mark Fitzpatrick wrote:

Your code to show the photos may be happening before the photo is being
added. In this case, you need to force a re-show of the photos. You could
put your photo-showing code into a function so that you can call it again
from your insert and delete functions.

I did as you suggest and called dlDevelopmentPhotos.DataBind from the
Add and Delete functions, and it worked a treat (it was already in a
function, I just took it out while posting to the newsgroup for
clarity!!), so thank-you a huge amount for that :-)

I do have one question though - why did it not work as it was?

Consider this code:
<script runat="server">
Sub Page_Load
If Not Page.IsPostBack Then
lbl1.Text="The First Load was at " & now()
End If
lbl2.Text="The Current Load was at " & now()
End Sub

Sub Submit(s As Object, e As EventArgs)
End Sub
</script>

<html>
<body>
<form runat="server">
<h3><asp:label id="lbl1" runat="server" /></h3>
<h3><asp:label id="lbl2" runat="server" /></h3>
<h3><asp:label id="lbl3" runat="server" /></h3>
<asp:button text="Submit" onclick="submit" runat="server" />
</form>
</body>
</html>

When you load this the first time, lbl1 and lbl2 will have the same
time. Clicking submit will cause lbl2's time to be updated, while
refreshing the page will cause both labels to be updated. This makes
sense to me.

Changing it to be my code, and considering "lbl2.text=" to be
dlDevelopmentPhotos.Bind, it should work (in my feeble little mind at
least!!), but instead it was behaving like lbl1 would. I checked whether
the containing page had a "Not Page.IsPostBack" line in it, but it didn't.

Obviously I'm missing something vital here - I was just wondering if any
one could shed a little light on it!

Many thanks,

RB.