[CLOSED] Problem on dynamic load user control

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] Problem on dynamic load user control

    Hi,
    my project needs to load dinamically user controls from file and add it to a panel depending from wich toolbar button is clicked; my application scenario need to do it in the OnInit even of the page (and not in the single Button's click event); then i need to do something in the Page_Load of the specific user control.
    In this scenario the "bug" is that if you want to (for example) change the text value of a TextField that is inside the usercontrol during the page load event, it doesn't work!
    During the debugging it seems to do works correctly, but the rendered output is "blank text".
    The same action done on a classic textbox .NET works intead correctly.
    I've prepared an example project, but the upload mechanism fails!How can i send you the complete project?

    Thanks in advance
    Last edited by Daniil; Dec 29, 2011 at 1:37 PM. Reason: [CLOSED]
  2. #2
    Hi,

    Please post simplified aspx and ascx directly here wrapping in [CODE ] tags (the # button in the toolbar).

    Please include code behind into:
    <script runat="server">
        //code behind
    </script>
    within aspx and ascx.
  3. #3

    RemoteAppendEventArgs event does not execute, I don't know why?

    my service page
         protected void RemoteAppend_Append(object sender, RemoteAppendEventArgs e)
            {
                e.Accept = true;
                TextFieldNavName.Focus();
                ParentNodeid = e.ParentNodeID;
            }
    html page
    
      <ext:ResourceManager runat="server" />
        <ext:Viewport runat="server" Layout="border">
            <Items>
                <ext:TreeGrid runat="server" ID="TreeGridNav" Title="导航设置" Height="500" Region="Center"
                    UseArrows="true" AutoScroll="true" Animate="true" EnableDD="true" Mode="Remote"
                    RootVisible="false" AllowLeafDrop="true" ContainerScroll="true" OnRemoteMove="RemoteMove_Moved"
                    OnRemoteRemove="RemoteRemove_Remove" OnRemoteAppend="RemoteAppend_Append">
                    <Columns>
                        <ext:TreeGridColumn Header="导航名称" Width="230" DataIndex="caption" />
                        <ext:TreeGridColumn Header="导航地址" Width="300" DataIndex="link" />
                        <ext:TreeGridColumn Header="图标" Width="100" DataIndex="icon" />
                    </Columns>
                    <Root>
                        <ext:AsyncTreeNode NodeID="0" Text="Root" Icon="ApplicationAdd" />
                    </Root>
                    <Listeners>
                        <BeforeLoad Fn="nodeLoad" />
                        <ContextMenu Fn="showMenu" StopEvent="true" />
                    </Listeners>
                </ext:TreeGrid>
                <ext:FormPanel ID="FormPanel1" runat="server" Region="East" Split="true" Margins="0 5 5 5"
                    Frame="true" Title="导航信息页面" Width="280" Icon="User" DefaultAnchor="100%">
                    <Items>
                        <ext:TextField ID="TextFieldNavName" runat="server" FieldLabel="导航名称" />
                        <ext:TextField ID="TextFieldNavAddress" runat="server" FieldLabel="导航地址" />
                        <ext:TextField ID="TextFieldNavIcon" runat="server" FieldLabel="图标" />
                        <ext:Button runat="server" ID="ButtonSave" Icon="Add" Text="保存">
                            <DirectEvents>
                                <Click OnEvent="SaveNav_Click">
                                    <EventMask Msg="保存成功" ShowMask="true" />
                                </Click>
                            </DirectEvents>
                        </ext:Button>
                    </Items>
                </ext:FormPanel>
            </Items>
        </ext:Viewport>
        <ext:Menu ID="TreeContextMenu" runat="server" EnableScrolling="false">
            <Items>
                <ext:MenuTextItem ID="NodeName" runat="server" Cls="bold-text" />
                <ext:MenuSeparator />
                <ext:MenuItem runat="server" Text="删除节点" Icon="Delete">
                    <Listeners>
                        <Click Handler="#{TreeGridNav}.removeNode(#{TreeGridNav}.menuNode);" />
                    </Listeners>
                </ext:MenuItem>
                <ext:MenuItem runat="server" Text="添加节点" Icon="Add">
                    <Listeners>
                        <Click Handler="#{TreeGridNav}.appendChild(#{TreeGridNav}.menuNode,'');" />
                    </Listeners>
                </ext:MenuItem>
    
            </Items>
            <Listeners>
                <Show Handler="#{NodeName}.el.update(this.nodeName);" />
            </Listeners>
        </ext:Menu>
    help!! tks
  4. #4
    Hi @dihaokelou,

    Please start a new forum thread.
  5. #5

    Example code

    Default.aspx :
    <%@ Page Language="C#" %>
    <%@ Import Namespace="System.Collections.Generic"%>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <script runat="server">
        /// Dynamic load control logic
        /// </summary>
        /// <param name="e"></param>
        protected override void OnInit(EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                // First load: the default interface is Panel1.ascx
                this.ShowPanel("Panel1.ascx", false);
            }
            else
            {
                // Get the call event information
                string arg = this.Request.Params["__EVENTARGUMENT"];
    
                if (arg == "Button1|event|Click")
                {
                    // User click on Button1: system load Panel1.ascx, 
                    // forcing the panel update method
                    this.ShowPanel("Panel1.ascx", true);
                }
                else if (arg == "Button2|event|Click")
                {
                    // User click on Button2: system load Panel2.ascx, 
                    // forcing the panel update method
                    this.ShowPanel("Panel2.ascx", true);
                }
                else
                {
                    // All other events, system load current panel
                    // without forcing the panel update method
                    this.ShowPanel(this.CurrentControlName, false);
                }
            }
    
            base.OnInit(e);
        }
    
        /// <summary>
        /// 
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.fieldNotInUserControl.Text = "First Load";
            }
            else
            {
                this.fieldNotInUserControl.Text = this.Request.Params["__EVENTARGUMENT"];
            }
        }
    
        /// <summary>
        /// Dynamic load control method
        /// </summary>
        /// <param name="contrlName"></param>
        private void ShowPanel(string contrlName, bool update)
        {
            // Loading usercontrol
            BaseUserControl uc1 = (BaseUserControl)this.LoadControl(contrlName);
            uc1.ID = "UC1";
            this.Panel1.ContentControls.Add(uc1);
            if (update)
            {
                // Attention: this check is for a viewstate bug
                this.Panel1.UpdateContent();
            }
    
            // Set usercontrol path on session
            this.CurrentControlName = contrlName;
        }
    
        /// <summary>
        /// Set or Get the current loaded usercontrol on interface
        /// </summary>
        private string CurrentControlName
        {
            get
            {
                if (this.Session["CurrentControlName"] != null)
                    return this.Session["CurrentControlName"].ToString();
                else
                    return string.Empty;
            }
            set
            {
                this.Session["CurrentControlName"] = value;
            }
        }
    
        /// <summary>
        /// 
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        protected void Button1_Click(object sender, DirectEventArgs e)
        {
            // Attention: the ShowPanel method cannot be called on this handler
            // this.ShowPanel("Panel1.ascx", true);
        }
    
        /// <summary>
        /// 
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        protected void Button2_Click(object sender, DirectEventArgs e)
        {
            // Attention: the ShowPanel method cannot be called on this handler
            // this.ShowPanel("Panel2.ascx", true);
        }
    </script>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title></title>
        
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="resManager" runat="server" AjaxViewStateMode="Enabled">
            </ext:ResourceManager> 
    
            <ext:TextField ID="fieldNotInUserControl" runat="server"></ext:TextField>
    
            <ext:Panel 
                ID="Panel1" 
                runat="server" 
                Width="900" 
                Height="600"
                Padding="5"
                >
                <TopBar>
                    <ext:Toolbar ID="Toolbar1" runat="server" >
                        <Items>
                            <ext:Button 
                                ID="Button1" 
                                runat="server" 
                                Text="Panel 1">
                               <DirectEvents>
                                    <Click OnEvent="Button1_Click">
                                        <EventMask Target="Page" ShowMask="true" />
                                    </Click>
                               </DirectEvents>
                            </ext:Button>
    
                            <ext:Button 
                                ID="Button2" 
                                runat="server" 
                                Text="Panel 2" >
                                <DirectEvents>
                                    <Click OnEvent="Button2_Click">
                                        <EventMask Target="Page" ShowMask="true" />
                                    </Click>
                               </DirectEvents>    
                            </ext:Button>
                        </Items>
                    </ext:Toolbar>
                </TopBar>
            </ext:Panel>
    
        </form>
    </body>
    </html>
    Widget1.ascx :
    <%@ Control Language="C#" Inherits="BaseUserControl" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
    
        /// <summary>
        /// 
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        protected void Page_Load(object sender, EventArgs e)
        {
            this.txtWidget1.Text = "Widget1.Page_Load";
        }
    
        /// <summary>
        /// 
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        protected void btnWidget1_Click(object sender, Ext.Net.DirectEventArgs e)
        {
            this.txtWidget1.Text = "Widget1.btnWidget1_Click";
        }
    
    </script>
    
    <ext:TextField ID="txtWidget1" runat="server" FieldLabel="Text Field" ViewStateMode="Enabled">
    </ext:TextField>
    
    <ext:Button ID="btnWidget1" runat="server" Text="Button" ViewStateMode="Enabled">
        <DirectEvents>
            <Click OnEvent="btnWidget1_Click">
            </Click>
        </DirectEvents>
    </ext:Button>
    Widget2.ascx :
    <%@ Control Language="C#" Inherits="BaseUserControl" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <script runat="server">
        /// <summary>
        /// 
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        protected void Page_Load(object sender, EventArgs e)
        {
            this.txtWidget2.Text = "Widget2.Page_Load";
        }
    
        /// <summary>
        /// 
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        protected void btnWidget2_Click(object sender, Ext.Net.DirectEventArgs e)
        {
            this.txtWidget2.Text = "Widget2.btnWidget2_Click";
        }
    </script>
    <ext:TextField ID="txtWidget2" runat="server" FieldLabel="Text Field" ViewStateMode="Enabled">
    </ext:TextField>
    
    <ext:Button ID="btnWidget2" runat="server" Text="Button" ViewStateMode="Enabled">
        <DirectEvents>
            <Click OnEvent="btnWidget2_Click">
            </Click>
        </DirectEvents>
    </ext:Button>
    Panel1.ascx :
    <%@ Control Language="C#" Inherits="BaseUserControl" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <script runat="server">
        protected override void OnInit(EventArgs e)
        {
            Ext.Net.ColumnLayoutConfig layoutConfig = new Ext.Net.ColumnLayoutConfig();
            layoutConfig.ScrollOffset = 20;
            layoutConfig.FitHeight = false;
    
            this.myPortal.LayoutConfig.Add(layoutConfig);
    
            Ext.Net.PortalColumn column = new Ext.Net.PortalColumn();
            column.ID = "left";
            column.StyleSpec = "padding:10px";
            column.Layout = "AnchorLayout";
    
            column.ColumnWidth = 0.50;
            this.myPortal.Items.Add(column);
    
    
            Portlet portlet = new Portlet();
            portlet.ID = "myPortlet";
            portlet.Title = "Widget 1";
            column.Items.Add(portlet);
    
            BaseUserControl uc1 = (BaseUserControl)this.LoadControl("Widget1.ascx");
            uc1.ID = "ucWidget";
            portlet.ContentControls.Add(uc1);
    
            base.OnInit(e);
        }
    
        protected void Page_Load(object sender, EventArgs e)
        {
    
        }
    
    </script>
    
    <ext:Panel 
                ID="pnlUserControl" 
                runat="server" 
                Width="500" 
                Height="300"
                Padding="5">
        <Items>
        
            <ext:Portal ID="myPortal" runat="server" Layout="ColumnLayout">
                <Items>
            
                </Items>
            </ext:Portal>
    
        </Items>
    </ext:Panel>
    Panel2.ascx :
    <%@ Control Language="C#" Inherits="BaseUserControl" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <script runat="server">
        protected override void OnInit(EventArgs e)
        {
            Ext.Net.ColumnLayoutConfig layoutConfig = new Ext.Net.ColumnLayoutConfig();
            layoutConfig.ScrollOffset = 20;
            layoutConfig.FitHeight = false;
    
            this.myPortal.LayoutConfig.Add(layoutConfig);
    
            Ext.Net.PortalColumn column = new Ext.Net.PortalColumn();
            column.ID = "left";
            column.StyleSpec = "padding:10px";
            column.Layout = "AnchorLayout";
    
            column.ColumnWidth = 0.50;
            this.myPortal.Items.Add(column);
    
    
            Portlet portlet = new Portlet();
            portlet.ID = "myPortlet";
            portlet.Title = "Widget 2";
            column.Items.Add(portlet);
    
            BaseUserControl uc1 = (BaseUserControl)this.LoadControl("Widget2.ascx");
            uc1.ID = "ucWidget";
            portlet.ContentControls.Add(uc1);
    
            base.OnInit(e);
        }
    
        protected void Page_Load(object sender, EventArgs e)
        {
    
        }
    
    </script>
    <ext:Panel 
                ID="pnlUserControl" 
                runat="server" 
                Width="500" 
                Height="300"
                Padding="5">
        <Items>
        
            <ext:Portal ID="myPortal" runat="server" Layout="ColumnLayout">
                <Items>
            
                </Items>
            </ext:Portal>
    
        </Items>
    </ext:Panel>
    BaseUserControl.cs :
    using System.Collections.Generic;
    using System.Web.UI;
    
        public class BaseUserControl : UserControl
        {
            public virtual List<string> ControlsToDestroy
            {
                get
                {
                    // we should return none lazy controls only because lazy controls will be autodestroyed by parent container
                    return new List<string>();
                }
            }
        }
    Last edited by andreasperanza; Dec 21, 2011 at 12:45 PM. Reason: Name's files corrected and added the BaseUserControl.cs
  6. #6
    I'm a bit confused about the names of files.

    For example, I see two "Widget2.aspx".

    Also some of them are named with ".aspx", but there is
    <%@ Control Language="C#" Inherits="BaseUserControl" %>
    at the top, so, it should be ".ascx".

    Please edit your post applying respective changes.
  7. #7
    Sorry, now the code is correct.

    Quote Originally Posted by Daniil View Post
    I'm a bit confused about the names of files.

    For example, I see two "Widget2.aspx".

    Also some of them are named with ".aspx", but there is
    <%@ Control Language="C#" Inherits="BaseUserControl" %>
    at the top, so, it should be ".ascx".

    Please edit your post applying respective changes.
  8. #8
    Thanks, I was able to run the application.

    Please provide us with the exact steps to reproduce the problem.
  9. #9
    Quote Originally Posted by Daniil View Post
    Thanks, I was able to run the application.

    Please provide us with the exact steps to reproduce the problem.

    I've attaches 4 images; img1 display the start situation; then if you click on Panel1 the TextField of Widget 1 is empty, instead of the text Widget1.Page_Load" (setted on page_load of Widget1.ascx).
    Img3 show the click on panel2 (the textfield is empty...), and img4 show the textfield of widget2 filled with "Widget2.btnWidget2_Click" on the clickof the button.
    In the top side you can see a simple text box that instead refresh correctly showing the value setted on page_load of default.aspx
    Attached Thumbnails Click image for larger version. 

Name:	Img1.png 
Views:	99 
Size:	82.1 KB 
ID:	3599   Click image for larger version. 

Name:	Img2.jpg 
Views:	84 
Size:	65.5 KB 
ID:	3600   Click image for larger version. 

Name:	Img3.png 
Views:	84 
Size:	58.5 KB 
ID:	3601   Click image for larger version. 

Name:	Img4.png 
Views:	79 
Size:	59.3 KB 
ID:	3602  
  10. #10
    I think you should use a Page_Init handler instead of the Page_Load one in Widget1.ascx and Widget2.ascx.

    Example
    protected void Page_Init(object sender, EventArgs e)
    {
        this.txtWidget1.Text = "Widget1.Page_Load";
    }
Page 1 of 2 12 LastLast

Similar Threads

  1. How to load dynamic user controls on desktop shortcut?
    By laphuynhkien in forum 2.x Help
    Replies: 4
    Last Post: Aug 23, 2012, 5:58 PM
  2. Replies: 2
    Last Post: Feb 06, 2012, 9:06 AM
  3. [CLOSED] Dynamic loaded user control height problem
    By Suntico in forum 1.x Legacy Premium Help
    Replies: 10
    Last Post: Jun 27, 2011, 8:54 AM
  4. how to load user control ondemand.
    By Satyanarayana murthy in forum 1.x Help
    Replies: 2
    Last Post: Jun 17, 2010, 7:40 AM
  5. [CLOSED] Dynamic load user controls in Opera
    By Timur.Akhmerov in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: May 06, 2010, 2:49 AM

Posting Permissions