Solved

Help with keeping viewstate between page postback for HTML table and getting cell contets from the table

Posted on 2007-03-30
6
314 Views
Last Modified: 2013-11-26
I am programming an asp.net 2.0 program in VB using Visual Studio 2005.  I have a table that rows are added client side using javascript.  My question is two parts:

1. how do I keep the state of the table (with added rows) the same after postbacks.  There is a ddl that allows the user to switch departments and populates a second ddl, but after the post back all data entered in the javascript table and added rows are wiped out.  I added "enableviewstate=true" to each INPUT box but this did not work.
2. how do I pull the data from the table cells that are created on the client side when the page is finally submitted.
 
0
Comment
Question by:flg8tor96
  • 3
  • 3
6 Comments
 
LVL 23

Expert Comment

by:Christopher Kile
ID: 18824370
These are INPUT controls or asp:Textbox controls?  because INPUT controls don't have ViewState.
0
 

Author Comment

by:flg8tor96
ID: 18824458
They are input controls.  How then would I solve this problem?  can Javascript insert rows client side in a table where each cell has an asp.net textbox?

This is a fairly simple form. That the user selects a department, then an account, then types items into the table.  Its unknown how many items they will be entering and using a dataview seems so cumbersome to hit edit then update on each row.

having the form postback on each row being added I guess would not be too bad, but isn't there some way to do this client side?
0
 
LVL 23

Accepted Solution

by:
Christopher Kile earned 500 total points
ID: 18824770
Concatenate all the input fields as (field 1 id, field 1 value);(field 2 id, field 2 value);... into one string, then assign this string to a hidden asp:TextBox with ViewState enabled.  While building the page after the PostBack, you'll easily be able to iterate through this string and extract field ids and values, which you can then assign to the appropriate fields.  It does require using consistent field identifiers from PostBack to Postback, but this shouldn't be a problem.
0
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 

Author Comment

by:flg8tor96
ID: 18918517
cpkilekofp,
Can you give an example of this?  How do I access the input fields on the server side?  Then I assume the javascript is reading the asp hidden textbox when the page loads so it repopulates and recreates the input fields?
0
 

Author Comment

by:flg8tor96
ID: 18921197
cpkilekofp: here is the solution I worked therough your idea

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<script runat="server">

Protected Sub btnSubmit_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        txtAmounts.Text = Page.Request.Form("Amount")
        txtItems.Text = Page.Request.Form("Description")
End Sub
</script>

<html>
<head>
<title>ffffff</title>
</head>
<script language="javascript">
var gRowId = 2;

function delRow(button)
{
var row = button.parentNode.parentNode;
var tbody = document.getElementById('table1').getElementsByTagName('tbody')[0];
tbody.removeChild(row);
UpdateTotal();
}

function addRow()
{
var tbody = document.getElementById('table1').getElementsByTagName('tbody')[0];

var refRow = document.getElementById('refRow1');

var row  = refRow.cloneNode(true);

var cell = row.getElementsByTagName('TD');
cell[0].innerHTML = gRowId;


// Update the Value

cell[1].childNodes[0].value = '';
cell[2].childNodes[0].value = '0';
cell[3].style.display = "block";

tbody.appendChild(row);
gRowId++;
UpdateTotal();
}
function UpdateTotal()
{
   var totalFld = document.frm.Total;
   var amts = document.getElementsByName('Amount');
   if (!amts) { return false; }
   var total = 0;
   for (ax=0; ax < amts.length; ax++)
   {
      total += parseFloat(amts[ax].value);
   }
   totalFld.value = total;
}


</script>

<body> <form name="frm" id="frm" runat=server>
<input type="hidden" name="txtItem" id="txtItem" value="Item1,Item2,,Item4,">
<input type="hidden" name="txtAmount" id="txtAmount" value="1,2,3,4,5">
    <asp:TextBox ID="txtAmounts" runat="server"></asp:TextBox>
    <asp:TextBox ID="txtItems" runat="server"></asp:TextBox>
<table id="table1" width = 520px cellpadding=0>
<tbody>
<tr>
<th style="width: 60px; display: none; ">ID</th><th style="width: 300px">Description</th><th style="width: 60px">Amount</th> <th style="width: 100px">Action</th>
</tr>
<tr id="refRow1">
<td style="width: 60px; display: none; ">1</td>
<td style="width: 300px"><input name="Description" type=text value="" style="width: 290px" ></td>
<td style="width: 60px"><input name="Amount" type=text value="0" style="width: 60px" onchange="UpdateTotal();"></td>
<td style="width: 100px; display: none; " ><input type="button" value="Delete" onClick="delRow(this);" /></td>

 </tr>
 </tbody>
</table>
<table id="table2" width = 520px cellpadding=0>
<tr>
<td style="width: 60px; display: none; "></td>
<td style="width: 300px">
<input type="button" value="Insert Row" style="width: 300px" onClick="addRow();">
</td>
<td style="width: 60px"><input name="Total" type=text value="" style="width: 60px" readonly></td>
<td style="width: 100px">
    <asp:Button ID="btnSubmit" runat="server" OnClick="btnSubmit_Click" Text="Submit" /></td>
</tr>
</table>

</form>
</body>
<script language="javascript">

function loadData() {
      var strItemList = frm.txtItems.value;
      var strQtyList = frm.txtAmounts.value;
     
      if (strItemList.length > 0) {
            var arrItem = strItemList.split(",");
            var arrQty = strQtyList.split(",");
           
            if (arrItem.length > 1) {
                var DescFld = document.frm.Description;
                var AmtFld = document.frm.Amount;
                DescFld.value = arrItem[0]
                AmtFld.value = arrQty[0]
               
                  for (idx=1; idx<arrItem.length; idx++) {
                        var tbody = document.getElementById('table1').getElementsByTagName('tbody')[0];
                        var refRow = document.getElementById('refRow1');
                        var row  = refRow.cloneNode(true);
                        var cell = row.getElementsByTagName('TD');
                        cell[0].innerHTML = gRowId;
                        // Update the Value
                        cell[1].childNodes[0].value = arrItem[idx];
                        cell[2].childNodes[0].value = arrQty[idx];
                        cell[3].style.display = "block";
                        tbody.appendChild(row);
                        gRowId++;}
           
            }            
            if (arrItem.length == 1) {
                    var DescFld = document.frm.Description;
                    var AmtFld = document.frm.Amount;
                    DescFld.value = arrItem[0]
                    AmtFld.value = arrQty[0]}
            }
    }



loadData();
UpdateTotal();


</script>
</html>
0
 
LVL 23

Expert Comment

by:Christopher Kile
ID: 18929252
I've been ill for the last two days, please pardon my lack of response...but I'm glad I was able to give you enough to proceed; in fact, your code reads like a text example, and it was a pleasure to read it :)
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

More often than not, we developers are confronted with a need: a need to make some kind of magic happen via code. Whether it is for a client, for the boss, or for our own personal projects, the need must be satisfied. Most of the time, the Framework…
Real-time is more about the business, not the technology. In day-to-day life, to make real-time decisions like buying or investing, business needs the latest information(e.g. Gold Rate/Stock Rate). Unlike traditional days, you need not wait for a fe…

831 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