PDA

View Full Version : Passing JavaScript variables between different UserControls



macap
Dec 22, 2009, 10:44 AM
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

jchau
Dec 22, 2009, 11:08 AM
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.