Thumbnail control does not update after images added/removed.

Discussion in 'ASP .Net' started by RB, Aug 29, 2007.

  1. RB

    RB Guest

    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, Aug 29, 2007
    #1
    1. Advertising

  2. 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" <> wrote in message
    news:...
    > 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, Aug 29, 2007
    #2
    1. Advertising

  3. RB

    RB Guest

    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.
     
    RB, Aug 29, 2007
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. David Lozzi
    Replies:
    1
    Views:
    517
    john smith
    Feb 1, 2006
  2. Milsnips
    Replies:
    0
    Views:
    524
    Milsnips
    Apr 19, 2006
  3. Replies:
    6
    Views:
    702
  4. Bhanu
    Replies:
    5
    Views:
    310
  5. mherrera78

    bind images into Data List to build a thumbnail control

    mherrera78, Oct 26, 2007, in forum: ASP .Net Web Controls
    Replies:
    0
    Views:
    203
    mherrera78
    Oct 26, 2007
Loading...

Share This Page