Geeks With Blogs
David Williams Who's scruffy looking?

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. 

Posted on Monday, October 18, 2010 10:37 PM | Back to top


Comments on this post: Standard ASP.Net vs. MVC: Modal dialog with client side logic, server side logic, and partial page update.

# re: Standard ASP.Net vs. MVC: Modal dialog with client side logic, server side logic, and partial page update.
Requesting Gravatar...
David,

Can you please send me the source code (for Asp.Net MVC Model)
Left by Sanjeev Verma on Nov 10, 2010 7:59 AM

# re: Standard ASP.Net vs. MVC: Modal dialog with client side logic, server side logic, and partial page update.
Requesting Gravatar...
(sorry, I don't check up on this enough)
@firewall: Yes that is the standard MS line, and I am certain in the near future 'traditional' is not going anywhere. At the very least, like any technology, existing apps will continue to to stay with the same platform. There is no simple migration path, if you want to receive the benefit of MVC. However I think at some point, more new applications will be developed using MVC than traditional. In my opinion, the cost/benefit is simply too good to pass up on.
Left by Davewill on Mar 26, 2011 2:21 PM

Your comment:
 (will show your gravatar)


Copyright © David Williams | Powered by: GeeksWithBlogs.net