Button handler event not firing with dynamically created buttons

Question

I'm dynamically creating buttons based on database values, this is the code that is generating the buttons.

test.GetSubjects();
        int subjectid = 0;

        // Current row count.
        int rowCtr;// = 0;
        // Total number of cells per row (columns).
        int cellCtr;
        // Current cell counter.
        int cellCnt;

        //count number of rows in dataset
        int rN = test.dsSubjects.Tables[0].Rows.Count;

        cellCnt = 4;


        for (rowCtr = 1; rowCtr <= rN; rowCtr++)
        {
            // Create a new row and add it to the table.
            TableRow tRow = new TableRow();
            Table1.Rows.Add(tRow);

            for (cellCtr = 1; cellCtr <= 4; cellCtr++)
            {
                //
                Button button = new Button();
                //
                HyperLink link = new HyperLink();
                // Create a new cell and add it to the row.
                TableCell tCell = new TableCell();

                button.Click += ButtonClick;
                /* If the rowcounter is equal to the record numbers
                 * then it has to break because if not it will throw an error
                 * saying that there is no row at ending position */

                if (rowCtr == rN)
                    break;

                string myStr = test.dsSubjects.Tables[0].Rows[rowCtr - 1]["SubjectName"].ToString();
                int myID = Convert.ToInt32(test.dsSubjects.Tables[0].Rows[rowCtr - 1]["SubjectID"].ToString());

                button.ID = Convert.ToString(myID);
                button.Text = myStr;
                //button.PostBackUrl = "~/WebForm2.aspx?SubjectID=" + myID;
                button.CssClass = "DynamicButtonOverlay";
                button.OnClientClick = " return ShowModalPopup()";
                tCell.Controls.Add(button);

                tCell.CssClass = "DynamicButtonOverlay";
                tRow.Cells.Add(tCell);
                rowCtr++;
                /* If the cellcount is 3 then it needs to break, if not then 
                 * you'll miss every 4rth record, don't know why. But this works */

                if (cellCtr == 4)
                {
                    rowCtr = rowCtr - 1;
                    break;
                }
            }

        } 

This code works fine. As you can see in the code that its supposed to have the buttons called a handlerevent, but the handler never ever gets called. Now when the buttons are created and when one gets clicked, it is calling a javascript function to show the ajaxmodalpopup, this is the javascript code

<script type="text/javascript">
    function ShowModalPopup() {
        $find("mpe").show();
        return false;
    }
    function HideModalPopup() {
        $find("mpe").hide();
        return false;
    }

the event handler that I made is this..

private void ButtonClick(object sender, EventArgs e)
    {
        Button button = (Button)sender;
        Label1.Text = "howdy";
    }

this handler is for testing that's why I have it looking the way it does.

I have set a breakpoint at the handler, but when I click a button its not calling the handler at all and I don't know why. I need any of these buttons to run the event because when the modalpopup gets called, i'll be passing the buttons id (which is the id from the database) to the modalpopup which will have a form for editing the subject(button) database values and then updating the database, then after the update, I will be having the modalpopup redirect to postback the page to refresh.

So two issues are: the buttons not calling the handler and if I can get it working, then I need to get the id of the button that was called so I can populate the fields in the modalpopup.

This generating of the buttons is done on the pageload event.

Answer 1

Depending on when you are adding the controls, you will have to re-create the control on every postback either on the Page Init or OnLoad.

Here is one of the best explanation .

Answer 2

I found out what was causing the issue, it was the JavaScript function.

<script type="text/javascript">
function ShowModalPopup() {
    $find("mpe").show();
    return false;
}
function HideModalPopup() {
    $find("mpe").hide();
    return false;
}

For some reason, unknown to me, it wasn't allowing the eventhandler to be called. Once I removed the JavaScript, the buttons were able to call the eventhandler. Maybe it had to do with having the button calling the JavaScript function on the OnclientClick and having the buttons also calling an eventhandler. I don't know. But it works now.