Solved

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

Posted on 2007-03-30
6
306 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
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 

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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Just a quick little trick I learned recently.  Now that I'm using jQuery with abandon in my asp.net applications, I have grown tired of the following syntax:      (CODE) I suppose it just offends my sense of decency to put inline VBScript on a…
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…
Excel styles will make formatting consistent and let you apply and change formatting faster. In this tutorial, you'll learn how to use Excel's built-in styles, how to modify styles, and how to create your own. You'll also learn how to use your custo…
Access reports are powerful and flexible. Learn how to create a query and then a grouped report using the wizard. Modify the report design after the wizard is done to make it look better. There will be another video to explain how to put the final p…

758 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

21 Experts available now in Live!

Get 1:1 Help Now