Modal Popup with Server-Side search

I'm building a data-driven ASP.NET page for processing phone orders. The page starts out with a listing of the items contained in the order, and the user's billing/shipping info.

I'd like to feature a popup that lets the operator search for additional products to add to the order. Sort of like the modal popup control, but with a Textbox for keyword searches, submit button, and a DataGrid for results. The results grid will have linkbuttons by each search result to add it to the order. Clicking the link button will add the item to the order (updated in the order form below the popup), and close the popup.

Is this possible to do with AJAX? I could do this with a regular javascript window.open popup, but I'm hoping for something that acts more like a fat-client application than a web app.

Thanks,

Frank

Yes it is possible. Here's a simplified version of what you want to do.
http://ajax.asp.net/docs/Samples/UpdatePanelApplicationSample1/cs/UpdatePanel4CS.aspx (the focus of this example is animation but it shows the basic idea of what you described)
Clicking the calendar icon unhides an panel where you could select a date. (You could instead have a DataGrid inside the panel.) When finished, the panel can be hidden. This can be done all with server side controls with no page flicker.

This example code is here:
http://ajax.asp.net/docs/ViewSample.aspx?sref=UpdatePanelApplicationSample1 (UpdatePanel4CS.aspx)

These examples are on this doc page:
http://ajax.asp.net/docs/tutorials/usingMsAjaxLibrary/default.aspx

Thanks... this is a good start for me.

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.

ModalPopup - Dropdown List item change

I have a modal popup with a DDL on it. I want to capture what the new selected item and pass it to the server-side so I can process. How do I do this?

Thanks,

http://forums.asp.net/ShowPost.aspx?PostID=1379165

Thanks for the reply. Found the post you refer to, but it didn't fully answer my question. Exactly *how* does one code the client-side javascript to capture the DDL SelectedItem Change event?

The way the code is currently setup, it fires the server-side click event for the btnNoteSave button, and I can grab the content of the text boxes. You'll notice a hidden label field on the popup, i was hoping to use it to store the result of the selected item change from the dropdown.

The big question is, how do I do that?

Here is the code for the modal popup. THere is an ASCX control embedded in the note, Code for the ASCX is below.

<asp:PanelID="pnlNewNote"runat="server"CssClass="modalPopup"Width="225px"><tablecellpadding="0"cellspacing="1"border="0"width="225px"class="tblSection">

<tr><tdcolspan="3"><uc1:NoteCtrlID="newNoteItem"runat="server"/></td></tr><trstyle="height:5px"><td></td></tr><tr><tdcolspan="3"style="text-align:center"><asp:ButtonID="btnNoteSave"runat="server"Text="Save"Width="50px"OnClick="btnNoteSave_Click"/><imgsrc="images/spacer.gif"style="width:15px"alt="space"/><asp:ButtonID="btnNoteCancel"runat="server"Text="Cancel"Width="50px"/></td></tr><trstyle="height:2px"><td></td></tr></table>

</

asp:Panel><cc1:ModalPopupExtenderID="newNotePopup"runat="server"TargetControlID="btnNewNote"DropShadow="true"PopupControlID="pnlNewNote"BackgroundCssClass="modalBackground"CancelControlID="btnNoteCancel"

/>

THE ASCX CONTROL:

<

tableborder="0"cellspacing="1"><tr><tdalign="right"><asp:LabelID="lblNoteDate"runat="server"Width="35px"CssClass="lblFormField">Date: </asp:Label></td><tdalign="left"><asp:TextBoxID="txtNoteDate"runat="server"Width="150px"CssClass="txtFormField"/></td></tr><tr><tdalign="right"><asp:LabelID="lblCallType"runat="server"CssClass="lblFormField">Call Type: </asp:Label></td><tdalign="left"><asp:DropDownListID="ddlCallTypes"runat="server"Width="155px"OnSelectedIndexChanged="ddlCallTypes_SelectedIndexChanged"/></td></tr><tr><tdalign="right"><asp:LabelID="lblUser"runat="server"CssClass="lblFormField">User: </asp:Label></td><td><asp:LabelID="lblUserData"runat="server"CssClass="txtFormField"/></td></tr><tr><tdcolspan="2"><asp:TextBoxID="txtNotes"runat="server"TextMode="MultiLine"Width="200px"Rows="5"CssClass="txtFormField"/></td></tr>

</

table>

<

divstyle="visibility:hidden"><asp:LabelID="lblCallTypeValue"runat="server"Text="Label"></asp:Label>

</

div>

The DropDownList.SelectedItemChanged event is a server-side event, not a client-side event.

ModalPopup and auto-updating controls/server-side function calls

I'm having trouble searching for an answer for this and have been unable to find one, but this seems like a very trivial question, maybe I'm just too tired to be doing this right now.

I have a ModalPopup, and in it I have 5 textboxes(all with autopostback enabled) and two dropdownlists, also with autopostbacks. Now, what I want to have happen is when I change the dropdownlists, the values in the textboxes inside the ModalPopup will change, but I don't want the popup to close. Right now, the autopostbacks are working as they should, but the popup closes each time.

This is my ModalPopupExtender code:

<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server"> <cc1:ModalPopupProperties TargetControlID="LinkButton1" PopupControlID="PanelEdit" BackgroundCssClass="modalBackground" DropShadow="true" CancelControlID="NoButton" OnCancelScript="onNo()"> </cc1:ModalPopupProperties> </cc1:ModalPopupExtender>

Now, one thing I thought of was the fact that there's no OkControlId defined, this is sort of a hack to get my Ok button to actually call the server side code for the Ok button, rather than just the javascript. If this is the problem, how do I define the OkControlId, and have it call the server-side code associated with the button?

I appreciate any help anyone can offer to my problem, and if you need any more code, let me know.

Hi,

I don't know the details of the ModalPopup, but did you try to wrap the ModalPopup content (5 textboxes + ddls) inside an UpdatePanel? Performing a partial postback should keep the popup visible (just guessing though).

I originally wrapped the panel containing my controls in an UpdatePanel, but that didn't work. I just now tried putting the actual ModalPopupExtender into the same UpdatePanel, but it had no effect, the popup still disappears when the autopostback is triggered.

Hi,

I mean, not wrapping the extended Panel, but the content of the ModalPopup (inside the Panel). Did you try that?

I just tried that, but to no avail. As far as I can tell, the behavior hasn't changed at all when I put the UpdatePanel around just the controls inside the panel.

This won't solve the issue

I had the same problem but in vain. Any postback from any element in the ModalPopup will close it

Did you find a workaround for it? Like, is there a way to disable postbacks from cosing the ModalPopup, then just do it inside the button that you want to close it?
This post suggests an easy way to re-display the ModalPopup on the server during the postback with the 60914 release.

After looking at the post, I see the new way to do it, but I am having a problem:

I'm running the following code in the page load event...

ModalPopupProperties popup = ModalPopupExtender1.GetTargetProperties(UpdatePanelEdit);
if (popup !=null)
popup.Show();// Or call popup.Hide();

My problem is, popup never gets assigned to anything except null...does this code have to be placed somewhere outside of the Page_Load?

The control passed to GetTargetProperties needs to be the one that's specified as the TargetControlID for the ModalPopupProperties.

Ok, I changed the control names and whatnot, and now the properties isn't null, but the .Show() doesn't actually do anything. I've stepped through the code, and it does execute the popup.Show(); but it doesn't have any effect. I removed the UpdatePanel I had, and just used a regular Panel control to contain the popup. The above code is in the Page_Load, does it need to occur before the actual page load?

I had a problem somewhat similar to this.

What happens on postback, is it rebinds the display:none style to the panel, hiding it.
In mine, I had a gridview and several buttons that would change the contents of. I ended up wrapping just the gridview in an update panel, and assigning each of the buttons to a trigger for the update.

Not sure if you can use this in your situation but I hope it helps.