Question

I am working on website using ajax and C#. I started learning these languages a couple months ago, so I’m not always sure what the best practice is to accomplish things.

I have a form in which certain controls need to be hidden or shown depending on the user’s action. It starts out showing an “id” field (along with other fields), but if the user doesn’t know their id, they click a link which causes the “id” field to become hidden and displays a table that contains additional controls and a “find” button. I am currently using Javascript to handle the click and hide/display the controls:

function showSearchTable() {
    document.getElementById('IDNumberRow').style.display = 'none';
    document.getElementById('DontKnowId').style.display = 'none';
    document.getElementById('infoSearchTable').style.display = 'block';
}

When the “find” button is clicked, the application attempts to look up the additional info in the database and tells the user the result. As a result of the server call, the page is re-loaded, which causes the table to become hidden again. Here’s my problem: if the phone number cannot be found, I would like to keep the table visible so that the user can correct any mistakes.

I have tried adding code that makes the table hidden to the code-behind so that the post-back won’t cause the table to become invisible:

protected void Page_Load(object sender, EventArgs e)
{
    if(!Page.IsPostBack)
    {
        infoSearchTable.Visible = false;
    }
}

However, as the table now contains the attribute runat=”server” in order to see it in the c# code, I can’t seem to reference it in my javascript code in order to set it visible from the client. I tried this for the javascript:

function showSearchTable() {
    document.getElementById('IDNumberRow').style.display = 'none';
    document.getElementById('DontKnowId').style.display = 'none';

    var infoSearch = document.getElementById('<%=infoSearchTable.ClientID%>');
    infoSearch.style.display = 'block';
}

and the table’s html:

<table id="infoSearchTable" runat="server">
....table rows/columns containing controls
</table>

but I get an error saying that ‘infoSearch’ is null.

I think I’d be able to accomplish both tasks (set hidden table visible with Javascript, but keep it visible on post back) myself, but I think that my code would end up being more complicated than necessary, especially as I’m new to ajax, .net and C#. So I’m looking for advice – Am I on the right track? Did I use something the wrong way? Is there another way to do this?

Answer 1

if(!Page.IsPostBack)
{
    infoSearchTable.Visible = false;
}

I think this will stop the control being sent back to the client (hence the null reference) – try something like:

if(!Page.IsPostBack)
{
    infoSearchTable.Attributes.Add("style", "display: none;");

}