从JavaScript设置runat =“ server”

Question

Is there a way to set the runat attribute from client-side JavaScript? I need to add rows to a table after the page is loaded, and I need to make their cells' data available to the server. I am OK with making the first (couple of) row(s) runat="server" , but I do not know how many rows the user will want, so it is not just a matter of adding a bunch of hidden rows and showing them when the user clicks on "Add New Row" instead.

I can think of a couple ways to do this:

1. Postback to the page every time the user clicks the "Add New Rows" button", and handle the runat attribute on the server instead of in JavaScript/jQuery. I do not want to do this, but as it seems like the only surefire way, I might have to.

2. Add runat="server" to the cells with jQuery, then reference them the next time I do a postback, but do nothing with them currently. This would be the ideal solution for me, but I'm not sure if ASP.NET works this way. Considering WebForms was created before JavaScript developers got down pat the idea that we could add elements to a page after the page is loaded , I'm not holding my breath.

3. Give the table or maybe tbody the runat attribute, then refer to its children somehow. This would also be better than #1, but I'm also not sure how to do this, or even if it can indeed be done.

Here is a simplified version of what I'd like to do:

<table runat="server" id="this_table">
    <tbody runat="server" id="this_table_body">
        <tr>
            <td class="this_table_cell">Some Content</td>
            <td><button type="button" class="this_table_button">Please click this button</button>
        </tr>
    </tbody>
</table>

And a simplified version of the jQuery:

$("#<%=this_table_body.ClientID%>").on("click", ".this_table_button", function() {
    $("<%=this_table_body.ClientID%>").append("<tr>
            <td class="this_table_cell">Some Content</td>
            <td><button type="button" class="this_table_button">Please click this button</button>
        </tr>
    );
});

Answer 1

This doesn't make any sense because changes to the DOM aren't pushed back up to the server when the page is posted back. Adding attributes that mean absolutely nothing to a browser (such as runat ) won't have any effect. Even if your table is set to runat="server" , client-side changes to that table aren't detected by the server.

Option #1 (postback every time a new row is added) is perhaps the easiest method, and basically what ASP.NET was designed to do since version 1.0 (before web-apps became popular)

For a more dynamic experience, what you'll need to do is store your client-side changes locally, then post them back up to the server via a standard form element, such as a hidden input field. You can add any arbitrary number of hidden fields to a <form> element, and read them on the server using the Request object. Or, you could perhaps serialize the new row data via JSON or XML. If you're simply trying to save new rows in a database, perhaps implement a Save button that sends a single new row to the server via AJAX and immediately saves it.

Answer 2

runat="server"

...is a server directive parameter which means nothing to the browser. The server wires up any methods based on this directive before rendering the page to HTML, and sending it to the Client browser. By the time JS can make the change to the element, and set runat="server" the server will not be able to receive the directive.