?
Solved

access / recreate dynamic controls

Posted on 2009-05-19
4
Medium Priority
?
402 Views
Last Modified: 2012-05-07
Hello,

This is ASP.NET 2.0 webform.
I have a table that will have textboxes for user to input ranges.   i.e 1000 - 2000
At 1st there will just be 2 textboxes, txtRangeStart_1 & txtRangeEnd_1, and a button to add more ranges.
when btnAddRange is clicked I am dynamically adding a new table row with another set of textboxes, txtRangeStart_2 & txtRangeEnd_2.  They can add as many ranges as they want and i don't want to postback until they click the postback (submit) button.  
I'm dummying down my full page for clarity sake.

So once btnPostBack is clicked I don't know ow to access the controls.
From what i have been reading I need to recreate the controls on the server.
But i can;t find a good example that actually does it.
I was hoping someone could complete my sample page for me so I can see exactly what I need to do.

My actual page will be much more complex then this.
There will be a grid and then details section.  User will select a grid row and i need to populate the details section based of the selected row.  We are trying to eliminate postback when we can and I am invisioning maybe using an ajax callback or javascript on the client to fill in the details section based on seleced grid row. So there is a chance i my also need to clear and add my dynamic range textboxes in the code behind file.

But for now i need to understand how to just make this part work.
Also wondering if my aproach seems ok.
Should be using a repeater or user control instead?

Thanks!






<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table id="tblRanges" runat="Server" border = "1" style="text-align: center" width="100%">
            <tr>
                <td><asp:Label ID="lblRange" runat="server" Text="Range:  "></asp:Label></td>
                <td style="width: 60%; text-align: left;"><asp:TextBox ID="txtRangeStart_1" runat="server" Width="80px"></asp:TextBox> - 
                    <asp:TextBox ID="txtRangeEnd_1" runat="server" Width="80px"></asp:TextBox>&nbsp;<asp:Button ID="btnAddRange" runat="server" Text="Add more" onclientclick="addRow()" /></td>
            </tr>
        </table>
        <asp:Button ID="btnPostBack" runat="server" Text="PostBack" />
    </div>
    </form>
    <script type="text/javascript">
    function addRow()
    {
        // Get reference to tblRanges table
        var myTable=document.getElementById('tblRanges');
        var tBody = myTable.getElementsByTagName('tbody')[0];
        var index = myTable.rows.length + 1;  
        
        var newTR = document.createElement('TR');
        newTR.id = "trMednoRange_" + index.toString();
        newTD=document.createElement('TD');
        newTD.innerHTML='&nbsp';
        newTR.appendChild(newTD);
     
        newTD=document.createElement('TD');
        newTD.style.textAlign = "left";
        newTD.innerHTML='<input name="txtRangeStart_' + index.toString() + '" type="text" id="txtRangeStart_' + index.toString() + '" style="width:80px;" /> - <input name="txtRangeEnd_' + index.toString() + '" type="text" id="txtRangeEnd_' + index.toString() + '" style="width:80px;" />';
        newTR.appendChild(newTD);
        
 
        tBody.appendChild(newTR);
        
        //alert(myTable.innerHTML);
    }
    </script>
 
 
</body>
</html>
 
 
__________________________________________________
 
 
 
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
 
public partial class Default2 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        btnAddRange.Attributes.Add("onClick", "return false;");
    }
}

Open in new window

0
Comment
Question by:krazykoder
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
4 Comments
 
LVL 2

Accepted Solution

by:
j4m35bond earned 2000 total points
ID: 24430156
Hi,
You need to recreate all textbox eveyr postback. Following codes might give you a tips on hwo to do this with own defined viewstate.
front end code:
                    <asp:Button ID="Button1" runat="server" Text="Add Text Box" OnClick="Button1_Click" />&nbsp;
                    <br />
                    <br />
                    <asp:PlaceHolder ID="ph1" runat="server" EnableViewState=true ></asp:PlaceHolder><br /><br />


code behind:


    protected int NumberOfControls
    {
        get {
            if (ViewState["NumControls"] == null) {

                return 0;
            }
            else
                return (int)ViewState["NumControls"];
        }
        set { ViewState["NumControls"] = value; }
    }


    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            TextBox txt = new TextBox();
           
            this.NumberOfControls = 1;
            txt.ID = "tb" + this.NumberOfControls;
            txt.Text = this.NumberOfControls.ToString();
            ph1.Controls.Add(txt);
        }
        else
        {
            TextBox txt;

            for (int i = 1; i <= this.NumberOfControls; i++)
            {
                txt = new TextBox();
                txt.ID = "tb" + i.ToString();
                ph1.Controls.Add(txt);
            }
        }        
    }


    protected void Button1_Click(object sender, EventArgs e)
    {
        this.NumberOfControls++;

        TextBox txt = new TextBox();
        ph1.Controls.Add(txt);

        txt.ID = "tb" + this.NumberOfControls.ToString();
        txt.Text = this.NumberOfControls.ToString();
       
        //Response.Write(lsb1.Items.Count);
    }
0
 

Author Comment

by:krazykoder
ID: 24432434
Hi j4m35bond,

Thanks, that helps allot.
Was comming up with something simialr this morning.
Just 1 question, my button to add more controls is client side and not in the code behind.
Would I need a hidden field on my form to store the NumberOfControls until i can put it in viewstate on the server?
0
 
LVL 2

Expert Comment

by:j4m35bond
ID: 24437755
Hi there,
Yes you can do that but that will be more coding in javascript and not code behind.
What you need to do is the keep the NumberOfControls in hidden form field, and dynamic create textbox in javascript. remember the id of textbox follow some patterns: txt1 txt2 txt3 , etc
on post back, in code behind you can use request.form to get the hidden NumberOfControls  and iterate through and use request.form to get the textbox.
0
 

Author Comment

by:krazykoder
ID: 24442515
Great, thats what i did, all is working well :)

Thanks Much!
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In this Article, I will provide a few tips in problem and solution manner. Opening an ASPX page in Visual studio 2003 is very slow. To make it fast, please do follow below steps:   Open the Solution/Project. Right click the ASPX file to b…
It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
In this video we outline the Physical Segments view of NetCrunch network monitor. By following this brief how-to video, you will be able to learn how NetCrunch visualizes your network, how granular is the information collected, as well as where to f…
How to fix incompatible JVM issue while installing Eclipse While installing Eclipse in windows, got one error like above and unable to proceed with the installation. This video describes how to successfully install Eclipse. How to solve incompa…
Suggested Courses
Course of the Month12 days, 20 hours left to enroll

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question