Creating dynamic controls in Page_PreRender based on viewstate causes button OnClick event to not work

3
votes

I realize that dynamic controls should be created within Page_Load and Page_Init in order for them to be registered in the control tree.

I have created a custom control that requires the use of ViewState in a button OnClick event. This ViewState is then used to dynamically create controls.

Since the life-cycle will go: Page Load -> Button Click -> Page PreRender. The view-state will not be updated until "Button Click", thus I am creating my dynamic controls in Page PreRender. However, creating a button and programatically assigning the OnClick EventHandler in Page_PreRender does not work.

Does anyone know how I can get this to work?

btn_DeleteTableRow_Click will not fire. This is setup in CreatePartRows()

Here is my example:

<asp:UpdatePanel ID="up_RMAPart" runat="server" UpdateMode="Conditional" EnableViewState="true" ChildrenAsTriggers="true">
<ContentTemplate>
    <div class="button" style="width: 54px; margin: 0px; float: right;">
        <asp:Button ID="btn_AddPart" runat="server" Text="Add" OnClick="btn_AddPart_Click" />
    </div>
    <asp:Table ID="Table_Parts" runat="server" CssClass="hor-zebra">
    </asp:Table>
    <div class="clear"></div>
</ContentTemplate>
<Triggers>
    <asp:AsyncPostBackTrigger ControlID="btn_AddPart" EventName="Click" />
</Triggers>

Code Behind:

[Serializable]
public struct Part
{
    public string PartName;
    public int Quantity;
    public int PartID;

    public Part(string sPartName, int iQuantity, int iPartID)
    {
        PartName = sPartName;
        Quantity = iQuantity;
        PartID = iPartID;
    }
}

public partial class RMAPart : System.Web.UI.UserControl
{
    private Dictionary<string,Part> m_RMAParts;
    private int m_RowNumber = 0;

    public Dictionary<string, Part> RMAParts
    {
        get
        {
            if (ViewState["m_RMAParts"] != null)
                return (Dictionary<string, Part>)ViewState["m_RMAParts"];
            else
                return null;
        }
        set
        {
            ViewState["m_RMAParts"] = value;
        }
    }

    public int RowNumber
    {
        get
        {
            if (ViewState["m_RowNumber"] != null)
                return Convert.ToInt32(ViewState["m_RowNumber"]);
            else
                return 0;
        }
        set
        {
            ViewState["m_RowNumber"] = value;
        }
    }

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            RMAParts = new Dictionary<string, Part>();
            RowNumber = 0;
            RMAParts.Add("PartRow_" + RowNumber.ToString(), new Part());
            RowNumber = 1;
            CreatePartRows();
        }
    }



    protected void Page_PreRender(object sender, EventArgs e)
    {
        CreatePartRows();
    }

    private void CreatePartRows()
    {
        Table_Parts.Controls.Clear();

        TableHeaderRow thr = new TableHeaderRow();

        TableHeaderCell thc1 = new TableHeaderCell();
        thc1.Controls.Add(new LiteralControl("Part"));
        thr.Cells.Add(thc1);

        TableHeaderCell thc2 = new TableHeaderCell();
        thc2.Controls.Add(new LiteralControl("Quantity"));
        thr.Cells.Add(thc2);

        TableHeaderCell thc3 = new TableHeaderCell();
        thc3.Controls.Add(new LiteralControl(""));
        thr.Cells.Add(thc3);

        Table_Parts.Rows.Add(thr);

        foreach (KeyValuePair<string, Part> kvp in RMAParts)
        {
            string[] sKey = kvp.Key.Split('_');

            TableRow tr = new TableRow();
            tr.ID = kvp.Key;

            TableCell tc1 = new TableCell();
            TextBox tb_Part = new TextBox();
            tb_Part.ID = "tb_Part_" + sKey[1];
            tb_Part.CssClass = "textbox1";
            tc1.Controls.Add(tb_Part);
            tr.Cells.Add(tc1);

            TableCell tc2 = new TableCell();
            TextBox tb_Quantity = new TextBox();
            tb_Quantity.ID = "tb_Quanitty_" + sKey[1];
            tb_Quantity.CssClass = "textbox1";
            tc2.Controls.Add(tb_Quantity);
            tr.Cells.Add(tc2);

            TableCell tc3 = new TableCell();
            Button btn_Delete = new Button();
            btn_Delete.ID = "btn_Delete_" + sKey[1];
            btn_Delete.CommandArgument = tr.ID;
            btn_Delete.Click += new EventHandler(btn_DeleteTableRow_Click);                
            btn_Delete.Text = "Remove";
            tc3.Controls.Add(btn_Delete);
            tr.Cells.Add(tc3);

            Table_Parts.Rows.Add(tr);               
        }

    }

    public void Reset()
    {
        Table_Parts.Controls.Clear();
        RMAParts.Clear();
        RowNumber = 0;
        RMAParts.Add("PartRow_" + RowNumber.ToString(), new Part());
        RowNumber = 1;
        CreatePartRows();
    }

    protected void btn_AddPart_Click(object sender, EventArgs e)
    {
        RMAParts.Add("PartRow_" + RowNumber.ToString(), new Part());
        RowNumber++;
    }

    protected void btn_DeleteTableRow_Click(object sender, EventArgs e)
    {
        Button btn = (Button)sender;
        TableRow tr = (TableRow)Table_Parts.FindControl(btn.CommandArgument);
        Table_Parts.Rows.Remove(tr);
        RMAParts.Remove(btn.CommandArgument);
    }        
}
4
asp.net
Are you trying to make a table of data with a delete button for each of them? Why not use a GridView? - Garrison Neely
I am trying to have a dynamically created "delete" button per row, yes. I guess that is what I might have to do.. I can code something similar in a gridview and see if it works... It is a shame I can not get this to work. - Mausimo
I'd just switch to GridView--you'll find much more support for a standard MSFT control than something you put together, no matter how good your implementation is. And you won't have to write nearly as much code. - Garrison Neely
I am going to code out a grid-view version. But i would still like to see if anyone can solve this question. - Mausimo

4 Answers

3
votes

To ensure that the values of input fields persist across postbacks and that server events are raised:

  • Use view state to keep track of dynamically created controls.
  • Re-create the controls with the same IDs in LoadViewState (not Load or PreRender, because then the values of input fields will be lost).

The rest of this answer details how I modified your code to get it to work.

RMAPart.ascx

Just for convenience, you can declare the header row in the .ascx:

<asp:Table ID="Table_Parts" runat="server" CssClass="hor-zebra">
    <asp:TableRow>
        <asp:TableHeaderCell Text="Part" />
        <asp:TableHeaderCell Text="Quantity" />
        <asp:TableHeaderCell />
    </asp:TableRow>
</asp:Table>

RMAPart.ascx.cs

To keep track of dynamically created rows, maintain a list of row IDs in view state:

public partial class RMAPart : System.Web.UI.UserControl
{
    private List<string> RowIDs
    {
        get { return (List<string>)ViewState["m_RowIDs"]; }
        set { ViewState["m_RowIDs"] = value; }
    }

In the btn_AddPart_Click handler, generate a new row ID and create the controls for the new row:

    protected void btn_AddPart_Click(object sender, EventArgs e)
    {
        string id = GenerateRowID();
        RowIDs.Add(id);
        CreatePartRow(id);
    }

    private string GenerateRowID()
    {
        int id = (int)ViewState["m_NextRowID"];
        ViewState["m_NextRowID"] = id + 1;
        return id.ToString();
    }

    private void CreatePartRow(string id)
    {
        TableRow tr = new TableRow();
        tr.ID = id;

        TableCell tc1 = new TableCell();
        TextBox tb_Part = new TextBox();
        tb_Part.ID = "tb_Part_" + id;
        tb_Part.CssClass = "textbox1";
        tc1.Controls.Add(tb_Part);
        tr.Cells.Add(tc1);

        TableCell tc2 = new TableCell();
        TextBox tb_Quantity = new TextBox();
        tb_Quantity.ID = "tb_Quantity_" + id;
        tb_Quantity.CssClass = "textbox1";
        tc2.Controls.Add(tb_Quantity);
        tr.Cells.Add(tc2);

        TableCell tc3 = new TableCell();
        Button btn_Delete = new Button();
        btn_Delete.ID = "btn_Delete_" + id;
        btn_Delete.CommandArgument = id;
        btn_Delete.Click += btn_DeleteTableRow_Click;
        btn_Delete.Text = "Remove";
        tc3.Controls.Add(btn_Delete);
        tr.Cells.Add(tc3);

        Table_Parts.Rows.Add(tr);
    }

In the btn_DeleteTableRow_Click handler, delete the clicked row and update view state:

    protected void btn_DeleteTableRow_Click(object sender, EventArgs e)
    {
        Button btn = (Button)sender;
        TableRow tr = (TableRow)Table_Parts.FindControl(btn.CommandArgument);
        Table_Parts.Rows.Remove(tr);
        RowIDs.Remove(btn.CommandArgument);
    }

Hook Page_Load and start things off by creating the first row:

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            Reset();
        }
    }

    public void Reset()
    {
        while (Table_Parts.Rows.Count > 1)
            Table_Parts.Rows.RemoveAt(Table_Parts.Rows.Count - 1);

        ViewState["m_NextRowID"] = 0;
        string id = GenerateRowID();
        RowIDs = new List<string> { id };
        CreatePartRow(id);
    }

Override LoadViewState and re-create the rows using the IDs stored in view state:

    protected override void LoadViewState(object savedState)
    {
        base.LoadViewState(savedState);

        foreach (string id in RowIDs)
        {
            CreatePartRow(id);
        }
    }
}

Dealing with Parts

The code above doesn't use your Part structure at all. To actually move data between your business objects and the user control, you can add a public method that takes a Part collection and uses it to create rows and populate text boxes, and then add another public method that reads out the values of the text boxes into a Part collection.

1
votes

The button click isn't being fired because control events are called right after the Load event. Your button isn't in the control hierarchy at the time that the asp.net lifecycle is trying to call your event, so it's being dropped. Remember, it's a round-trip and the control has to exist on postback before the LoadComplete event fires for its event handlers to get called.

Create your dynamic controls in the PreLoad or Load event and you should be OK (you will have access to the full viewstate at that time to make any decisions regarding whether or not you need to dynamically create your delete button for that row).

ASP.net Page Lifecycle Docs: http://msdn.microsoft.com/en-us/library/ms178472(v=vs.100).aspx

0
votes

I think that Robert has the right answer, but needs to be more clear about WHICH Page.Load he is talking about. There are three page requests here.

  1. Initial Page request, no initial button click yet.
  2. Postback on button click. No processing in Page Load. PreRender call creates the new table rows and the new button and links up the button click event to the new button.
  3. Postback after the client clicks on the new button. You need to re-create the dynamic button in Page Load so that the Click event of the dynamic button doesn't get dropped.
0
votes

Agree with Robert and Bill.

But to add here, in my opinion only way that you would achieve this is by creating a custom control/web server control (inheriting WebControl class), where you override the CreateChildControls method and RenderContents methods. I think this is what you mean when you said, in one of your comments, you are going to code out a grid-view version.