Dynamically added ImageButton Command event not firing until second click

Question

I have a page where I'm adding ImageButtons dynamically. I first set the OnClientClick of the buttons to simply show a popup of the image enlarged and return false for no postback.

I have a button on the page to set the "primary image" so when this button is clicked I set a property called _IsSettingPrimaryPhotoMode = true, call the function to recreate the ImageButtons, and when creating the ImageButtons if this property is true instead of adding an OnClientClick, I hook up a CommandEventHandler so I can tell which button was clicked by reading the CommandArgument.

The problem is the event handler won't fire on the first click of the image but only on the second click and thereafter. I've also moved the code from Page_Load to OnInit and I load the ImageButtons on every postback.

I save the _IsSettingPrimaryPhotoMode to the Session.

private bool _IsSettingPrimaryPhotoMode {
    get {
        bool result = false;

        if(Session[ConstantsWeb.Session.IS_DELETE_IMAGE_MODE] != null) {
            result = Convert.ToBoolean(Session[ConstantsWeb.Session.IS_SETTING_PRIMARY_IMAGE_MODE]);
        }

        return result;
    }
    set {
        Session[ConstantsWeb.Session.IS_SETTING_PRIMARY_IMAGE_MODE] = value;
    }
}

The page OnInit

protected override void OnInit(EventArgs e) {
    base.OnInit(e);

        if(!IsPostBack) {
            _IsSettingPrimaryPhotoMode = false;
        }

        _LoadGalleryImages();
    }
}

The _LoadGalleryImages method

private void _LoadGalleryImages() {
    PhotoGalleryImageCollection images = PhotoGalleryImages.GetPhotoGalleryImages();

    foreach(PhotoGalleryImage image in images) {
        ImageButton displayImage = new ImageButton();
        Panel panel = new Panel();
        panelPhotoContainer.Controls.Add(panel);
        displayImage.ImageUrl = "some URL";

        if(!_IsSettingPrimaryPhotoMode) {
            displayImage.OnClientClick = "showPopup(); return false;";
        }
        else {
            displayImage.Command += new CommandEventHandler(displayImage_Command);
            displayImage.CommandName = "ImageButton" + image.PhotoGalleryImageId.ToString();
            displayImage.CommandArgument = image.PhotoGalleryImageId.ToString();
        }

        panel.Controls.Add(displayImage);
    }
}

btnSetPrimaryPhoto_Click

protected void btnSetPrimaryPhoto_Click(object sender, EventArgs e) {
    // if I don't call this, duplicate controls will be added since they were added
    // from OnInit calling _LoadGalleryImages();
    panelPhotoContainer.Controls.Clear();
    _IsSettingPrimaryPhotoMode = true;
    // reload since _IsSettingPrimaryPhotoMode has now changed
    _LoadGalleryImages();
}

What am I doing wrong?

Try to add this code as well and see if it will correct your issue displayImage.Command -= new CommandEventHandler(displayImage_Command); — MethodMan
– MethodMan, Commented Feb 23, 2012 at 17:43
Why are you calling _LoadGalleryImages() in button click and another event? — O.O
– O.O, Commented Feb 23, 2012 at 18:42

Lukasz M · Accepted Answer · 2012-02-23 19:45:40Z

3

I suppose the issue can be caused by the fact you haven't set IDs of the dynamically created controls. It's quite important, as it's used in the process of firing the post back events. Value of the ID for each of the controls should be constant and not change between postbacks.

You can try to modify your _LoadGalleryImages() method like this:

private void _LoadGalleryImages() {
    PhotoGalleryImageCollection images = PhotoGalleryImages.GetPhotoGalleryImages();

    int imageCtrlCounter = 0;
    foreach(PhotoGalleryImage image in images) {
        ImageButton displayImage = new ImageButton() { ID = String.Format("myDisplayImage{0}", imageCtrlCounter) };
        Panel panel = new Panel();
        panelPhotoContainer.Controls.Add(panel);
        displayImage.ImageUrl = "some URL";

        if(!_IsSettingPrimaryPhotoMode) {
            displayImage.OnClientClick = "showPopup(); return false;";
        }
        else {
            displayImage.Command += new CommandEventHandler(displayImage_Command);
            displayImage.CommandName = "ImageButton" + image.PhotoGalleryImageId.ToString();
            displayImage.CommandArgument = image.PhotoGalleryImageId.ToString();
        }

        panel.Controls.Add(displayImage);
        imageCtrlCounter++;
    }
}

edited Feb 23, 2012 at 19:45

answered Feb 23, 2012 at 19:40

Lukasz M

5,7532 gold badges24 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

W. Young Over a year ago

Not setting the IDs was the problem.

W. Young Over a year ago

Well it was part of the problem but the solution by @swannee was the complete answer so I marked his the answer but clicked that yours was helpful.

Lukasz M Over a year ago

Oh, I see, I can't see any upvotes on my answer (however, there may be some delay). Anyway, it's good that you fixed it :).

swannee Over a year ago

@Lucas: I would have given you a bump but I've maxed mine for the day...will drop you one tomorrow.

Lukasz M Over a year ago

@swannee: Thanks, since the things you mentioned helped to solve the issue I've given you an upvote as well :).

swannee · Accepted Answer · 2012-02-23 20:37:44Z

3

It has to be something related to the initial event wireup because the problem only happens the first time. What's different about that time is that _LoadGalleryImages is called twice (once in the init and once in the button click event handler) so I think that something is not getting cleaned up there when you clear the container panel and call _LoadGalleryImages again in the button's click handler.

Why not try this alternative: Only call LoadImageGalleries once per page cycle (in the init).

Instead of clearing the controls and calling LoadGalleryImages again in the same postback (in the button click event), on the button click call a method that iterates through the image controls you already created when LoadGalleryImages was called and adjust them:

1) Remove the onclientclick (clear it out).

2) Attach the event.

edited Feb 23, 2012 at 20:37

answered Feb 23, 2012 at 18:43

swannee

3,4763 gold badges28 silver badges42 bronze badges

6 Comments

W. Young Over a year ago

I don't think this will work since the controls are added dynamically. I tried iterating through the page controls and they don't exist since they were added on if(!IsPostBack) { } in OnInit but they aren't there after the page button click. I think it's a necessity to always call _LoadGalleryImages in OnInit so the DOM and page state will be the same each time. The problem was I wasn't adding IDs to the controls.

swannee Over a year ago

Not sure you understood my response, I didnt' mean only call it once...I meant only call it once per page cycle (in the init). But as long as the fix worked....Great!

W. Young Over a year ago

I see what you mean now. See my solution in the answer.

W. Young Over a year ago

I didn't know I don't have enough reputation to answer my own question without waiting 8 hours. See my solution later.

swannee Over a year ago

To funny, ok, will wait to see the answer.

|

W. Young · Accepted Answer · 2012-02-24 01:41:00Z

@swannee
Actually, your method did work after I thought more about it. I do now call _LoadGalleryImages on every OnInit. I realize this is a lot of duplicate code that could be consolidated.

New _LoadGalleryImages

private void _LoadGalleryImages() {
    PhotoGalleryImageCollection images = PhotoGalleryImages.GetPhotoGalleryImages();

    foreach(PhotoGalleryImage image in images) {
        Panel panel = new Panel();
        panelPhotoContainer.Controls.Add(panel);

        ImageButton displayImage = new ImageButton();
        panel.Controls.Add(displayImage);
        displayImage.ID = string.Format("ImageButton{0}", image.PhotoGalleryImageId);
        displayImage.ImageUrl = "Some URL";
        displayImage.AlternateText = displayImage.ToolTip = image.ImageName;

        if(!_IsSettingPrimaryPhotoMode) {
            displayImage.OnClientClick = "showPopup(); return false;";
        }
        else {
            // handles the image button command wireup
            displayImage.Command += new CommandEventHandler(displayImage_Command);
            displayImage.CommandArgument = image.PhotoGalleryImageId.ToString();
        }
    }
}

I added a new method as you suggested to find the controls since they've already been created in OnInit and I just need to find them after the button click and clear the OnClientClick.

private void _LoadSelectPrimaryImages() {
    PhotoGalleryImageCollection images = PhotoGalleryImages.GetPhotoGalleryImages();

    foreach(PhotoGalleryImage image in images) {
        Control control = panelPhotoContainer.FindControl(string.Format("ImageButton{0}", image.PhotoGalleryImageId));

        if(control != null) {
            ImageButton displayImage = (ImageButton)control;
            displayImage.OnClientClick = "";
        }
    }
}

I also have a cancel button to return the image buttons to the way they were before to show the popup.

private void _ResetGalleryImages() {
    PhotoGalleryImageCollection images = PhotoGalleryImages.GetPhotoGalleryImages(_photoGalleryId, false, true);

    foreach(PhotoGalleryImage image in images) {
        Control control = panelPhotoContainer.FindControl(string.Format("ImageButton{0}", image.PhotoGalleryImageId));

        if(control != null) {
            ImageButton displayImage = (ImageButton)control;
            displayImage.ImageUrl = "Original URL";
            displayImage.OnClientClick = "showPopup(); return false;";
        }
    }
}

and two page button clicks

protected void btnSetPrimaryPhoto_Click(object sender, EventArgs e) {
    _IsSettingPrimaryPhotoMode = true;
    _LoadSelectPrimaryImages();
}

protected void btnCancelSetPrimaryPhoto_Click(object sender, EventArgs e) {
    _IsSettingPrimaryPhotoMode = false;
    _ResetGalleryImages();
}

Someone said in a response earlier...looks like the response was removed...to clear the controls in _LoadGalleryImages such as:

private void _LoadGalleryImages() {
    panelPhotoContainer.Controls.Clear();
    PhotoGalleryImageCollection images = PhotoGalleryImages.GetPhotoGalleryImages();

    foreach(PhotoGalleryImage image in images) {
        ImageButton displayImage = new ImageButton();
        Panel panel = new Panel();
        panelPhotoContainer.Controls.Add(panel);
        displayImage.ImageUrl = "some URL";

        if(!_IsSettingPrimaryPhotoMode) {
            displayImage.OnClientClick = "showPopup(); return false;";
        }
        else {
            displayImage.Command += new CommandEventHandler(displayImage_Command);
            displayImage.CommandName = "ImageButton" + image.PhotoGalleryImageId.ToString();
            displayImage.CommandArgument = image.PhotoGalleryImageId.ToString();
        }

        panel.Controls.Add(displayImage);
    }
}

which also works but I think that may be more inefficient than your method, @swannee. Thanks!

Collectives™ on Stack Overflow

Dynamically added ImageButton Command event not firing until second click

3 Answers 3

5 Comments

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related