Solved

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

Posted on 2007-03-30
6
312 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

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 

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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

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…
A long time ago (May 2011), I have written an article showing you how to create a DLL using Visual Studio 2005 to be hosted in SQL Server 2005. That was valid at that time and it is still valid if you are still using these versions. You can still re…
Email security requires an ever evolving service that stays up to date with counter-evolving threats. The Email Laundry perform Research and Development to ensure their email security service evolves faster than cyber criminals. We apply our Threat…

821 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