[CLOSED] Calling UserControl Methods from parent form (Javascript)

  1. #1

    [CLOSED] Calling UserControl Methods from parent form (Javascript)

    I have added code to help test my forms (a lot of fields) by filling out default values. My form has fields on the main forms (aspx) and 2 user controls (ascx). Daniil originally helped by answering the question "How can I Call UserControl Methods from parent form.

    After following his suggestion and implementing everything, I realized I really wanted to do this from the client side (javascript) instead of the server side. Is there a way to call a javascript funtion on a user control from the main page?

    Example Page
    <%@ Page Language="C#" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
       <script type="text/javascript">
          var FilloutTesting = function () {
             TextArea.setValue("Hello!");
    
             //How to call other usercontrols to fillout their testing values.
          }
       </script>
    
    <!DOCTYPE html>
    <html>
    
       <head runat="server">
          <title>Ext.NET v2 Example</title>
       </head>
    
       <body>
          <ext:ResourceManager runat="server" />
          <ext:UserControlLoader ID="UserControlLoader1" runat="server" Path="TestUC.ascx" />
          <ext:TextArea runat="server" ID="TextArea" EmptyText="Please Fill out ..." />
          <ext:Button runat="server" Text="Apply defaults">
             <Listener>
                <Click Fn="FilloutTesting >
             </Listener>
       </body>
    </html>

    Example User Control
    <%@ Control Language="C#" ClassName="TestUC" %>
       <script type="text/javascript">
          var FilloutTesting = function () {
             Label1.text = "Hello!";
          }
       </script>
    
       <ext:Label ID="Label1" runat="server" />
    Last edited by geoffrey.mcgill; Sep 28, 2012 at 3:44 PM. Reason: [CLOSED]
  2. #2
    Hi Chris,

    UserControlLoader retrieves Ext.NET components from a user control. It doesn't render scripts. Please use HtmlBin.

    To avoid overriding you can share a function in some namespace.

    Example Page
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Ext.NET v2 Example</title>
    
        <script type="text/javascript">
            var applyDefaults = function () {
                App.TextArea1.setValue("Hello from Page!");
                TestUC1.applyDefaults();
                TestUC2.applyDefaults();
            };
        </script>
    </head>
    <body>
        <ext:ResourceManager runat="server" />
    
        <ext:UserControlLoader runat="server" Path="TestUC1.ascx" UserControlID="TestUC1" />
        <ext:UserControlLoader runat="server" Path="TestUC2.ascx" UserControlID="TestUC2" />
    
        <ext:TextArea ID="TextArea1" runat="server"  EmptyText="Please Fill out ..." />
    
        <ext:Button runat="server" Text="Apply defaults">
            <Listeners>
                <Click Fn="applyDefaults" />
            </Listeners>
        </ext:Button>
    </body>
    </html>
    Example TestUC1
    <%@ Control Language="C#" %>
    
    <ext:Container runat="server" Hidden="true">
        <HtmlBin>
            <ext:XScript runat="server">
                <script type="text/javascript">
                    var TestUC1 = {
                        applyDefaults : function () {
                            #{Label1}.setText("Hello from TestUC1!");
                        }
                    };
                </script>
            </ext:XScript>
        </HtmlBin>
    </ext:Container>
    
    <ext:Label ID="Label1" runat="server" />
    Example TestUC2
    <%@ Control Language="C#" %>
    
    <ext:Container runat="server" Hidden="true">
        <HtmlBin>
            <ext:XScript runat="server">
                <script type="text/javascript">
                    var TestUC2 = {
                        applyDefaults : function () {
                            #{Label1}.setText("Hello from TestUC2!");
                        }
                    };
                </script>
            </ext:XScript>
        </HtmlBin>
    </ext:Container>
    
    <ext:Label ID="Label1" runat="server" />
    Please note if you will use the same user control twice, you should avoid JavaScript overriding. Here is the discussion.
    http://forums.ext.net/showthread.php?13522
  3. #3
    Works like a champ. Please close the thread.

Similar Threads

  1. [CLOSED] Calling UserControl Methods from parent form
    By cwolcott in forum 2.x Legacy Premium Help
    Replies: 5
    Last Post: Sep 27, 2012, 4:06 PM
  2. [CLOSED] Loading UserControl window from Parent Form throwing error
    By rnachman in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Mar 10, 2011, 3:43 PM
  3. [CLOSED] error when calling ajax methods or taskmanager
    By LeeTheGreek in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Nov 04, 2009, 7:08 AM
  4. Problem calling methods
    By Argons in forum 1.x Help
    Replies: 5
    Last Post: Aug 03, 2009, 2:04 AM
  5. Replies: 1
    Last Post: Apr 15, 2009, 3:35 PM

Posting Permissions