ASP.NET AJAX $get function

In an older post, we talked about ASP.NET AJAX. We saw how we can use the UpdatePanel control to execute code on the server and update only a section of the page.

We mentioned that the ScriptManager control is all we need to add to our page to enable AJAX.

Behind the scenes, the ScriptManager makes the browser download several JavaScript files with code that will allow it to communicate with the server asynchronously and partially render the page.

Since the JavaScript code is available to the whole page, we can access these functions from the page with our own JavaScript code.

A JavaScript function contained in ASP.NET AJAX that is very helpful is $get().

We can use $get() instead of document.getElementById() to find an element in the page’s DOM by its id. The advantage is that $get works with most modern browsers.

The next sample uses $get to change the style of a div with the id “container”.

<script type="text/javascript">
        function changeColorAndSize() {
            $get('container').style.backgroundColor = "Red";
            $get('container').style.height = "200px"
            $get('container').style.width = "300px";
        }
    </script>

    <div id="container" style="height: 100px; width: 200px; background-color: Blue;"></div>
    <asp:Button ID="Button1" runat="server" Text="Click Me" OnClientClick="changeColorAndSize(); return false;" />

Now, if we change the div to run on the server, its ID would change to something like MainContent_container when ASP.NET generates the html for the page. ASP.NET does this so we can repeat control names in our different pages, master pages and user controls, without interfering with each other when the final html is rendered to the browser.

So to find the div, we would need to do something like this.

<script type="text/javascript">
        function changeColorAndSize() {
            $get('<%= container.ClientID %>').style.backgroundColor = "Red";
            $get('<%= container.ClientID %>').style.height = "200px"
            $get('<%= container.ClientID %>').style.width = "300px";
        }
    </script>

    <div id="container" runat="server" style="height: 100px; width: 200px; background-color: Blue;"></div>
    <asp:Button ID="Button1" runat="server" Text="Click Me" OnClientClick="changeColorAndSize(); return false;" />

The delimiter <%= => allows us to execute a line of code, and the result replaces the whole code block before rendering the page. We use these delimiters to get the id that will be sent to the browser using the ClientID property.

The browser will get this code when running the web application.

function changeColorAndSize() {
            $get('MainContent_container').style.backgroundColor = "Red";
            $get('MainContent_container').style.height = "200px"
            $get('MainContent_container').style.width = "300px";
        }

The $get function and the delimiter <%= %> are very useful when working with pages that require a lot of custom behavior using JavaScript.