client side javscript and ASP.NET controls

  • Thread starter Thread starter francois
  • Start date Start date
F

francois

hi,

In my ASP.NET page i have
2 ASP.NET TextBox and one hidden field like this following.

<asp:textbox id="TextBoxOne" Runat="server"></asp:textbox>
<asp:textbox id="TextBoxTwo" Runat="server"></asp:textbox>
<input id="InputHiddenPrice" runat="server" type="hidden">

Bascially what I want to achieve is that when I put a value inside the
TextBoxOne, I want that a value is automatically displayed in TextBoxTwo
that would be something like
TextBoxTwo.Text = TextBoxOne.Text * InputHiddenPrice.Value
(here i do not take the eventual type casting problem, it is just to explain
what i want to achieve).

Is there someone that can point me out what event handler i need to use in
the TextBoxOne? I tried to put
<asp:textbox id="TextBoxOne" Runat="server"
OnTextChanged="JavascriptMethod()></asp:textbox> but it brings a aspx
exception when i run it (it cannot compile the aspx).

How can i solve this and basically my question is how to use javascript with
server side controls? And what kind of event I need to use in my case?

I hope my problem is explained cleared enough

Best regards and thanks in advance.

Francois
 
Hi Chris,

Thank you so much for your very precise answer, I understand everything now.
The only trouble I have is that the onafterupdate event does not work
properly or does not fire when I expect. Seem

Now I use the onchange event.
Nevertheless for that event, I need to click somewhere else on my form (to
fire the event and then call the javascript).

What I would like to achieve is that I do not need to click anywhere or move
the mouse anywhere for having that javascript method called. I assume that
the event should detect any character i input and fire.

Like if I type 1054
it should fire when i type 1 (call the javascript fucntion with the value of
the TExtBox =1)
then when I type 0 (call the javascript fucntion with the value of the
TExtBox = 10)
then when I type 5 (call the javascript fucntion with the value of the
TExtBox = 105)
then when I type 4 (call the javascript fucntion with the value of the
TExtBox = 1054)
This to achieve a real time evaluation of my textbox value.

Now I understand this is more to do with javascript than .Net but I looked
in the SDK doc and I could not find an event doing that. Maybe I am too
newbie in Javascript and I do not see it or maybe this kind of functionality
need some smarter trick... Anyway it would be great if you could help me
once more and if you do not know maybe point me out to a website or
newsgroup that would have that information. I would try to googlize on this
by myself but it is not easy to find that kind of info on a search engine.

Many thanks again,

Francois.
 
What you must understand is that you have code executing in two different
places, and with two different environments. If you are working with a
TextBox object, then you are working with a .NET object on the server.
Changing values using these objects happens only on the server, and will
require a server round trip. Furthermore, you are only allowed to use
methods on these objects that are supported by the object model on the
server, which you are doing, but you are then trying to invoke a method that
does not exist on the server, which throws an error.

Now, what a server control eventually does is emit DHTML code, and it is in
this DHTML code that you can inject some javascript calls. You don't get to
write it declaratively. Rather, you have to take the TextBox object and use
Attributes.Add to include an attribute that gets rendered to the client. So,
for your example, you would have:

TextBox1.Attributes.Add("onafterupdate", "JavascriptMethod()");

Note that here you are using the object model of <input type="text" /> for
your event handlers - check the SDK for a list of your options here.

Now, you will call this Javascript method on the client. Keep in mind,
however, that the client has absolutely no knowledge of the TextBox1 object,
so you can't just code directly against that. You are limited to Javascript
accessing HTML objects using the DOM. To find this specific controls, you
can have TextBox1 emit its ClientID (it is a property of the control) and
inject this into your method call, which can then find an element by ID and
do the necessary copying.
 
Back
Top