Javascript and Code-behind

Javascript gives you endless posibilities to create beautiful visual effects in web-pages. But Javascript is executed client-side. While updating data on the Essence framework is done server-side. There is a simpe way though to do something server-side when a Javascript is executed. In this post I will show an example of that. You can see the example here and click one of the boxes to see the effect. You can download the source code of this example on our website.

The basics of this example

For this example I created a table with 3 rows and 3 columns. Giving us a grid of 9 boxes. I've styled this grid using some CSS. Instead of adding ID and an onclick function to each TD inline, I used some Javascript. Each cell in the mainTable Table can be found using the getElementsByTagName function:

var table = document.getElementById('mainTable');
var cells = table.getElementsByTagName("td");
for (var i = 0; i < cells.length; i++) {
cells[i].id = (i + 1).toString();
cells[i].onclick = function () { moveDiv(this.id); };
document.getElementById((i + 1).toString()).innerText = (i + 1).toString();
}

Here's the function that is executed when clicking on of the TD's:

function moveDiv(elementID) {
document.getElementById('hfSelectedID').value = elementID;
var td = document.getElementById(elementID);
var content = document.getElementById('divContent');
td.innerHTML = '<span style="font-size: 12px;">moving</span><br/>';
content.innerText = elementID;
td.appendChild(content);

var clickButton = document.getElementById('btnUpdate');
clickButton.click();
}

First thing that is done is setting the value of an asp:HiddenField that has the attribute runat="server", so that it can be accessed server-side. Furthermore it get the TD and the DIV that is displayed as a circle. Using appendChild the DIV is "moved" into the selected TD.

Move to the server-side

So far, everything is happening client-side. But now we want to do something server-side. To do that, there is also an asp:Button on the page. You cannot see that because it is in a span with display: none. If you bring up the source of the page using Ctrl+U, you can see it is really there.

Now we don't want the user to have to click this button. We want to do it straight-away when the Javascript function is executed. So through javascript we raise the button click event. First we get the button, than we click on it:

var clickButton = document.getElementById('btnUpdate');
clickButton.click();

What happens server-side

Since we set the ID of the TD that's clicked, we can do whatever we want with it on the server-side. For this example I did nothing really complicated with it. Just setting an asp:Label in the page to demonstrate that something really happened server-side.

protected void btnUpdate_Click(object sender, EventArgs e)
{
lblCurrentPosition.Text =
   "<h1>The circle is currently in box " + hfSelectedID.Value + "</h1>";
}

Now this is pretty simple. But you can imagine doing all kinds of stuff using the Essence Framework, like creating data or send something from your website to a webservice. Just use a hidden button and use the click event to do whatever you need to do server-side.

That's it for this post. Feel free to leave a comment or send a question to andre@silveressence.net. Let me know if you got inspired and may the source be with you!