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 acplish 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 bee 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 bee 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 bee 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 acplish 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 plicated than necessary, especially as I'm new to ajax, 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?

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 acplish 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 bee 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 bee 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 bee 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 acplish 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 plicated than necessary, especially as I'm new to ajax, 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?

• javascript
• c#
• html
• asp
• html-table

4 Answers 4

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;");

}

You can do something like that

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

and in the code behind

infoSearchTable.Attributes.Add("class", "yourclass");

in youe .css

.yourclass{display:none;}

Once you add runat="server" to an element, you have to reference it by the ClientID in JavaScript:

var table = document.getElementById("<%=infoSearchTable.ClientID%>");
if (table){
    table.style.display = "none";
}

In ASP.NET when you use runat=server it takes your ID and modifies it to include other information from your program, I forget exactly what but I think the master page or namespace or something to make it unique. Your getElementByID() need to be changed to include all that other information (view source on a page to get the actual ID) or use a javascript framework like JQuery that has advanced selectors for finding elements on a page.