Passing JavaScript variables between different UserControls

  1. #1

    Passing JavaScript variables between different UserControls

    Hi folks,

    I want to make a little survey how you pass javascript variables between user controls
    What is your favorite way?

    For example I have this little control (yes I know, Coolite 1.0 has resizeable Buttons :-) ):

    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="NumberInputControl.ascx.cs"
        Inherits="etask.App.Controls.GL.NumberInputControl" %>
    <%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
    
    <script type="text/javascript">
        var value = "";
    
        var addValue = function(val) {
            if (val == 'x') {
                if (value.length > 0) {
                    value = value.substring(0, value.length - 1);
                }
            }
            else {
                value += val;
            }
           
            return value;
        }
    </script>
    
    
    <ext:Panel ID="InputPanel" Width="240" runat="server">
        <Body>
            <ext:TableLayout runat="server" Columns="3">
                <ext:Cell>
                    <ext:ImageButton ID="Button1" runat="server" AlternateText="1" OverImageUrl="../../layout/pics/keypad/1_hover.png"
                        ImageUrl="../../layout/pics/keypad/1.png">
                        <Listeners>
                            <Click Handler="addValue('1');" />
                        </Listeners>
                    </ext:ImageButton>
                </ext:Cell>
                <ext:Cell>
                    <ext:ImageButton ID="Button2" runat="server" AlternateText="2" OverImageUrl="../../layout/pics/keypad/2_hover.png"
                        ImageUrl="../../layout/pics/keypad/2.png">
                        <Listeners>
                            <Click Handler="addValue('2');" />
                        </Listeners>
                    </ext:ImageButton>
                </ext:Cell>
                <ext:Cell>
                    <ext:ImageButton ID="Button3" runat="server" AlternateText="3" OverImageUrl="../../layout/pics/keypad/3_hover.png"
                        ImageUrl="../../layout/pics/keypad/3.png">
                        <Listeners>
                            <Click Handler="addValue('3');" />
                        </Listeners>
                    </ext:ImageButton>
                </ext:Cell>
                <ext:Cell>
                    <ext:ImageButton ID="Button4" runat="server" AlternateText="4" OverImageUrl="../../layout/pics/keypad/4_hover.png"
                        ImageUrl="../../layout/pics/keypad/4.png">
                        <Listeners>
                            <Click Handler="addValue('4');" />
                        </Listeners>
                        </ext:ImageButton>
                </ext:Cell>
                <ext:Cell>
                    <ext:ImageButton ID="Button5" runat="server" AlternateText="5" OverImageUrl="../../layout/pics/keypad/5_hover.png"
                        ImageUrl="../../layout/pics/keypad/5.png" >
                        <Listeners>
                            <Click Handler="addValue('5');" />
                        </Listeners>
                        </ext:ImageButton>
                </ext:Cell>
                <ext:Cell>
                    <ext:ImageButton ID="Button6" runat="server" AlternateText="6" OverImageUrl="../../layout/pics/keypad/6_hover.png"
                        ImageUrl="../../layout/pics/keypad/6.png" >
                        <Listeners>
                            <Click Handler="addValue('6');" />
                        </Listeners>
                        </ext:ImageButton>
                </ext:Cell>
                <ext:Cell>
                    <ext:ImageButton ID="Button7" runat="server" AlternateText="7" OverImageUrl="../../layout/pics/keypad/7_hover.png"
                        ImageUrl="../../layout/pics/keypad/7.png" >
                        <Listeners>
                            <Click Handler="addValue('7');" />
                        </Listeners>
                        </ext:ImageButton>
                </ext:Cell>
                <ext:Cell>
                    <ext:ImageButton ID="Button8" runat="server" AlternateText="8" OverImageUrl="../../layout/pics/keypad/8_hover.png"
                        ImageUrl="../../layout/pics/keypad/8.png" >
                        <Listeners>
                            <Click Handler="addValue('8');" />
                        </Listeners>
                        </ext:ImageButton>
                </ext:Cell>
                <ext:Cell>
                    <ext:ImageButton ID="Button9" runat="server" AlternateText="9" OverImageUrl="../../layout/pics/keypad/9_hover.png"
                        ImageUrl="../../layout/pics/keypad/9.png" >
                        <Listeners>
                            <Click Handler="addValue('9');" />
                        </Listeners>
                        </ext:ImageButton>
                </ext:Cell>
                <ext:Cell>
                    <ext:ImageButton ID="Button0" runat="server" AlternateText="0" OverImageUrl="../../layout/pics/keypad/0_hover.png"
                        ImageUrl="../../layout/pics/keypad/0.png" >
                        <Listeners>
                            <Click Handler="addValue('0');" />
                        </Listeners>
                        </ext:ImageButton>
                </ext:Cell>
                <ext:Cell>
                    <ext:ImageButton ID="ButtonDelete" runat="server" AlternateText="x" OverImageUrl="../../layout/pics/keypad/del_hover.png"
                        ImageUrl="../../layout/pics/keypad/del.png" >
                        <Listeners>
                            <Click Handler="addValue('x');" />
                        </Listeners>
                        </ext:ImageButton>
                </ext:Cell>
              
            </ext:TableLayout>
        </Body>
    </ext:Panel>

    This is a little UserControl which provides a NumPad for using in a touchscreen.
    "var value" contains the current value.

    At the moment I am assuming in my webpages (which use this control) that the "var value" exists.

    But IMHO that´s not a very good and clean coding style, because I have no IntelliSense etc. for that value.
    How do you use it? Is it maybe a better solution to use AjaxEvents or AjaxValues?

    AFAIK AjaxEvents or Values are slower, which is not very usefull for a small little NumPad-Touchscreen application.



    Regards,

    Martin
  2. #2

    RE: Passing JavaScript variables between different UserControls

    Similar to how you created a server side user control, you can create a client side control/class for this. That way you can drop more than one of this onto your page and they are all encapsulated. Your client class would simply have two functions: addValue(val) and getValue(). This will also open up more features that you can add later...such as a hiddeninput that stores the current value so it is persisted to the server on postback/ajaxevent.

    Also, this should probably be a server control and not an user control.

Similar Threads

  1. Replies: 1
    Last Post: Jul 04, 2011, 2:10 PM
  2. [CLOSED] Global Static variables usage in DirectEvents Method
    By ogokgol in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Feb 04, 2011, 2:35 PM
  3. [CLOSED] Session variables
    By webppl in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Jan 24, 2011, 11:06 PM
  4. Replies: 0
    Last Post: Aug 18, 2009, 9:42 AM
  5. How to return variables from ext window
    By bkfirebird in forum 1.x Help
    Replies: 3
    Last Post: Dec 19, 2008, 5:54 AM

Posting Permissions