Search code examples
asp.netasp.net-ajaxmodalpopupextender

Passing data to server code from a client-side control using ASP.NET AJAX

I have a ListView on a page that displays a list of widgets. When a user clicks on one of the items in the list, I want to display a ModalPopup that contains controls allowing the user to operate on the item they selected.

I could easily accomplish this by placing a Panel and a ModalPopupExtender in the ListView's ItemTemplate, but this mean one set of hidden controls for each and every widget, which would massively bloat the page size. (There are going to be some rather heavyweight controls in there.) Instead I want to reuse a single ModalPopup for each of the widgets in the list.

I've done some searching but I haven't found anything that applies directly to my situation before. From what I've been able to figure out, however, I have to do something like this:

  1. Place a Panel and a ModalPopupExtender on the page inside an UpdatePanel.
  2. Build a custom WidgetManipulator user control that has a WidgetID property. Put this in the Panel, along with a couple OK/Cancel buttons.
  3. In Javascript on the page, attach a click handler to each widget in the ListView that triggers a postback on the UpdatePanel.
  4. On the UpdatePanel_Load event on the server, display the ModalPopup and then set the WidgetID propety on the WidgetManipulator to the ID of the clicked widget.
  5. On the OKButton_Click event or CancelButton_Click event on the server, hide the ModalPopup. If OKButton was clicked, call WidgetManipulator.SaveChanges() first.

The part I haven't figured out is: How the heck do I know what widget was clicked on, and how do I pass that back to the server when I refresh the UpdatePanel? Is this even the right approach at all?

Solution

  • When I need to pass data from client to server in ASP.NET AJAX, I generally use an asp:HiddenField with runat="server". Both can see it freely, but beware potential postback asynchronicity.

    Sounds like you need to notify the server the widget was clicked - You may use a Timer to postback; or I'd go with option 5.