ASP.Net, Drag-n-Drop, Postbacks, and Control IDs

Question

The title attempts to summarize the problem, but here's a more detailed summary: our web page is a collection of usercontrols, which visually render as rectangular reporting widgets, which are set in AJAX updatepanels. We are giving the user the ability to drag and drop the widgets to pre-set "zones" on the page.

The drag and drop functionality works fine. We use AJAX calls to a web service to update a database with the user's new settings for persistence.

The "however" happens when we do a postback from one of these widgets. The postback is sent to the server, it renders an update, which is sent back to the client (all via AJAX, because of the updatepanel). We then get a "Could not find UpdatePanel with ID..." message on the client, because the document hierarchy has changed, but the control IDs have not been updated on the client.

We tried Rick Strahl's solution to this link text, which allowed us to create static control IDs on the client. This breaks the postback functionality, though... the isPostBack property is not set, I'm assuming because the server can't match the control ID with a known hierarchy element.

We're thinking about possibly resetting the control ID on the client side after it's dragged and dropped, using Javascript. Obviously, this would require duplicating .Net's naming algorithm--not smart, we're thinking. Maybe we can use a separate updatepanel and ask the server to send us the new control ID after it's dropped?

Obviously, we're running out of ideas.

I realize this is probably too long, and I'll happily edit, provide code samples, etc. to help you help us. Thank you in advance.

Answer 1

You could use ASp.Net's built in system for draggable page elements called WebParts.

The system works with postbacks and can be easily implemented with Visual Studio

Have a search for webparts tutorials such as:

http://www.ondotnet.com/pub/a/dotnet/2005/01/10/liberty.html

Hope this helps

Answer 2

Just out of interest, have you inspected the id of the UpdatePanel that posts back, and is the id one that is expected? You can hook into the client page lifecycle of ASP.NET AJAX like so to inspect the id of the control initiating the postback

<script type="text/javascript">

  function pageLoad(sender, args)
  {
      var prm = Sys.WebForms.PageRequestManager.getInstance();

      prm.add_initializeRequest(InitializeRequest);
      prm.add_endRequest(EndRequest);

      //fires when an async postback is initialized
      function InitializeRequest(sender, args) 
      {
        alert(args._postBackElement.id)
      }

      //fires when an async postback is complete
      function EndRequest(sender, args) 
      {
        alert(sender._postBackSettings.sourceElement.id)
      }
  }

</script>

Answer 3

I'm going to thank the respondents here: Thank You!! We are taking this in a different direction now. We were trying to work within the server-side control framework (.Net), but given the client-influenced nature of drag-n-drop, it seem (unnecessarily?) complex to try to keep the client and server models in sync. We're going to replace the UpdatePanels with simple DIVs, and only communicate back to the server via web service (to persist the drag and drops).

Thank you both for your help!