Client Callbacks With Master Pages

Question

I'm following this example: http://msdn.microsoft.com/en-us/library/ms178210.aspx

And I can get it to work with just a single page and a code behind, but when I add a masterpage, the examples doesn't work properly. Within my master page, I have a head content section and a body content section. It's nothing fancy.

How do i do client callbacks with master pages?

Answer 1

I got it to work.

Be sure that you amend this code to account for the MasterPage contentId prefix:

function LookUpStock()
{
    var lb = document.getElementById("MASTERPAGEPREFIX_" + "ListBox1");
    var product = lb.options[lb.selectedIndex].text;
    CallServer(product, "");
}

function ReceiveServerData(rValue)
{   
    document.getElementById("MASTERPAGEPREFIX_" + "ResultsSpan").innerHTML = rValue;
}

Answer 2

A more scalable approach would be to use the following syntax (replace the ResultsSpan with an aspx Panel too)...

function LookUpStock()
{
    var lb = document.getElementById('<%=ListBox1.ClientID%>');
    var product = lb.options[lb.selectedIndex].text;
    CallServer(product, "");
}

function ReceiveServerData(rValue)
{   
    document.getElementById('<%=ResultsSpan.ClientID%>').innerHTML = rValue;
}

This way, if the name (or actual page) of the MasterPage changes the code will still work.

Basically the ASP.NET process parses the page and replaces the <%=%> directives with the correct name of the control on the client.

This approach will also work if you have nested controls. In your example, if you had a control nested inside another panel the rendered id could look something like MASTERPAGEPREFIX_CONTAINERCONTOLNAME_ListBox1 and then your work around would fail.

As a general principle its normally considered a bad idea to "hard code" client side ids in your markup - let the ASP.NET process handle it for you