David Williams

Sometimes it seems implementing functionality in ‘standard’ asp.net takes several times longer than with MVC.  In my case, I wanted to do the following when changing a checkbox on a form page (page uses partial page update).  Note that I needed to use both client side and server side functionality, and the page updates only part of the page.

1. On checkbox changed, display an “are you sure” popupup.
2. On ‘Ok’, call server method to modify data on the backend, re-bind part of the page.
3. On ‘Cancel’, close popup, set the checkbox to the value before the popup was displayed.
4. Implement using partial page update (update panel/partial view with AJAX).

‘Standard’ ASP.Net Implementation

This seems to me to be a simple task.  However to make this work in ‘standard’ ASP.Net, I had to do the following:

1. Create a checkbox with a onClick method (CheckboxChanged). (Did not use AutoPostBack=True or OnCheckChanged client event.)
   1. OnClick JS function uses “$find('modalPopupApps').show();” to
2. Create Hidden div with modal popup content and a ModalPopupExtender.
   1. Point TargetControlID to meaningless control (lblHello). 
   2. Add BehaviorID ("modalPopup”)
3. Add Hidden asp button (display:none), create server side event for button.
4. In modal popup div, Add input button for “Ok”.  Onclick call JS function (ChangeOk) to call server method. 
   1. (Could not get asp.net button to work, likely related to update panel)
   2. ChangeOk uses “document.getElementById('<%= btnHiddenApps.ClientID %>').click(); “ to call hidden buttons onClick server side event.
   3. Server side event handles business logic, hides popup (modalPopup.hide();), re-binds data controls.
   4. (Verify/debug server side events to verify method is bound to event correctly.)
5. In modal popup div, Add input button for “Cancel”.  Onclick call JS method (ChangeCancel)
   1. Could not use asp.net button.  Remove CancelControlID.
   2. JS function uses $find('modalPopupApps').hide();

I sort of hope I missed something basic here, this seems like an awful lot of work.  No doubt there are many other ways to implement this, likely many better methods.  If anyone can see something I missed please let me know (but please be kind).  (Glancing at the rest of the application, I see some pages move the hidden button outside of the update panel.)  However I spent several hours on this before going with this solution.  For context I should add that I consider myself to have a good set of ASP.Net/MS Ajax experience under my belt (although you may find that hard to believe after seeing the above).  Regardless, this shows how complex Asp.net ‘standard’ with MS AJAX can get, or at the least that it can be less than clear how to implement client side functionality.

ASP.Net MVC/JQuery implementation

In comparison with MVC using JQuery, to implement I would do the following:

1. Add a hidden div (display:none).
2. On document.ready, declare a dialog using JQuery “.dialog”, link to the hidden div
   1. In the declaration, bind “Ok” to ChangeOk method.
   2. In the declaration, us JQ to find Checkbox, not checked value, close dialog ($(this).dialog('close');)
3. In ChangeOk:
   1. Use (magical) JQuery to call an MVC ActionMethod to modify data on backend and return partial view.  Much of this can be refactored for reusability/readability.
      - ($(‘div’).load(“/Page/Partial”, fuction(html){$(“partialDiv”)[0].value = html}))
   2. Close the dialog (.dialog('close')).
4. Create a checkbox, add onclick=”$("#hiddenDiv").dialog('open');”

To me it seems the MVC solution is much simpler and easy to understand, with fewer gotchas and moving parts.