create dynamic controls from server and client to access from server

Question

I'm building asp.net web app using C# - .net framework 1.1. I'm trying to build a table that contains text boxes and should be built from the server and from the client both, and the server should access the data inside the text boxes.

couldn't upload image, so the structure is basically:

<table>
<row> <Cell></Cell> <Cell>add-image</Cell> <Cell></Cell>
<row> <Cell>label</Cell> <Cell>TextBox</Cell> <Cell>delete Image</Cell> </row>
<row> <Cell>label</Cell> <Cell>TextBox</Cell> <Cell>delete Image</Cell> </row>
</table>
<button> submit </button>

the table first created from the server:

  private void addIntervalToTable(TimeInterval WorkingPeriod )
    {
        const string MY_NAME = "CalendarWebApp::addIntervalToTable";

        try
        {
            //extract day from WorkingPeriod
            string dayOfWeek= WorkingPeriod.Start.DayOfWeek.ToString ();

            //extract 'From' and 'To' dates
            string startTime=WorkingPeriod.Start.ToString(@"HH\:mm");
            string finishTime=WorkingPeriod.Finish.ToString(@"HH\:mm");

            //create new table row
            TableRow row=new TableRow();

            //create first cell of the row- containing the day 
            TableCell cell=new TableCell();
            //set css class name
            cell.CssClass="dayLabels";
            //set text to be the day
            cell.Controls.Add(new LiteralControl( dayOfWeek));

            //create TextBox containing the "From (date) To (date)" string
            TextBox TB1=new TextBox();


            //set css class name
            TB1.CssClass="TimeSlot";
            //set the string
            TB1.Text=string.Format("From: {0,-20} To: {1}",startTime,finishTime);

            //create second cell of the row- containing the textBox with the dates
            TableCell cell2=new TableCell();
            cell2.Controls.Add(TB1);

            //create the ImageButton control that deletes the row
            ImageButton removeBtn=new ImageButton();
            //set the image
            removeBtn.ImageUrl="images/Remove-icon.png";
            //set the function that invoked when clicking
            removeBtn.Attributes.Add("onClick","javascript:deleteRow(this)");

            //create the third cell of the row- containing the delete button
            TableCell cell3=new TableCell();
            cell3.Controls.Add(removeBtn);

            //create the ImageButton control that edits the row
            ImageButton editBtn=new ImageButton();
            editBtn.ImageUrl="images/edit-icon.png";

            //create the fourth cell of the row- containing the edit button
            TableCell cell4=new TableCell();
            cell4.Controls.Add(editBtn);

            //add all four cells to the new row
            row.Cells.Add(cell);
            row.Cells.Add(cell2);
            row.Cells.Add(cell3);
            row.Cells.Add(cell4);

            //add row to the table
            TimeIntervalsTable.Rows.Add(row);

            TimeIntervalsTable.EnableViewState=true;
            ViewState["TimeIntervalsTable"]=true;
        }

then, when the user clicks the "+" sign he can add new row through the client:

function createNewSlot(e,MyArgs)
        {
        //add to existing table created on server
        var day=MyArgs[0];
        var table=document.getElementById("TimeIntervalsTable");
        var rowCount=table.rows.length;
        var row=table.insertRow(rowCount);
        //row.insertCell(0).innerHTML=day;
        //var newCell=row.insertCell(0).innerHTML='<class="dayLabels">';
        var newCell=row.insertCell(0);
        newCell.className="dayLabels";
        newCell.innerHTML=day;

        //document.getElementById("TimeIntervalsTable").rows[rowCount].cells[0].Text=day;
        var timeString="From: "+MyArgs[1].toString().concat(MyArgs[2].toString())+"                 To: "+ MyArgs[3].toString().concat(MyArgs[4].toString());
        row.insertCell(1).innerHTML='<input type="text" class="TimeSlot"  runat="server" >'
        document.getElementById("TimeIntervalsTable").rows[rowCount].cells[1].firstChild.value=timeString;
        row.insertCell(2).innerHTML='<input type="Image" src="images/Remove-icon.png" onClick="deleteRow(this)" >';
        row.insertCell(3).innerHTML='<input type="Image" src="images/edit-icon.png" >';
        e.preventDefault ? e.preventDefault() : e.returnValue = false;

    }

after clicking "submit" I want to access the data in all the text Boxes.

I know that there is a lot of data about that issue, but couldn't find what I need. thanks.

Answer 1

You'd better replace the javascript by server side code. E.g. create server side code behind the button to add the server side controls. This way you can retrieve those new control values on the next postback. Client side created controls will never make it server side.

Answer 2

The controls on the server-side serve the task of generating the html and displaying it. Of course you can retrieve values from those controls, but since your controls are displayed when the page is loaded, you can generate html with javascript and on server-side you only need to handle the logic. So, the solution for your problem is as follows:

1. Implement the code on server-side which generates your controls and display them (probably done)

2. Implement an API on the server which handles your events (like an add command for your + sign)

3. Implement a prototype for the client-side which sends the command to the server through AJAX and handles the server response (like generating the html when a new item is added)

4. Create event handlers on client-side which call the needed command of your prototype on client action