it-swarm.com.de

Wie legen Sie die Eigenschaft "Visible" eines ASP.NET-Steuerelements in einer JavaScript-Funktion fest?

Grundsätzlich möchte ich wissen, wie ein ASP.NET-Steuerelement am besten vor einer Javascript-Funktion ausgeblendet bzw. angezeigt werden kann. Ich dachte, ich würde nur mit Javascript auf das Steuerelement zugreifen:

var theControl = document.getElementById("txtEditBox");

Setzen Sie dann einfach die Visible-Eigenschaft des Steuerelements auf true/false. Es scheint nicht zu funktionieren, ich kann nicht herausfinden, wie man "Visible" auf true/false setzt. Wie kann ich das machen? Ist dies auch der beste Weg, um ein ASP.NET-Steuerelement vor einer Javascript-Funktion auszublenden/anzuzeigen?

Danke, Jeff

15
Yttrium

Die Eigenschaft "Visible" eines ASP.NET-Steuerelements bestimmt, ob es auf dem Client gerendert wird (d. H. An den Client gesendet wird). Wenn die Seite beim Rendern falsch ist, wird sie niemals beim Client ankommen.

Sie können diese Eigenschaft des Steuerelements technisch nicht festlegen.

Wenn das Steuerelement = auf dem Client gerendert wird, weil die Visible-Eigenschaft beim Rendern der Seite true ist, können Sie sie mithilfe von Javascript wie folgt ausblenden:

var theControl = document.getElementById("txtEditBox");
theControl.style.display = "none";

// to show it again:
theControl.style.display = "";

Das setzt voraus, dass das id-Attribut des Steuerelements auf dem Client wirklich "txtEditBox" ist und dass es bereits sichtbar ist.

Ist dies auch der beste Weg, um ein ASP.NET-Steuerelement vor einer Javascript-Funktion auszublenden/anzuzeigen?

Es gibt nicht unbedingt einen "besten" Weg, obwohl es besser ist, CSS-Klassendefinitionen zu verwenden:

.invisible { display: none; }

Wenn Sie etwas ausblenden möchten, wenden Sie diese Klasse dynamisch auf das Element an. Wenn Sie es erneut anzeigen möchten, entfernen Sie es. Ich glaube, das funktioniert nur für Elemente, deren display-Wert als block beginnt.

25
Jason Bunting

anstelle von visible verwenden Sie die Option CSS, um Folgendes anzuzeigen: none

//css:
.invisible { display:none; }

//C#
txtEditBox.CssClass = 'invisible';
txtEditBox.CssClass = ''; // visible again

//javascript
document.getElementById('txtEditBox').className = 'invisible'
document.getElementById('txtEditBox').className = ''
5
Jimmy

Stellen Sie den Stil auf "display: none".

var theControl = document.getElementById("<%= txtEditBox.ClientID %>");
theControl.style.display = "none";
5

Dies sollte die Kontrolle verbergen:

theControl.style.display = 'none';
3
gfrizzle

Sie können dazu die Anzeigeeigenschaft verwenden. Wie Jason jedoch bemerkt hat, handelt es sich hierbei um eine DHTML-DOM-Eigenschaft (clientseitig), die vollständig unabhängig von der ASP.NET-Eigenschaft (serverseitig) ist, die das Rendern steuert.

theControl.style.display = "none";

Eigenschaft anzeigen

3
C. Dragon 76

Sie können die ASP.NET-Version des Steuerelements nicht ausblenden/anzeigen, da diese nur in einem Serverkontext vorhanden ist. Um JavaScript zu verwenden, müssen Sie mit dem Steuerelementstil/Sichtbarkeitsstatus spielen.

Die einzige Möglichkeit, dies zu tun, wäre, das Steuerelement in ein UpdatePanel zu packen und so etwas zu haben:

<asp:UpdatePanel ID="panel" runat="server">
  <ContentTemplate>
    <asp:TextBox ID="myTextBox" runat="server" />
  </ContentTemplate>
  <Triggers>
    <asp:AsynchronousPostbackTrigger ControlID="button" EventName="Click" />
  </Triggers>
</asp:UpdatePanel>
<asp:Button ID="button" runat="server" OnClick="toggle" Text="Click!" />

Dann brauchst du das in deinem Code hinter:

protected void toggle(object sender, EventArgs e){
  myTextBox.Visibility = !myTextBox.Visibility;
}

Wenn Sie jetzt auf die Schaltfläche klicken, wird ein asynchrones Postback ausgeführt, und das UpdatePanel wird aktualisiert.

Hinweis: Dies ist keine gute -Lösung, da dies eine sehr schwere AJAX -Anforderung sein wird, da Sie den ViewState übergeben müssen.

Es kann auch nicht 100% richtig sein, das habe ich auswendig gelernt.

3
Aaron Powell

Oder wenn Sie css nicht verwenden wollen:

<asp:TextBox ID="txtBox" runat="server" style="display:none;">
1
live-love

Sie möchten die Anzeigestileigenschaft auf 'none' (zum Ausblenden) oder null zum Anzeigen setzen.

   var theControl = document.getElementById("txtEditBox");

   theControl.style.display = 'none';

   theControl.style.display = null;

Auf die jQuery-Art:

   $('#txtEditBox').hide();

   $('#txtEditBox').show();
1
tvanfosson

Ich denke, die beste Lösung ist, Ihr ASP-Steuerelement in ein div zu setzen und die Eigenschaftsanzeige auf das div-Element zu setzen.

<div id="divTest">            
   <asp:TextBox ID="txtTest" runat="server"></asp:TextBox>
</div>

<script type="text/javascript">
    SIN JQuery
    document.getElementById('divTest').style.display = "none";

    CON JQuery
    $('#divTest').hide();
</script>
0
GreatNews