[CLOSED] Dynamic usercontrol and execute javascript

  1. #1

    [CLOSED] Dynamic usercontrol and execute javascript

    I have a page with a masterpage, within the page a button with a directevent which loads a usercontrol. In that usercontrol I have a window with a button.
    When I click the button in the window I want to execute a javascript function defined in the usercontrol.
    The problem is when I click the button I get a javascript Error: 'showAlert' is undefined also the window icon is not rendered.

    Hoe can I load a usercontrol dynamically which contains a window into a child page and use javascript within the usercontrol?

    masterpage.aspx
    <%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!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 runat="server">
        <title></title>
        <ext:resourceplaceholder runat="server" />
    </head>
    <body>
        <ext:resourcemanager runat="server" id="ResourceManager1" idmode="Explicit" />
        <form id="form1" runat="server">
        <div>
            <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
            
            </asp:ContentPlaceHolder>
        </div>
        </form>
    </body>
    </html>
    Default.aspx
    <%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" 
    Inherits="Default" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <%@ Register TagPrefix="uc1" TagName="WebUserControl" Src="WebUserControl.ascx" %>
    
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
        <ext:panel id="MainPanel" runat="server" height="300" title="Title">
                <Items>
                    <ext:Button ID="btnOpen" runat="server" Text="Submit">
                        <DirectEvents>
                            <Click OnEvent="OpenClicked" />
                        </DirectEvents>
                    </ext:Button>
                </Items>
        </ext:panel>
    </asp:Content>
    Default.aspx.cs
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using Ext.Net;
    
    public partial class Default : System.Web.UI.Page
    {
        public void OpenClicked(object sender, Ext.Net.DirectEventArgs e)
        {
            var ctl = (WebUserControl)Page.LoadControl("WebUserControl.ascx");
            MainPanel.ContentControls.Add(ctl);
            ctl.Render();
        }
    }
    WebUserControl.ascx
    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="WebUserControl.ascx.cs" Inherits="WebUserControl" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script>
        function showAlert() {
            alert("test");
        }
    </script>
    
    <ext:Window ID="popupwindow" runat="server" Collapsible="true" Height="185" Icon="Application" Title="Title" Width="350" 
      InitCenter="false">
        <Items>
            <ext:Button runat="server" Text="Alert">
                <Listeners>
                    <Click Handler="showAlert()" />
                </Listeners>
            </ext:Button>
        </Items>
    </ext:Window>
    WebUserControl.ascx.cs
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    
    public partial class WebUserControl : System.Web.UI.UserControl
    {
     
        public void Render()
        {
            this.popupwindow.Render();
        }
    }
    Last edited by Daniil; May 31, 2011 at 10:53 AM. Reason: [CLOSED]
  2. #2
    Hi,

    When you call .Render() for the Window, it does render only that Window and no more like <script>. So, your function is absent on client side.

    To render the whole content of the user control during DirectEvent, please use .UpdateContent().

    Here is the working and minimized example.

    Master Page
    <%@ Master Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <!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 runat="server">
        <title>Ext.Net Example</title>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server" />
        </form>
    </body>
    </html>
    Content Page
    <%@ Page Language="C#" MasterPageFile="Master.Master" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        public void OpenClicked(object sender, Ext.Net.DirectEventArgs e)
        {
            TestUC ctl = (TestUC)Page.LoadControl("TestUC.ascx");
            this.Container1.ContentControls.Add(ctl);
            this.Container1.UpdateContent();
        }
    </script>
    
    <asp:Content ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
        <ext:Panel runat="server" Height="300" Title="Title">
            <Items>
                <ext:Container ID="Container1" runat="server" />
                <ext:Button runat="server" Text="Submit">
                    <DirectEvents>
                        <Click OnEvent="OpenClicked" />
                    </DirectEvents>
                </ext:Button>
            </Items>
        </ext:Panel>
    </asp:Content>
    TestUC.ascx
    <%@ Control Language="C#" ClassName="TestUC" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script type="text/javascript">
        var test = function() {
            alert("test");
        }
    </script>
    
    <ext:Window 
        runat="server" 
        Icon="Application" 
        Title="Title" 
        CloseAction="Close">
        <Items>
            <ext:Button runat="server" Text="Alert">
                <Listeners>
                    <Click Handler="test()" />
                </Listeners>
            </ext:Button>
        </Items>
    </ext:Window>
  3. #3
    Thanks Daniil, that worked.
    Except if I set the IDMode to Explicit on the ResourceManager in the masterpage (like in my example), then I get the javascript error: 'ContentPlaceHolder1_Container1' is undefined. But if I set the IDMode to Explicit on Container1 (on the childpage) also, it works again...strange.
    Mark as solved.
  4. #4
    There is IDMode="Client" for the dynamic controls, it's not inherited from a parent. So, there is a conflict.

    You can resolve it setting "Explicit" for the container.
    public void OpenClicked(object sender, Ext.Net.DirectEventArgs e)
    {
        TestUC ctl = (TestUC)Page.LoadControl("TestUC.ascx");
        this.Container1.ContentControls.Add(ctl);
        this.Container1.IDMode = IDMode.Explicit;
        this.Container1.UpdateContent();
    }

Similar Threads

  1. Replies: 12
    Last Post: Sep 20, 2011, 2:33 PM
  2. Replies: 0
    Last Post: Mar 29, 2011, 3:59 PM
  3. [CLOSED] Execute javascript from Masterpage child
    By tjbishop in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Aug 11, 2010, 8:32 AM
  4. [CLOSED] Javascript Error loading dynamic usercontrol 1.0
    By SymSure in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Apr 01, 2010, 3:05 AM
  5. Dynamic grid in usercontrol
    By methode in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Dec 04, 2008, 4:55 PM

Posting Permissions