using dynamic table to fill data only and pass the values to code behind ASP.NET

Question

It's been a long time since I coded so I am facing troubles.

I am using VS2015 .NET c# webForms Application. I have a simple form where the user need to fill a dynamic table and after hitting submit the values are passed to code behind for some calculation then stored in DB.

I used the HTML table in the link http://talkerscode.com/webtricks/add-edit-and-delete-rows-from-table-dynamically-using-javascript.php

the output:

I cant use Gridview becuase it postsback and connects to DB directly. I dont want to store the input of the table immediately.

I am stuck at retrieving the data from HTML table. Can I get some hints or suggest to me any other better way to do if any.

If you want I can provide the code. Thanks

UPDATE: my code

form.aspx

   <form runat="server">
   //elements here

   <div class="table-responsive" id="div_invlv">

               <!------TABLE ---->
          <table  id="data_table" class="table" >
           <tr>
           <th></th>
           <th>   </th>
           <th>Name</th>
           <th>Position</th>
           <th>Company</th>
           <th></th>
           </tr>

            <tr>
               <td>
                   <select class="form-control" id="type_of_person">
                     <option>Internal</option>
                     <option>External</option>
                   </select>   </td>
               <td><input type="text" class="form-control" id="new_name" /></td>
                <td><input type="text" class="form-control" id="new_position"  /></td>
               <td><input type="text" class="form-control" id="new_company"  /></td>
               <td><input type="button" class="btn btn-small btn-template-main add"  onclick="add_row();" value="Add Row" /></td>
            </tr>

            </table>
   </form>

Table.js

   function delete_row(no)
   {
   document.getElementById("row"+no+"").outerHTML="";
   }

    function add_row()
  {
  var drop = document.getElementById("type_of_person");
  var new_type = drop.options[drop.selectedIndex].innerHTML;
  var new_name=document.getElementById("new_name").value;
  var new_country=document.getElementById("new_position").value;
  var new_company=document.getElementById("new_company").value;

  var table = document.getElementById("data_table");
  var table_len = (table.rows.length) - 1;
  var row = table.insertRow(table_len).outerHTML = "<tr id='row" + table_len + "'><td id='id_row" + table_len + "'><asp:Label Name='id" + table_len + "' runat='server' > " + table_len + "</asp:Label></td>   <td id='Type_row" + table_len + "'><asp:Label ID='type" + table_len + "' runat='server' > " + new_type + "</asp:Label></td><td id='name_row" + table_len + "'> <asp:Label ID='name'"+table_len+" runat='server' >" + new_name + "</asp:Label></td><td id='position_row" + table_len + "'>" + new_country + "</asp:Label></td><td id='company_row" + table_len + "'><asp:Label ID='company'"+table_len+" runat='server' >" + new_company + "</asp:Label></td><td > <input type='button' value='Delete' class='btn btn-small btn-template-main delete' onclick='delete_row(" + table_len + ")'></td></tr>";


    document.getElementById("new_name").value="";
    document.getElementById("new_position").value = "";
    document.getElementById("new_company").value = "";
   }

C#

   string typeTable = Request.Form["type" + 1];
   Label10.Text = typeTable ;

The rows are generated during the run and I am trying to retrieve the value of one cell in the first row for testing but its not working.

post your code to see what you have so far or better: to see where you are stuck. — Legends
– Legends, Commented Oct 8, 2017 at 23:12
"I am stuck at retrieving the data from HTML table", that is because from the server side you have no access to the HTML table, only form elements.You need to be persisting the table data in hidden form fields. The other option is to style the form fields to look like regular cells and set them to readonly — Jon P
– Jon P, Commented Oct 9, 2017 at 3:17
the problem is since the table rows are created through javascript, you cant access its rows values directly in code behind, they will not considered as populated, i tested it myself with normal html table or <asp:table>, if you can somehow change when the elements are filled or bind it to a button (an asp:button function) you can save yourself a lot of trouble — JKOU
– JKOU, Commented Oct 9, 2017 at 9:29

ShB · Accepted Answer · 2017-10-11 07:41:27Z

1

The link provided by @legends

https://www.aspsnippets.com/Articles/Dynamically-Add-Rows-to-GridView-using-JavaScript-on-Button-Click-in-ASPNet.aspx

works great and solved most of my issue.

Thanks

answered Oct 11, 2017 at 7:41

ShB

3192 gold badges6 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jon P · Accepted Answer · 2017-10-09 03:09:50Z

0

you can use this function to fill your datagrid dyamically

public void fillgrid(string qry, GridView dg){

        try
        {

            sql.cmd = new SqlCommand("qry", sql.cn);
            sql.cn.Open();
            DataSet ds = new DataSet();
            SqlDataAdapter sda = new SqlDataAdapter(sql.cmd);
            sda.Fill(ds);
            dg.DataSource = ds;
            dg.DataBind();
            sql.cn.Close();
        }
        catch (Exception ex)
        {

            MessageBox.Show(ex.ToString());


        }

    }

or you can use a placeholder control to create a dyamic html table

edited Oct 9, 2017 at 3:09

Jon P

19.9k8 gold badges52 silver badges76 bronze badges

answered Oct 9, 2017 at 0:48

kcirde

156 bronze badges

1 Comment

ShB Over a year ago

I want the user to fill the data,the table is empty in its initial. what do you mean by "placeholder" cuz I am using a dynamic html table

Collectives™ on Stack Overflow

using dynamic table to fill data only and pass the values to code behind ASP.NET

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related