Bashmohandes

Javascript tricks for ASP.net developers

This is a post I wanted to write really long time ago, but I never had enough time to sit and write.
The following listing will be my agenda for this post

1. Why Javascript for ASP.net developers is different ?
2. Javascript tricks for ASP.net developers
• Reading ASP.net controls values from Javascript
• Passing values calculated by Javascript to the server side.
• Passing values from ASP.net to Javascript
  
3. Javascript development tools

So let's go through the previous points and see if this will be interesting enough for you to read it to the end.

Why Javascript for ASP.net developers is different ?

The first difference between ASP.net and other web technologies that it has its own web controls which sometimes map to standard HTML controls, so sometimes what you see in ASP.net as a control doesn't mean that it will be rendered as one control in the final HTML which means that Javascript can't deal with it directly as it does with basic control.
Taking the ASP.net Calendar control as an example, in ASP.net you use it as one control just drag it and drop it in the page and boom! you have a full functional calendar, but in reality this calendar renders as a Table with rows and columns and links and also lots of Javascript, so you can't expect that you will deal with it as a calendar in the Javascript side, this also applies to Repeater, Grid, DataList ... etc

The second difference is that even with asp.net server controls that maps directly to standard HTML controls like TextBox or Button, the asp.net runtime changes the control Id's so if placed a code like this in your ASP.net page directly

<asp:TextBox ID="myTextBox" runat="server"></asp:TextBox>

the rendered equivalent HTML will look like this

<input type="text" id="myTextBox" name="myTextBox"/>

As you can see the asp:TextBox id is the same as the input text id which is "myTextBox", but watch out, if you put the previous asp:TextBox in a UserControl instead of adding it directly to the page, and then added the UseControl to the page like this lets name our usercontrol "MyControl"

<uc1:MyControl ID="MyControl1" runat="server" />

the rendered equivalent HTML will look like this

<input type="text" id="MyControl1_myTextBox" name="MyControl1$myTextBox"/>

As you can see the rendered input field Id is not "myTextBox" but it is a combination of the usercontrol id and the textbox id separated by underscore "_" and the name of the control is similar but separated by dollar sign "$".
So that's why you will face some difficulties when you try to use document.getElementById on the "myTextBox" because the name is not known until the page renders.

Javascript tricks for ASP.net developers

Reading ASP.net Controls Values from Javascript
I think now you have seen the problem and it is time for the solution so let's see the basic solutions for most of Javascript problems with ASP.net.
The solutions comes from the fact that almost all ASP.net controls have a property called ClientID which returns the Id of the rendered equivalent HTML control. so in our last Example the myTextBox.ClientID will return "MyControl1_myTextBox" so you can apply the document.getElementById , buy wait a second how could I get this property value inside my Javascript code ?
This will require writing some ASP classic style code to this job inside the javascript so let's see how our UserControl code will look like

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="MyControl.ascx.cs" Inherits="MyControl" %>
<script type="text/javascript">
function myFunc()
{
    var myTextBox = document.getElementById("<%= myTextBox.ClientID %>");
    myTextBox.value = "value from JS";
}
</script>
<asp:TextBox ID="myTextBox" runat="server"></asp:TextBox>
<input type="button" value="Click" onclick="myFunc()" />

So if you have a look into the myFunc function
the document.getElementById parameter is actually a asp.net code which is written  <%= myTextBox.ClientID %>
and this how myFunc code will be in the browser.

<script type="text/javascript">
function myFunc()
{
 var myTextBox = document.getElementById("MyControl1_myTextBox");
 myTextBox.value = "value from JS";
}
</script>

so the asp.net code between the <%%> is executed and the property ClientID was evaluated.

Passing values calculated by Javascript to the server side
Yeah this is very important, sometimes you calculate some values or get some inputs from the user using Javascript code but you want to process these result in the backend, and you find yourself asking this question, how can I send those results back to the asp.net ?
The answer is simple use your best friend The HiddenField.
Write all your results in the hidden field BUT make sure that this hidden field is either a asp:HiddenField or a regular input type="hidden" field with runat="server" attribute, so the asp.net runtime picks its value from the form and post it to the field in the backend.

Passing values from ASP.net to Javascript
Sometimes you need to pass values or initialize some variables in javascript using code behind, in this case you need to use your other friend the Literal Control
The literal control is amazing because it simply renders to nothing but the values inside, so it doesn't render to Span like Label or div like Panel, so take this example

<asp:Literal runat="server" ID="litData">My Text</asp:Literal>

This code will render to this

My Text

Consider the example when you need to use the server date in the client javascript code, because the javascript Date function returns the client date so sometimes you need to use the Server time not the client time, so this is a way to do it using the Literal trick.
in your asp.net markup code define a similar javascript block

<script type="text/javascript">
var serverDate = '<asp:literal runat="server" id="litServerDate" ></asp:literal>';
</script>

and then in your Page_Load code you can do this

protected void Page_Load(object sender, EventArgs e)
{
    litServerDate.Text = DateTime.Now.ToShortDateString();
}

In the javascript code you define a variable which takes its value from a literal control, the literal control is your connection to the backend code,
the backend code puts the data inside the literal and completes the javascript sentence, so the result javascript will look like this

<script type="text/javascript">
var serverDate = '6/17/2007';
</script>

So the literal is gone and the result is just the date string provided by the server, which you can use later to do whatever you want.

Javascript development tools
If you decided to write some code in Javascript so be ready and use the proper tools

1. First of all I prefer you develop your code on FireFox because it is more strict and if you made your code run fine on FireFox most probably it will run fine on every other browser.
2. Second you need Debugger so I strongly recommend FireBug which is an addin to FireFox which has lots of useful tools one of those tools is a Javascript debugger
3. Visual Studio is a good IDE however there is another IDE especially dedicated to Javascript which is APTANA , aptana also provides a debugger for FireFox  so you can use Aptana debugger to debug your javascript running in FireFox
   

So that's what I could write in a single post, soon I will post some hints and tricks for developers to make it easier for them to write AJAX applications without using UpdatePanel.
Have fun.