Solved

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

Posted on 2007-03-30
6
307 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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

A quick way to get a menu to work on our website, is using the Menu control and assign it to a web.sitemap using SiteMapDataSource. Example of web.sitemap file: (CODE) Sample code to add to the page menu: (CODE) Running the application, we wi…
Many of us here at EE write code. Many of us write exceptional code; just as many of us write exception-prone code. As we all should know, exceptions are a mechanism for handling errors which are typically out of our control. From database errors, t…
Along with being a a promotional video for my three-day Annielytics Dashboard Seminor, this Micro Tutorial is an intro to Google Analytics API data.
Edureka is one of the fastest growing and most effective online learning sites.  We are here to help you succeed.

911 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now