[RESOLVED] Dynamic Textboxes [ASP.Net + C#]

[Greyskull]

Hello all,

Need your assistance on this, I've got a page that I'm creating textboxes dynamically x many whenever the user enters a value in a textbox

i.e
Item A was delivered and it came in 8 pallets, the user will press a button and will create 8 textboxes.

The textboxes created are placed on a panel. All of the dynamic creation works fine aside from the fact that I'm struggling to get the content of dynamically created textboxes, whenever the user presses the submit button.

I've approached several ways of this but none seems to be working:

Approach 1:

On submit, it calls a function called getTBValues

    void getTBValues()
    {
        int iCntr = 0;

        Int32.TryParse(txtPalletNo01.Text, out iCntr);

        for (int i = 0; i < iCntr; i++)
        {
            string strId = i.ToString("0000");

            TextBox tb = (TextBox)pnl01.FindControl(strId);  //pnl01 is the id of my panel

            string txt = tb.Text;
        }
    }

However the above code returns null! Not sure as to why hence the resulting query to get the text will result in an error

Approach 2:

Created a "hack" to add an onblur functionality to the dynamically created text box through the onclick button event.

//an extract only
protected override void  OnInit(EventArgs e)
    {
        _newTextBox = new TextBox[1000];

        for (int i = 0; i < 1000; i++)
        {
            _newTextBox[i] = new TextBox();
            _newTextBox[i].ID = "tb" + i.ToString("0000");
            _newTextBox[i].Width = 80;
        }

        InitializeComponent();
        base.OnInit(e);
    }

    private void InitializeComponent()
    {
        this.btnBlur01.Click += new EventHandler(btnBlur01_Click);
    }

    private void btnBlur01_Click(object sender, EventArgs e)
    {
        TextBox tbSender = (TextBox)sender;
        string strId = tbSender.ID;

        string strLblTotal = LabelTotal01.Text;

        if (strLblTotal.Length > 0)
            strLblTotal += "~" + strId + ":" + tbSender.Text;
        else
            strLblTotal = strId + ":" + tbSender.Text;

        LabelTotal01.Text = strLblTotal;
    }

    protected void btn01_Click(object sender, EventArgs e)
    {
        pnl01.Visible = true;
        lbl01.Visible = true;
        lbl01.Text = "Qty per pallet: ";

        string strIn = txtPalletNo01.Text;

        int iCntr = 0;

        Int32.TryParse(strIn, out iCntr);

        if (iCntr > 0)
        {
            try
            {
                for (int i = 0; i < iCntr; i++)
                {
                    string strEvntHandler = ClientScript.GetPostBackEventReference(this.btnBlur01, "");
                    _newTextBox[i].Attributes.Add("onblur", strEvntHandler);

                    pnl01.Controls.Add(_newTextBox[i]);
                    pnl01.Controls.Add(new LiteralControl("<br />"));
                }
            }
            catch { }
        }
    }

Again I was unsuccessful on this.



I'm now thinking of creating a prerender event attached to the textbox, for the onblur event and then somehow use a javascript to populate an asp label with the values for each of the dynamically created textbox. I can then also use this to validate user input?

Any ideas on how I should move forward or correct any functionality I have mentioned above.

Hope this all make sense.


Whatever input you have on this is trully appreciated.

Greyskull

[rjv_rnjn]

Controls added dynamically to the page do not retain their values as the controls that were added at design time. You may want to go through this article (http://www.4guysfromrolla.com/articles/092904-1.aspx); it explains in detail on what the problem is and how to tackle it.

[gep13]

Hey,

Just in case you didn't get the link, it has some extra characters at the end that result in a 404, this is the link:

http://www.4guysfromrolla.com/articles/092904-1.aspx

In most cases, if something "feels" like a hack, then 9 times out 10, it is, and there is normally always a more standard way of approaching it.

Gary

[Greyskull]

Thanks for the reply guys! Will try this once my mahcine has been rebuilt. Will post here once I've got it working or become stuck.

Thanks

[gep13]

Sounds like a plan

[Greyskull]

There's something I don't quite get in the article. That is, the dynamic controls must be added on initialise? Unless I'm looking at it in the wrong way, the controls wouldn't be so dynamic but instead make it look like to appear dynamically on the placeholder?

Did I get this ryt? Or mayb I need another zest of cafeine to make my brain rethink? :P

[gep13]

Hey,

I am not quite sure exactly what your question is?

Can you elaborate?

What you are referring to is essentially saying that controls have to be added during the initialization portion of the ASP.Net Page Life Cycle.

Gary

[Greyskull]

In the article it mentions :

If we need our dynamically added controls to maintain their view state it is paramount that these controls be added before the Load View State stage. That is, these controls must exist within the page's control hierarchy before the view state is loaded. There's only one stage before Load View State - Initialization. That means, if we want our dynamic controls to persist view state we must add them to the control hierarchy in the page's Init event.

My question is does that mean I need to pre-create the dynamic controls during the page init i.e. Array of Textboxes, labels,etc. and then just add these to the placeholder accordingly dependant on the user input.

So for my scenario I would say like create 1000 textboxes during init
and say if the user enters 100 the placeholder will then only display 100 of this?

Am I making sense? or talking gibber?

[gep13]

Hey,

I am still not sure I follow, what exactly are you referring to here:

if the user enters 100 the placeholder

Also, I think it would help if you fully describe exactly what you are trying to achieve, end to end.

Gary

[Greyskull]

Hello,

Sorry if it wasn't clear. The web app I'm trying to develop is for a delivery and warehouse application.

The dynamic items being added onto the page comes into play for logging the delivery of items for whom the application will be developed for. Each items delivered comes in x many number of palletes (they said max they've had so far is around 1000 palletes for a job) so in the web page they will have a row for item name, number of palletes and total qty as well as a '+' button.

When the '+' button is clicked i want it to generate x many number of textboxes dependent on the qty placed on the number of pallets. So say if an item, for the sake of this exmaple called it item_stock_a comes in 100 pallets and a total qty of 500,000.

Ideally each pallet should contian same amount but this isn't always the case so what the application do each time the '+' button is clicked it will split the qty equally and is upto the user to update the qtys per textbox.

I've design the app so that the user can enter 10 items at a time.

Once they have finished entering the values and press the submit button, I want to be able to read the values in the 'dynamic' textboxes that have been created.

So say:

item a, 10 pallets, 100,000 will require 10 dynamic textboxes for user input. Each textbox will hold an inital value of 10,000.

Hope it is all clearer now.

[gep13]

Hey,

Ok, so now things are starting to piece together.

One other question...

Your + button, are you expecting that to create TextBoxes straight away, or are you happy for the page to post back to the server, and then display the required number of textboxes?

Gary

[Greyskull]

yo,

Either really, depends which one would produce a better result? Any ideas?

Thanks,

[gep13]

Hey,

The "easiest" results would probably come from posting back to the server. At this point you can create the necessary controls that you need, then access them as described in the article that I linked to.

Gary

[Greyskull]

Cool will give that a try.

Thanks

[gep13]

Hey,

No probs. Let me know how you get on. I am sure I have some code lying around related to dynamic checkboxes that might be of some use, but would need to hunt for it.

Gary

[Greyskull]

Hey,

I managed to grab the values now from the "dynamically" added controls from the placeholder.

The way I'm doing this at the moment is to initially add the controls into the placeholder upon initialisation of the page, set the textbox controls visibility to false.

When the user then enters a value and triggers the '+' button it will then only show the required number of textboxes and they press submit I've got a logic which now pulls the values of the textboxes.

My only question is, can I control the height of the placeholder coz since I've initialised 1000 textboxes onto the placeholder and only some would be shown as some would be removed. The placeholder's height is maintained even when the textboxes have been removed.

The only thing that I can think of is the literal control "<br />"

Thanks

[gep13]

Hey,

I think I might not be following exactly what you are doing.

Is the code that is behind the + button executing on the client side or the server?

If it is on the server, then you should only need to initialize the amount of textboxes that you need, you shouldn't have to initialize them all.

Gary

[Greyskull]

The code is executing in the client side.

The way I understood it was to create the controls during the initalisation stage so that it will hold any values added to it by the user.

Coz if I add the controls onto the placeholder after the page has been initialised, i won't be able to get the values that the user has entered whereas if I added the textboxes during the initialisation stage and then just removing the unnecessary textboxes when the '+' button has been clicked I will be able to retrieve it.

So I'm not sure what you mean by just initialising the control once the user has entered the value? Coz i thought this needed to be done during the init stage?

Thanks

[gep13]

Hey,

Let me see if I can knock up a sample to show you what I mean.

Gary

[Greyskull]

thanks

I will also post my code once I have done some tweakings..

[mendhak]

Hey,

I managed to grab the values now from the "dynamically" added controls from the placeholder.

The way I'm doing this at the moment is to initially add the controls into the placeholder upon initialisation of the page, set the textbox controls visibility to false.

When the user then enters a value and triggers the '+' button it will then only show the required number of textboxes and they press submit I've got a logic which now pulls the values of the textboxes.

My only question is, can I control the height of the placeholder coz since I've initialised 1000 textboxes onto the placeholder and only some would be shown as some would be removed. The placeholder's height is maintained even when the textboxes have been removed.

The only thing that I can think of is the literal control "<br />"

Thanks

No, that's wrong. You don't need to pre-create anything, you may have read that paragraph wrong.

When the user clicks the button, you know that you have to create 8 textboxes. Do that, create them, add them to your panel. Now store that number somewhere, such as in a session variable or even a viewstate variable. In Page_Init, you look at the value of this session variable. If the variable has a value, in this case 8, you then know that you need to create 8 textboxes. The commonality between the two scenarios means that you should take the code that creates the textboxes and adds them to the panel and put it into its own method. You then call that method from the button click event and from the page_init event.

[Greyskull]

Thanks for all your help guys.

I've got it all working now. I had to create 4 override methods to solve this, OnLoad(), CreateChildControls(), SaveViewState() and LoadViewstate().

I can post the code at some stage later once I've got it all completed in the CodeMeBetter section or whatever if anyone is interested as I'm sure the current code I've got won't be in its simplest form.

To sum up what I've done :

1. I've created the controls in the ChildControls Method
2. I've called EnsureChildControls in the load view state
3. Forced calling the ViewState by wrapping and unwrapping view state in the pair object
4. Save layout of the dynamic controls on the page with the help of ViewState

Thanks again for all your input on this

[gep13]

Hey,

Glad to hear you got it working!!

Gary