0

Im rendering an html table on the page_load event. I would then like to submit the table on button click and read the contents of each cell. Here is the code that i have created to create the table.

    <html>
   <script runat="server" >

      void Page_Load(Object sender, EventArgs e)
      {

         // Create the HtmlTable control.
         HtmlTable table = new HtmlTable();
         table.Border = 1;
         table.CellPadding = 3;
         table.ID = "testTable";


         // Populate the HtmlTable control.

         // Create the rows of the table.
         for(int rowcount=0; rowcount<5; rowcount++)
         {
            HtmlTableRow row = new HtmlTableRow();

            // Create the cells of a row. 
            for(int cellcount=0; cellcount<4; cellcount++)
            {
               HtmlTableCell cell;

               // Create table header cells for first row.
               if(rowcount <= 0)
               {
                  cell = new HtmlTableCell("th");
               }
               else
               {
                  cell = new HtmlTableCell();
               }

               // Create the text for the cell.
               cell.Controls.Add(new LiteralControl(
                   "row " + rowcount.ToString() + ", " + 
                   "column " + cellcount.ToString()));

               // Add the cell to the Cells collection of a row. 
               row.Cells.Add(cell);

            }

            // Add the row to the Rows collection of the table.
            table.Rows.Add(row);

         }

         // Add the control to the Controls collection of the 
         // PlaceHolder control.
         Place.Controls.Clear();
         Place.Controls.Add(table);

      }

   </script>

<body>

   <form id="Form1" runat="server">

      <h3> HtmlTable Example </h3> 

      <asp:PlaceHolder id="Place" runat="server"/>
   <asp:Button runat="server" Text="click me!" OnClick="Unnamed_Click" />
   </form>

</body>
</html>

This is pretty simple stuff however i don't know how to begin reading the data from the html table once i capture the button click event. I would appreciate any help you guys can offer. i try looking at this post but they are just not making sense?...

How to read html table in c#

Note: Once i render the table, it could get manipulated by users using javscript on the page. Therefore a data bound does not seem to be doable here.(I could be wrong though.) I also see alot mentions of the html agility pack, though it seems for like what im doing is not necessary.

Community
  • 1
  • 1
Miguel
  • 2,019
  • 4
  • 29
  • 53
  • Maybe you should add `javascript` to your tag list, because it's going to take something very heavy-weight to walk that table's DOM and convert it into something that can go back to the server and mean something. –  Jan 13 '14 at 19:47
  • ive done that before i was hoping someone would say that i could use like an update panel and read the contents of the table. Like to know if their is a way of doing this besides making a jason array and posting it back. – Miguel Jan 13 '14 at 19:48
  • If your users are going to be manipulating this via JS, maybe you should be returning JSON instead of an HTML table. – Pete Garafano Jan 13 '14 at 19:49
  • Well, resubmit would be more automatic if you put say `` elements in each cell of the table, but that would affect how it looks. A table, by itself, has nothing to submit (even in a partial submit or update panel). Note: There are controls like `Repeater` `GridView` etc that support round-trip to user (kind of old-school) –  Jan 13 '14 at 19:50
  • @ebyrob even if i use the runat server attribute on the table i could not read the contents of the cells from the table? – Miguel Jan 13 '14 at 19:53
  • @Miguel I know `System.Web.UI.WebControls.Table` is designed for this. Actually, if you keep lots of unique IDs, `server` attribute may do the trick (you wouldn't be parsing in this case). **but** with server attribute you'd have to regen matching table on every page load (it'd get merged with input from client to some degree). `System.Web.UI.WebControls.Table` would store itself in `ViewState` for the most part... –  Jan 13 '14 at 19:55
  • @ebyrob so how would you attack this problem then? how would you do it? – Miguel Jan 13 '14 at 20:06
  • Have a look at knockout.js for two-way data binding in javascript. – Keith Payne Jan 13 '14 at 20:08
  • @Miguel Everytime I've needed this in any detail, I've used a `GridView`. Just plop one on a page (with a `DataSource`) and see how it works. Actually not true, I have had to do this in javascript with images etc, but it was a nightmare. –  Jan 13 '14 at 20:15

1 Answers1

0

Your best bet would be to have the javascript that manipulates the table keep the manipulations in a hidden field on the page:

<input type="hidden" runat="server" id="tableData" />

Then come up with a way to format your table data, something like: row1:value,value,value_row2:value,value,value. Then have the same javascript that manipulates the page keep your hidden fields up-to-date. If you can't alter the javascript that manipulates the page you could add javascript to each cell/row in the table which looks for changes and updates the hidden values.

Check out:

jQuery watch div

Which looks pretty close to what you'd need.

Community
  • 1
  • 1
user2033791
  • 810
  • 12
  • 23