This question has been asked before: Access <asp:table> table rows added by javascript in asp.net webform . Apologies for the duplicate question but I'd really like an explanation why this is the case. It is probably due to my lack of understanding on how browsers process HTML tables on submission to the server.
If I have a <HTML> table or an <asp:table> control on an aspx page and I add rows to it client-side using JQuery / Javascript, why can I not include these added rows in a post-back to the server?
I've been trying to get this to work and it looks like I can't do it based on the answer to the previous question. But can someone explain why this is the case? The table itself can be returned in the post-back but the only rows present are the rows that were part of the table when it was sent to the browser originally - it does not include the rows added by the browser.
I would have thought there was a way to include these new rows in the post-back, the same as any client-side user input?
When performing a POST operation to the server, only the values included withing the <form> element being posted will be included. These are serialized as Key/Value pairs and can be inspected using tools like FireBug and the Chrome Developer Tools.
Regular HTML elements are not sent back to the server. What I mean is that things like <div> or <table> elements don't go back to the server, only the values of the form.
Unfortunately ASP.Net hides a lot of these details from you. It is magic! That is both a good and a bad thing. It makes it easy to work blissfully ignorant of the nitty gritty details of how HTTP works under the hood, but can be a source of pain when you really need to know those details.
You could do something like this:
// Get the data from your table into an array
var tableData = [];
$("table tr.some-class").each(function () {
var row = [];
$(this).find("td").each(function () {
row.push(this.innerHTML);
});
tableData.push(row);
});
// Make your form
var form = $("<form>").attr("action", "some/path/on/server")
.attr("method", "post");
// Make a form field with your tableData (JSON serialized in this case)
var tableInput = $("<input>").attr("type", "hidden")
.attr("value", JSON.stringify(tableData));
// Some browsers require the form to be in the dom before it'll submit.
$(document.body).append(form);
// Add the field to the form and submit
form.append(tableInput).submit();
This is a basic implementation of this answer.
You could always simulate with AJAX by putting the table and the button in an update panel, and appending rows in the button click event.
To the client, there is no difference between asp:table and table. They are one and the same. To really answer the question, we have to think about what is going on server-side, as that is where the difference between an asp:table and a table lies.
When you create an asp:table, you are likely binding with some data. The only way the server thinks the table will change is if the data changes. So that is where you need to look to get your table changing, change how it binds. If you change your table client-side, you need to mirror those changes server-side. I'm not sure how your data and table are set up, but there are many ways this can be done.
At the simplest, you may "postback" the new rows in an element, and when you process the asp:table server-side, check for the data that would be posted back and add the appropriate rows.
Alternately, if you are in a position to change the data which binds the table, you could do that as well.
