访问DOM以从HTML表服务器端获取值

Question

I created a aesthetic control that creates two lists in seperate div tags organized with a table for each. The control always the user to click on the img tag associated with each item to move it between the two lists. I am doing all the movement between the lists via javascript and want to have a good method for obtaining the values and storing them in two lists upon Postback. I thought of doing something like storing the indexes/classes in hidden values and them reading them to find the items but that seems messy. Also, thought there might be a clever way of traversing the DOM via FindControl() but not sure. Any input would be great.

One other thing is that this is not a composite control. All the tags are being rendered in the RenderContents() method. So I don't know if there is a way to even tack on a runat="server" attribute to an elem like I normally would if I wanted code behind access to an html element.

Here is the HTML that is generated. I don't think there is need to post the server side code since it does nothing more than generate the html at this point.

<div class="DualListPanel" id="test1">
   <div key="test1_Unassigned">
      <table class="DLPTable">
         <tr>
            <td>Item 1</td>
            <td><img src="..." onclick="Move(this)" /></td>
         </tr>
         <tr>
            <td>Item 2</td>
            <td><img src="..." onclick="Move(this)" /></td>
         </tr>
      </table>
   </div>
   <div key="test1_Assigned">
      <table class="DLPTable">
      </table
   </div>
</div>

Answer 1

You can't use FindControl() to parse client-script. If you want to track changes made on the client so you can adjust data on the server, you have to use a hidden field, store the changes. A hidden field is the only way in this case to get the client to server interaction working.

Answer 2

The other answer is the right approach. There's nothing inherently messy about storing data in a hidden field. It's the most basic way the client and the server communicate.

But I wanted to post another alternative, which is to use AJAX and a WebMethod. With jQuery this is very easy. Your submit handler can do a POST to the WebMethod with whatever information is needed about the new list order (even including all the HTML, if you really wanted to do it that way, though I think tracking changes in state or ordinal values as needed would be a lot simpler). The method can then update the database. If you wanted to get real fancy, you could hit the server in real time (eg every time they move something on the client) with an asynchronous method.

Without knowing the context, it's probably overkill to do that, but it's another way that has its time and place.