Masquer/afficher un tableau html avec C# et Javascript

Je suis en train de travailler sur un site web en utilisant ajax et C#. J'ai commencé l'apprentissage de ces langues, il y a quelques mois, donc je ne suis pas toujours sûr de ce que la meilleure pratique consiste à accomplir des choses.

J'ai un formulaire dans lequel certains contrôles doivent être masqués ou affichés en fonction de l'action de l'utilisateur. Il commence montrant un champ "id" (avec d'autres domaines), mais si l'utilisateur ne connaît pas leur identité, ils cliquent sur un lien qui provoque le champ "id" de devenir cachés et affiche un tableau qui contient des contrôles supplémentaires et un bouton "rechercher". Je suis actuellement en utilisant Javascript pour gérer le et cliquez sur masquer/afficher les contrôles:

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

Lorsque le bouton "rechercher" est cliqué, l'application tente de rechercher les informations supplémentaires dans la base de données et indique à l'utilisateur le résultat. Comme un résultat de l'appel de serveur, la page est rechargée, ce qui provoque la table de devenir à nouveau masqué. Voici mon problème: si le numéro de téléphone ne peut pas être trouvé, je tiens à garder la table visible, de sorte que l'utilisateur peut corriger d'éventuelles erreurs.

J'ai essayé d'ajouter le code qui rend le tableau caché dans le code-behind de sorte que le dos ne cause pas la table de devenir invisible:

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

Cependant, comme la table qui contient l'attribut runat="server" afin de le voir dans le code c#, je n'arrive pas à faire référence dans mon code javascript afin de le mettre visible par le client. J'ai essayé ce que pour le 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';
}

et la table html:

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

mais j'obtiens un message d'erreur disant que "infoSearch" est null.

Je pense que je serais en mesure d'accomplir les deux tâches (jeu masqué tableau visible avec le Javascript, mais le garder visible sur le post de retour) moi-même, mais je pense que mon code est plus compliqué que nécessaire, surtout que je suis de nouveau à ajax, .net et C#. Je suis donc à la recherche de conseils - Suis-je sur la bonne voie? Ai-je fait quelque chose dans le mauvais sens? Est-il une autre façon de le faire?

OriginalL'auteur purplecat | 2011-11-04

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

    Je pense que cela va arrêter la commande est envoyée au client (d'où la référence null) - essayez quelque chose comme:

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

}
    Qui semblait être mon problème. <%=infoSearchTable.ClientID%> n'est pas null, plus du tout dans le javascript. J'ai toujours le problème de l'après-dos provoquant l'info-table doivent être cachées. Mais je pense que je peux résoudre ce problème sur mon propre, maintenant que je peux accéder à l'élément de la table de C# et javascript.
    Merci pour cette réponse. Il m'a conduit dans la bonne direction, et maintenant, je suis en mesure de masquer/afficher la table comme je le voulais.

    OriginalL'auteur iandayman

  2. 0

    Vous pouvez faire quelque chose comme ça

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

    et dans le code de

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

    dans youe .css

    .yourclass{display:none;}

    OriginalL'auteur huMpty duMpty

  3. 0

    Une fois que vous ajoutez runat="server" à un élément, vous devez le référencer par l' ClientID en JavaScript:

    var table = document.getElementById("<%=infoSearchTable.ClientID%>");
if (table){
    table.style.display = "none";
}
    Je n'ai fais que quand je suis en utilisant runat="server" (même si je suis réglage de l'affichage "bloquer", pas "aucun" dans le javascript), mais "table" est toujours null.

    OriginalL'auteur James Johnson

  4. 0

    Dans ASP.NET lorsque vous utilisez runat=server il prend votre ID et la modifier pour inclure d'autres informations à partir de votre programme, je ne sais plus exactement quoi, mais je pense que la page maître ou de l'espace ou quelque chose pour le rendre unique. Votre getElementByID() a besoin d'être modifié pour inclure toutes les autres informations (voir la source sur une page pour obtenir l'ID correspondant) ou l'utilisation d'un framework javascript comme JQuery qui a sélecteurs avancés pour trouver des éléments sur une page.

    OriginalL'auteur John