Brennan’s Blog

Developing an ASP.NET AJAX application can be a difficult when the Javascript source is dynamically included with the page. Embedding the Javascript within a page or a user control causes the location of the source to move around which makes it hard to set breakpoints. It also means the code cannot be reused in other pages as easily as an external source file. But the trick is giving the external source file the information it needs to instrument the page, such as defining a variable with the ID of a control. Within a page you could normally set the variable to the ClientID of the control.

<script type="text/javascript">
var contentPanelId = '<%= ContentPanel1.ClientID %>';
</script>

The problem I had with placing the variable declaration within the page is how it is not rendered if it is in a MultiView and is not the View which is displayed when the page is initially loaded. I posted a question on the forums and got a few suggestions. I tried it out and and posted the live sample project. The code below is what makes it work.

protected void Page_Load(object sender, EventArgs e)
{
    if (!Page.ClientScript.IsClientScriptBlockRegistered("vars"))
    {
        Page.ClientScript.RegisterClientScriptBlock(GetType(),
            "vars", "var contentPanelId = '" + ContentPanel1.ClientID + "';", true);
    }
}

Now it is much easier to set breakpoints in Firebug and when Visual Studio 2008 is out it should be easier to edit the Javascript with the new Javascript features.