Hiding/Showing an html table with C# and Javascript

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?

iandayman · Accepted Answer · 2011-11-04 16:14:22Z

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

}

answered Nov 4, 2011 at 16:14

iandayman

4,50734 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

purplecat Over a year ago

That seemed to be my problem. <%=infoSearchTable.ClientID%> is not null anymore in the javascript. I still have the problem of the post-back causing the info-table to become hidden. But I think I can fix that on my own, now that I can access the table element from both C# and javascript.

purplecat Over a year ago

Thanks for this answer. It led me in the right direction and now I'm able to hide/show the table like I wanted to.

huMpty duMpty · Accepted Answer · 2011-11-04 16:06:56Z

0

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;}

answered Nov 4, 2011 at 16:06

huMpty duMpty

14.5k14 gold badges64 silver badges102 bronze badges

Comments

James Johnson · Accepted Answer · 2011-11-04 16:10:09Z

0

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

answered Nov 4, 2011 at 16:10

James Johnson

46.1k8 gold badges75 silver badges111 bronze badges

1 Comment

purplecat Over a year ago

I did do that when I'm using runat="server" (although I'm setting the display to 'block', not 'none' in the javascript), but 'table' still is null.

John · Accepted Answer · 2011-11-04 16:19:49Z

0

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.

answered Nov 4, 2011 at 16:19

John

6,6014 gold badges41 silver badges59 bronze badges

Collectives™ on Stack Overflow

Hiding/Showing an html table with C# and Javascript

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related