Monday, March 26, 2012

MultiView in PopupControlExtender ?

I am trying to decide which ajaxtoolkit control to use for the following and if someone can point me to the correct direction, it would help alot.

I want to create poup window when click on a linkbutton. The popup window include asp.net server controls such as multiview or wizard which required popup to stay open even after the postback.

basically

1.user click on the linkbutton to open up popup window.

2. user fill up information on first view of the multiview and click next to go to next view

(catch the button next action on server side and do some action such as write to database, then change the multiview active index to second view)

3. user is provided with second view of the multiview while the popup still open

I can't use hovermenuextender because i want the popup to display when click action happened

I am trying out the popupcontrolextender but it close the popup window after user click next ( 2 ).

Here is the code, i have it so far.
123<asp:LinkButton ID="LinkButton1" runat="server" Text="Open Popup" />4<asp:Panel ID="Panel1" runat="server" CssClass="PopupStyle">5<asp:UpdatePanel runat="server" ID="UpdatePanel3">6 <ContentTemplate>78 <asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">9 <asp:View ID="View1" runat="server">10 View111 <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="btn_next.gif" />12 </asp:View>13 <asp:View ID="View2" runat="server">14 View215 <asp:ImageButton ID="ImageButton2" runat="server" ImageUrl="btn_complete.gif" />16 </asp:View>17 </asp:MultiView>18 </ContentTemplate>19 </asp:UpdatePanel>20 </asp:Panel>21<ajaxToolkit:PopupControlExtender ID="PopupControlExtender1" runat="server" TargetControlID="LinkButton1"22 PopupControlID="Panel1" Position="Bottom" >23</ajaxToolkit:PopupControlExtender>

With this code, it always close the popup after ImageButton1 in View1 is clicked. So i tried putting another updatepanel to wrapped the whole thing, once i do that the button click doesn't go back to server anymore.

What i am looking for exactly is an ajaxtoolkit control that create popup on clicked that can have any asp.net server control and stay open until user click close or certain button.

Any suggestion is appreciated.

thanks!


I guess i make it confused with my specific case. but it is quite simple what i want to do. so let me rephrase my question.

"Does anyone know which ajaxtoolkit control to use to create sticky popup with server controls which require postback?"


Really appreciate any suggestion even if there is no such control, please let me know.

Thanks very much.


Hi,

By default, popup extender doesn't support this behavior, but you can enable it by wrapping the wizard in a UpdatePanel.

Here is a sample that works:

<%@. Page Language="VB" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server"> Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) MultiView1.SetActiveView(View2) End Sub</script><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>Untitled Page</title></head><body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:LinkButton ID="LinkButton1" runat="server" Text="Open Popup" /> <asp:Panel ID="Panel1" runat="server" CssClass="PopupStyle"> <asp:UpdatePanel runat="server" ID="UpdatePanel3"> <ContentTemplate> <asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0"> <asp:View ID="View1" runat="server"> View1<asp:Button ID="Button1" runat="server" Text="Next" UseSubmitBehavior="false" OnClick="Button1_Click" /> </asp:View> <asp:View ID="View2" runat="server"> View2 <asp:Button ID="Button2" runat="server" Text="Complete" UseSubmitBehavior="false"/> </asp:View> </asp:MultiView> </ContentTemplate> </asp:UpdatePanel> </asp:Panel> <ajaxToolkit:PopupControlExtender ID="PopupControlExtender1" runat="server" TargetControlID="LinkButton1" PopupControlID="Panel1" Position="Bottom" > </ajaxToolkit:PopupControlExtender> </div> </form></body></html>
Hope this helps.

Thanks you Raymond for the reply. Just in case someone wondering how this goes. Here is what i ended up with. There is one that worth mentioning here. The property UseSubmitBehavior is a must so you must used button or similar control. The main problem that i have before was using imagebutton. I was using two updatedpanel nested and somehow imagebutton never make the server call. but the button did with UseSubmitBehavior set to false.

1 <asp:ScriptManager ID="ScriptManager1" runat="server">
2 </asp:ScriptManager>
3 <asp:UpdatePanel runat="server" ID="UpdatePanel1">
4 <ContentTemplate>
5 <asp:LinkButton ID="LinkButton1" runat="server" Text="Open Popup" />
6 <asp:Panel ID="Panel1" runat="server" CssClass="PopupStyle">
9 <asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">
10 <asp:View ID="View1" runat="server">
11 View1
12 <asp:Button ID="Button1" runat="server" Text="Next" UseSubmitBehavior="false" OnClick="Button1_Click"
13 CssClass="ButtonSubmit" />
14 </asp:View>
15 <asp:View ID="View2" runat="server">
16 View2
17 <asp:Button ID="Button2" runat="server" Text="Complete" UseSubmitBehavior="false"
18 CssClass="ButtonComplete" />
19 </asp:View>
20 </asp:MultiView>
23 </asp:Panel>
24 <ajaxToolkit:PopupControlExtender ID="PopupControlExtender1" runat="server" TargetControlID="LinkButton1"
25 PopupControlID="Panel1" Position="Bottom">
26 </ajaxToolkit:PopupControlExtender>
27 </ContentTemplate>
28 <Triggers>
29 <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
30 <asp:PostBackTrigger ControlID="Button2" />
31 </Triggers>
32 </asp:UpdatePanel>

thanks for the helps. hope this help someone also.

No comments:

Post a Comment