Solved

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

Posted on 2007-03-30
6
315 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
[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
  • 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
Webinar: Aligning, Automating, Winning

Join Dan Russo, Senior Manager of Operations Intelligence, for an in-depth discussion on how Dealertrack, leading provider of integrated digital solutions for the automotive industry, transformed their DevOps processes to increase collaboration and move with greater velocity.

 

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

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

For those of you who don't follow the news, or just happen to live under rocks, Microsoft Research released a beta SDK (http://www.microsoft.com/en-us/download/details.aspx?id=27876) for the Xbox 360 Kinect. If you don't know what a Kinect is (http:…
This article shows how to deploy dynamic backgrounds to computers depending on the aspect ratio of display
Finds all prime numbers in a range requested and places them in a public primes() array. I've demostrated a template size of 30 (2 * 3 * 5) but larger templates can be built such 210  (2 * 3 * 5 * 7) or 2310  (2 * 3 * 5 * 7 * 11). The larger templa…
How to Install VMware Tools in Red Hat Enterprise Linux 6.4 (RHEL 6.4) Step-by-Step Tutorial

749 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