asp:table losing Data on postback

Question

I am using asp:table in my project.I am adding the rows dynamically in the table.

The very first header row is inserted in the page load event.

The Header row has some checkboxes. When any checkbox is checked, a new row is inserted in the checkedChange() event.

This new row has a dynamically created textbox in which I am taking some input from the user.

After inputs given, the user has to click the Add Data button which inserts the data in database.

The row which was created in the OnCheckedChanged event gets deleted when any of the postback occurs.

I tried EnableViewState but it's still not working.

How can I resolve this?

Here is my aspx code:

<asp:Table ID="tbl_fundtype" runat="server" CssClass="table-bordered tblfund" style="width:50%; white-space:nowrap;" EnableViewState="true">
                        </asp:Table>

Here is the .cs Code for CheckedChangedEvent:

public void Chk_Fund_CheckedChange(object sender, EventArgs e)
    {
        TableRow tr = new TableRow();
        for (int i = 0; i < tbl_fundtype.Rows[0].Cells.Count; i++)
        {
            string DynamicChkID = "fund_" + dt_fundtype.Rows[i]["fund_type_cd"].ToString();
            CheckBox chk = new CheckBox();
            chk = (CheckBox)tbl_fundtype.Rows[0].Cells[i].FindControl(DynamicChkID);
            TableCell td = new TableCell();
            if (chk.Checked == true)
            {
                TextBox txt = new TextBox();
                txt.ID = "txt_" + dt_fundtype.Rows[i]["fund_type_cd"].ToString();
                txt.Attributes.Add("Placeholder","Enter Share Percent...");
                td.Controls.Add(txt);
            }
            else
            {
                td.Text = "     ";
            }
            tr.Cells.Add(td);
        }
        tbl_fundtype.Rows.Add(tr);
        hfTab.Value = "fund";
        collapsestate = "expand";
    }

Here I am trying to get the values from the Created Rows in checked changed event on button click.

public bool ValidateAddNominee()
    {
        if (txt_nomineename.Text == "")
        {
            lbl_nomineeErr.Text = "Please Enter Nominee Name";
            return false;
        }
        else if (txt_nomineecnic.Text == "")
        {
            lbl_nomineeErr.Text = "Please Enter Nominee CNIC";
            return false;
        }
        //Count if any of the nominee is selected
        int countShares = 0;
        for (int i = 0; i < tbl_fundtype.Rows[0].Cells.Count; i++)
        {
            string DynamicChkID = "fund_" + dt_fundtype.Rows[i]["fund_type_cd"].ToString();
            CheckBox chk = new CheckBox();
            chk = (CheckBox)tbl_fundtype.Rows[0].Cells[i].FindControl(DynamicChkID);
            if (chk.Checked == true)
            {
                countShares++;
                TextBox txt = new TextBox();
                string DynamicTxtID = "txt_" + dt_fundtype.Rows[i]["fund_type_cd"].ToString();
                int chek = tbl_fundtype.Rows.Count;
                txt = (TextBox)tbl_fundtype.Rows[1].Cells[i].FindControl(DynamicTxtID);
                if (txt.Text=="")
                {
                    lbl_nomineeErr.Text = "Please Enter Share Percent for "+ dt_fundtype.Rows[i]["fund_type"].ToString();
                    return false;
                }
            }           
        }
        if (countShares == 0)
        {
            lbl_nomineeErr.Text = "Please Select any Fund Type";
            return false;
        }
        else if (!file_nominee.HasFile)
        {
            lbl_nomineeErr.Text = "Please attach Nominee CNIC";
            return false;
        }
        else
        {
            return true;
        }




    }

Here is the Header row is inserted in Page load event :

TableRow thead = new TableRow();
        for (int i = 0; i < dt_fundtype.Rows.Count; i++)
        {
            TableCell td = new TableCell();
            CheckBox chk = new CheckBox();
            chk.ID = "fund_" + dt_fundtype.Rows[i]["fund_type_cd"];
            chk.Text = dt_fundtype.Rows[i]["fund_type"].ToString();
            chk.AutoPostBack = true;
            chk.CheckedChanged += new EventHandler(Chk_Fund_CheckedChange);
            td.Controls.Add(chk);
            thead.Cells.Add(td);
        }
        tbl_fundtype.Rows.Add(thead);

It's Showing me the Row count is 1 but it should be two, Number one the Header Row and the other should be the row which is created in checked changed event.

Answer 1

try saving the table to the session then loading it during a postback, it worked for me :)

protected void Page_Init(object sender, EventArgs e)
        {
                if (!IsPostBack)
                {
                    Session["tbl_fundtype"] = tbl_fundtype;
                }
                tbl_fundtype = (Table)Session["tbl_fundtype"];
        }

Answer 2

For web method below is the Javascript code

<script type="text/javascript">
    //function to convert HTML table to jagged array//
    var HTMLtbl =
        {
            getData: function (table) {
                var data = [];
                table.find('tr').not(':first').each(function (rowIndex, r) {
                    var cols = [];
                    $(this).find('td').each(function (colIndex, c) {

                        if ($(this).children(':text,:hidden,textarea,select').length > 0)    //text//hidden//textarea//select
                            cols.push($(this).children('input,textarea,select').val());

                            // if dropdown text is needed then uncomment it and remove SELECT from above IF condition// 
                            // else if ($(this).children('select').length > 0)
                            // cols.push($(this).find('option:selected').text());

                        else if ($(this).children(':checkbox').length > 0)                    // checkbox
                            cols.push($(this).children(':checkbox').is(':checked') ? 1 : 0);  //or true false
                        else if ($(this).children(':input').length > 0)
                            cols.push($(this).children(':input').val());
                        else
                            cols.push($(this).text().trim());                                // get td Value
                    });
                    data.push(cols);
                });
                return data;
            }
        }

    // event to fire on Save button click //
    $(document).on('click', '#btnSave', function () { //Change '#btnSave' to '#AddButtonId'
        var data = HTMLtbl.getData($('#tbl_fundtype'));  // passing that table's ID //                        
        var parameters = {};
        parameters.array = data;
        var request = $.ajax({
            async: true,
            cache: false,
            dataType: "json",
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: "prescribe.aspx/SaveData", //Change "prescribe.aspx" to your page name.
            data: JSON.stringify(parameters),                
        });
    });
</script>

in Code behind [Code in VB, convert them to C#] -

<WebMethod> _
Public Shared Sub SaveData(array As String()())

'Now Save the data from array [loop through the array]
     Dim s_Result as String
     s_Result=array(0)(0).ToString

End Sub

Answer 3

You need to add update panel in aspx page -

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="updatepanel1" runat="server">
     <ContentTemplate>
        <asp:Table ID="tbl_fundtype" runat="server" CssClass="table-bordered    tblfund" style="width:50%; white-space:nowrap;" EnableViewState="true">
                    </asp:Table>
     </ContentTemplate>
</asp:UpdatePanel>