Saturday, March 24, 2012

Modal popups without using server-side extenders

First, I should say that I really like ASP.NET AJAX. I've been trying it out off or on for the last several months and there is a lot to like. UpdatePanels are a great for quickly adding AJAX to a WebForm and the ability to call a webmethod directly from Javascript is cool. I'm a little less impressed with the Control Toolkit -- mainly because it doesn't really do what I want but I haven't found a better solution. My understanding is that the toolkit provides controls that can be added to a WebForm much like regular controls. But I want to do things more on the client side in javascript and just make AJAX calls to my webmethods when I need to interact with the server. But I also want to take advantage of some of the slick UI features that are associated with AJAX -- mostly ModalPopups. Up to now, I've been using the ModalPopupExtender by creating a panel (using a DIV) and by programmatically instantiating the like this:

function InitializeSavePageModalPopup() { __SavePageModalPopup =new AtlasControlToolkit.ModalPopupBehavior(); __SavePageModalPopup.set_BackgroundCssClass('modalBackground'); __SavePageModalPopup.set_DropShadow(true); __SavePageModalPopup.set_PopupControlID('SavePageModalPopup'); $("button_save").control.get_behaviors().add(__SavePageModalPopup); __SavePageModalPopup.initialize();}

To make this work, I was adding a 'dummy' extender tag so that the appropriate javascript libraries would load:

<cc1:ModalPopupExtender ID="EmptyModalPopupExtender" runat="server" />

Now with the AJAX Beta, I have to add a full ModalPopupExtender, that is, it has to have all it's required properties. Not the end of the world, and I've mostly got it working, but it got me thinking that there must be a better way to do what I want to do. It would be nice if the javascript behavior that is used by the extender was divorced from the server-side extender code. And it got me thinking of how I think it should be. In my ideal world, I would be able to just create a modal like this:

oModalConfirm = new ModalConfirm("Are you sure you want to do that?");

oModalConfrim.show();

In this example, it would be a modal that acts like a confirm modal, with an OK and Cancel button. Clicking on those buttons would fire an event. There could be different classes for different types of Modals (Alert, Confirm, Wait/processing, and even forms).

My questions are: has this sort of thing been done? Is there a better way to use the behaviors embedded with the toolkit extenders? I've looked over some other libraries such as the Yahoo UI toolkit but would rather not have to have a whole new system to learn and include but is there something that does what I want that you would recommend?

-Alex

For what it's worth, you can use the .js behaviors directly, though hooking all the dependencies up correctly may not be trivial. What may be easiest is if you create the page using the extender, then view-source the resulting content and borrow liberally from there.

No comments:

Post a Comment