Add UserControls in DirectEvents/Methods and have them automatically Reload on Post-back through messaging in Hidden Fields

Page 1 of 3 123 LastLast
  1. #1

    Add UserControls in DirectEvents/Methods and have them automatically Reload on Post-back through messaging in Hidden Fields

    Last edited by michaeld; Dec 23, 2013 at 3:42 AM.
  2. #2
    I have revised the code above with the latest tech improvements.
  3. #3
    Thank you for sharing! It looks very interesting!

    Should be "messanging" replaced with "messaging" in the title?
  4. #4
    Quote Originally Posted by Daniil View Post
    Thank you for sharing! It looks very interesting!

    Should be "messanging" replaced with "messaging" in the title?
    Yes, I can't fix it. Please, if you can.

    It's still a work in progress. Vladimir is posing I really need to switch the model to UserControl loading instead of UserControlRender, but as yet I haven't figured out a way to successfully do that.
  5. #5

    New Version

    This is an all new version that better handles Page Life-Cycle better (per Vladimir's suggestion) and adds support to handle destroyed windows. I have also moved this project to a separate library.

    // I have removed this beta implementation and posted a newer version further in the thread...
    Project Status
    This is the first implementation I feel strongly could be a release candidate. The remaining issues relate to child control participation in layout (i.e. between Items and Content). I need help from the Ext.Net team to get this working.

    Also I believe you will need version 2.4 with at least trunk updates up to 5576. Versions after 2.4.X or after 2.5 should work fine.

    I have also posted an example application that tests various ways controls can be rendered/added/destroyed on different panels.
    Last edited by michaeld; Jan 14, 2014 at 9:15 AM.
  6. #6

    Test Application

    TestApp.aspx - Note this page inherits from XPage to ensure that it automatically loads Registered Controls
    <%@ Page Language="C#" EnableViewState="false"  ClassName="TestApp" ViewStateMode="Disabled" Inherits="Ext.Net.Ext.XPage" %>
    <%@ Import Namespace="Ext.Net.Ext" %>
    
    
    <script runat="server">
        protected void Page_Load( object sender, EventArgs e ) {
            if( XExt.IsAjaxRequestNotRendering )
                return;
            // Initialize Panel2 only first time
            Panel2.Items.Add( new UserControlLoader() { Path = "TestCtlDateBtn.ascx", UserControlID = "P2DateBtnUCL", ClientIDMode = System.Web.UI.ClientIDMode.Predictable } );
            Panel2.AddDirectControl( "TestCtlDateBtn.ascx", "P2_DateLd_", false, null, true );
        }
        protected void P1Test( object sender, DirectEventArgs e ) {
        }
        protected void P3Test( object sender, DirectEventArgs e ) {
            Panel3.AddDirectControl( "TestCtlDateBtn.ascx", "P3_Date_", true, null, true );
            Panel3.AddDirectControl( "TestCtlChainLoadDate.ascx", "P3_Chain_", true, null, true );      
        }
       	protected static int p4cnt = 1; // be aware: can reset on apppool recycle
    	protected void P4Test( object sender, DirectEventArgs e ) {
    		// Render the New Account Ask Question
            Panel4.AddDirectControl( "TestCtlDateBtn.ascx", "P4_Cnt_" + ( p4cnt++ ).ToString(), false, null, true );
    	}
        protected void P5Test( object sender, DirectEventArgs e ) {
            Panel5.AddDirectControl( "TestCtlChainLoadDate.ascx", "P5_ChainAndDate_", true,
                uc => { ((Hidden)uc.FindControl("Hid")).Text = Panel2.ID; }
            , true );
        }
        protected static int pDM = 1;  // be aware: can reset on apppool recycle
        [DirectMethod( IDMode = DirectMethodProxyIDMode.None )]
        public void AddToPanel( int panel ) {
            var Panel = (Ext.Net.Panel)FindControl( "Panel" + panel.ToString() );
            Panel.AddDirectControl( "TestCtlDateBtn.ascx", "DirMethod_" + ( pDM++ ).ToString(), true, null, true );
        }
    
    
    </script>
    
    
    <!DOCTYPE html>
    <html>
    <head id="Head1" runat="server">
        <title>TestApp Sample</title>
    </head>
    <body>
        <form id="Form1" runat="server">
    
    
            <ext:ResourceManager ID="ResourceManager1" runat="server" ScriptMode="Development" SourceFormatting="true" DisableViewState="true" />
            <ext:Viewport ID="vp" runat="server" Layout="VBoxLayout">
                <LayoutConfig>
                    <ext:VBoxLayoutConfig Align="Stretch" />
                </LayoutConfig>
                <Items>
    
    
                    <ext:Container ID="Row1" runat="server" Border="true" Padding="5" Flex="1" Layout="HBoxLayout">
                        <LayoutConfig>
                            <ext:HBoxLayoutConfig Align="Stretch" />
                        </LayoutConfig>
                        <Items>
    
    
                            <ext:Panel ID="Panel1" runat="server" Title="Form Panel" Border="true" Padding="5" Flex="1" Layout="VBoxLayout" AutoScroll="true">
                                <LayoutConfig>
                                    <ext:VBoxLayoutConfig Align="Stretch" />
                                </LayoutConfig>
                                <Items>
                                    <ext:FormPanel ID="FormP1" runat="server"  >
                                        <Items>
                                            <ext:TextField ID="NameT1" runat="server" FieldLabel="Name" LabelAlign="Top" />
                                        </Items>
                                        <Buttons>
                                            <ext:Button runat="server" Text="Save" OnDirectClick="P1Test" />
                                        </Buttons>
                                    </ext:FormPanel>
                                </Items>
                            </ext:Panel>
    
    
                            <ext:Panel ID="Panel2" runat="server" Title="2 DateBtn Load" Border="true" Padding="5" Flex="1" Layout="VBoxLayout" AutoScroll="true">
                                <LayoutConfig>
                                    <ext:VBoxLayoutConfig Align="Stretch" />
                                </LayoutConfig>
                                <Items>
                                    <ext:UserControlLoader runat="server" Path="TestCtlDateBtn.ascx" UserControlID="P2DateUCLEmbed" />
                                </Items>
                            </ext:Panel>
    
    
                            <ext:Panel ID="Panel3" runat="server" Title="2 DateBtn Direct + Chain" Border="true" Padding="5" Flex="1" Layout="VBoxLayout" AutoScroll="true">
                                <LayoutConfig>
                                    <ext:VBoxLayoutConfig Align="Stretch" />
                                </LayoutConfig>
                                <Items>
                                    <ext:Button ID="P3Btn" runat="server" Html="Add 2 DateBtn DE" OnDirectClick="P3Test" />
                                </Items>
                            </ext:Panel>
    
    
                        </Items>
                    </ext:Container>
    
    
                    <ext:Container ID="Row2" runat="server" Border="true" Flex="1" Padding="5" Layout="HBoxLayout">
                        <LayoutConfig>
                            <ext:HBoxLayoutConfig Align="Stretch" />
                        </LayoutConfig>
                        <Items>
    
    
                            <ext:Panel ID="Panel4" runat="server" Title="Unlimited DE Add Dates" Border="true" Padding="5" Flex="1" Layout="VBoxLayout" AutoScroll="true">
                                <LayoutConfig>
                                    <ext:VBoxLayoutConfig Align="Stretch" />
                                </LayoutConfig>
                                <Items>
                                    <ext:Button runat="server" Text="Add Date" OnDirectClick="P4Test" />
                                </Items>
                            </ext:Panel>
    
    
                            <ext:Panel ID="Panel5" runat="server" Title="Add Button to Add to Panel2" Border="true" Padding="5" Flex="1" Layout="VBoxLayout" AutoScroll="true">
                                <LayoutConfig>
                                    <ext:VBoxLayoutConfig Align="Stretch" />
                                </LayoutConfig>
                                <Items>
                                    <ext:Button runat="server" Text="Add Date to Both Panels" OnDirectClick="P5Test" />
                                </Items>
                            </ext:Panel>
    
    
                            <ext:Panel ID="Panel6" runat="server" Title="Panel6" Border="true" Padding="5" Flex="1" Layout="VBoxLayout" AutoScroll="true">
                                <LayoutConfig>
                                    <ext:VBoxLayoutConfig Align="Stretch" />
                                </LayoutConfig>
                                <Items>
                                </Items>
                            </ext:Panel>
    
    
                        </Items>
                    </ext:Container>
    
    
                </Items>
            </ext:Viewport>
        </form>
    </body>
    </html>
    TestCtlDateBtn.ascx
    <%@ Control Language="C#" ClassName="TestCtlDateBtn" %>
    <%@ Import Namespace="Ext.Net.Ext" %>
    <script runat="server">
    	protected void Page_Load( object sender, EventArgs e ) {
            if( XExt.IsAjaxRequestNotRendering )
                return;
            // Initialize only first time
            Label1.Html = Label1.Html + this.ClientID;
        }
        protected static int wcnt = 1;
        protected void Button1_DirectClick( object sender, DirectEventArgs e ) {
            Label1.Append( " Launched Window" );
            // Make unique id non-modal window
            Page.AddDirectControl( "TestCtlWindow.ascx", "CWndw_" + this.ClientID + wcnt++.ToString(), null, true );
        }
    </script>
    <ext:Label ID="Label1" runat="server" Html="Date+Btn: " />
    <ext:DatePicker ID="Date" runat="server" />
    <ext:Button ID="Button1" runat="server"  Text="Show Window" OnDirectClick="Button1_DirectClick" />
    TestCtlWindow.ascx
    <%@ Control Language="C#" ClassName="TestCtlWindow" %>
    <%@ Import Namespace="Ext.Net.Ext" %>
    <script runat="server">
    	protected void Page_Load( object sender, EventArgs e ) {
            if( XExt.IsAjaxRequestNotRendering )
                return;
            // Initialize only first time
            Label1.Html = Label1.Html + this.ClientID;
            Wndw1.RemoveRegisteredControlOnDestroy( this );
        }
        protected void ShowAlert_DirectClick( object sender, DirectEventArgs e ) {
            Label1.Append( " Launched Alert" );
            X.Msg.Alert( "Alert", Button1.ClientID + " DirectClick" ).Show();
        }
        protected void ShowWndw_DirectClick( object sender, DirectEventArgs e ) {
            Label1.Append( " Launched Window" );
            X.Msg.Prompt( "Window", "Which Panel # do you wish to add TestCtlDateBtn via DirectMethod to (1-6)?", new JFunction("if(btn=='ok') App.direct.AddToPanel(input);", "btn", "input") ).Show();
        }
    </script>
    <ext:Window ID="Wndw1" runat="server" Title="Alert" CloseAction="Destroy">
        <Items>
            <ext:Label ID="Label1" runat="server" Html="Date+Btn: " />
            <ext:DatePicker ID="Date" runat="server" />
        </Items>
        <Buttons>
            <ext:Button ID="Button1" runat="server"  Text="Show Alert" OnDirectClick="ShowAlert_DirectClick" />
            <ext:Button ID="Button2" runat="server"  Text="Show Another Window" OnDirectClick="ShowWndw_DirectClick" />
        </Buttons>
    </ext:Window>
    TestCtlChainLoadDate.ascx
    <%@ Control Language="C#" ClassName="TestCtlChainLoadDate" 
        %>
    <%@ Import Namespace="Ext.Net.Ext" %>
    <script runat="server">
        public string AddParentLoadID { get; set; }
    
    
    	protected void Page_Load( object sender, EventArgs e ) {
            // UserControlLoader in Page Load - Load CtlDateBtn
            Panel1.Items.Add( new UserControlLoader() { Path = "TestCtlDateBtn.ascx", UserControlID = "CChnDtLd_"+ClientID, ClientIDMode = System.Web.UI.ClientIDMode.Predictable } );
            //Panel1.AddDirectControl( "TestCtlDateBtn.ascx", "CChnDtDE_", true, null, true ); // !! Bug with mappath
    
    
            // Make button1 Visible if AddParentLoad has been assigned
            if( !string.IsNullOrEmpty(Hid.Text) )
                Button1.Visible = true;
        }
        protected void Button1_DirectClick( object sender, DirectEventArgs e ) {
            var comp = (ComponentBase)Page.FindControl( Hid.Text );
            comp.AddDirectControl( "TestCtlDateBtn.ascx", "SendP2_" + ClientID, false, null, true );
            Context.Items.Remove("CtlID");
        }
    </script>
    <ext:Panel ID="Panel1" runat="server" Flex="1" Frame="true" Title="Chain" Padding="5">
        <Items>
            <ext:Hidden ID="Hid" runat="server" />
            <ext:Button ID="Button1" runat="server"  Text="Add to Another Panel" OnDirectClick="Button1_DirectClick" Visible="false" />
        </Items>
    </ext:Panel>
    <ext:Label ID="Label1" runat="server" Html="TestCtlDateBtn" />
    More tests coming for Panel 1 & 6
  7. #7
    Thank you for sharing all the code!

    Quote Originally Posted by michaeld View Post
    The remaining issues relate to child control participation in layout (i.e. between Items and Content). I need help from the Ext.Net team to get this working.
    Please clarify what should I do to reproduce the issue (-s)? Maybe, it is better to start a new forum thread for each issue and cross link.
  8. #8
    Quote Originally Posted by Daniil View Post
    Please clarify what should I do to reproduce the issue (-s)? Maybe, it is better to start a new forum thread for each issue and cross link.
    You can reproduce the issue by running TestApp. But you'll have to note the issue where I call AddDirectControl with items set to true. The added children in the User Control don't participate in layout correctly because of the new Component(). I need AddDirectControl( AbstractContainer Parent, ... ) to support layout of the children in the UserControl properly when items is passed with true. Note: I have updated the api above from ComponentBase Parent to AbstractContainer Parent. But currently, I am describing the issue here: http://forums.ext.net/showthread.php...kEvent()/page2
    Last edited by michaeld; Dec 24, 2013 at 1:27 AM.
  9. #9
    Ok, let's discuss that and find some solution first:
    http://forums.ext.net/showthread.php...l=1#post123090
  10. #10
    Okay, I posted an edit to the api above. It now properly handles layouts when items=true.
    TestApp was not changed.
Page 1 of 3 123 LastLast

Similar Threads

  1. Partial Post Back
    By hardik in forum 1.x Help
    Replies: 2
    Last Post: Apr 13, 2011, 4:46 AM
  2. Store does not retain value after post back
    By pooja in forum 1.x Help
    Replies: 1
    Last Post: Oct 15, 2010, 6:14 PM
  3. [CLOSED] [1.0] DirectEvents in Usercontrols
    By ljankowski in forum 1.x Premium Help
    Replies: 6
    Last Post: Jul 12, 2010, 9:39 AM
  4. [CLOSED] Post back issues
    By Etisbew in forum 1.x Premium Help
    Replies: 11
    Last Post: Jun 24, 2009, 9:06 AM
  5. [CLOSED] Post Back issues ????
    By dukefama in forum 1.x Help
    Replies: 2
    Last Post: Oct 08, 2008, 1:52 PM

Posting Permissions