2009-11-16 13 views
21

Ich habe eine DropDownList für die ich versuche, eine divOnSelectedIndexChanged zu zeigen, aber es sagt OBJECT REQUIRED.Anzeigen ausblenden div mit Codebehind

Ich Bindung des DataList in diesem div:

aspx:

<asp:DropDownList runat="server" ID="lstFilePrefix1" AutoPostBack="True" 
        OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged" > 
    <asp:ListItem Text="Prefix1" Value="Prefix1" /> 
    <asp:ListItem Text="Prefix2" Value="Prefix2" /> 
    <asp:ListItem Text="Prefix3" Value="Prefix3" /> 
    <asp:ListItem Text="Prefix1 and Prefix2" Value="Prefix1 and Prefix2" /> 
    <asp:ListItem Text="Prefix2 and Prefix3" Value="Prefix2 and Prefix3" /> 
</asp:DropDownList> 

<asp:DataList ID="DataList1" runat="server" RepeatColumns="4" 
       CssClass="datalist1" OnItemDataBound="SOMENAMEItemBound" 
       CellSpacing="6" onselectedindexchanged="DataList1_SelectedIndexChanged" 
       HorizontalAlign="Center" Width="500px"> 

Code hinter:

protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e) 
{ 
    if (lstFilePrefix1.SelectedItem.Text=="Prefix2") 
    { 
     int TotalRows = this.BindList(1); 
     this.Prepare_Pager(TotalRows); 
     Page.ClientScript.RegisterClientScriptBlock(GetType(), "JScript1", "ShowDiv('data');", true); 
    } 
} 

Javascript:

function ShowDiv(obj) 
{ 
    var dataDiv = document.getElementById(obj); 
    dataDiv.style.display = "block"; 
} 

Was mache ich falsch?

+0

die div in jedem Namenscontainer sind? Bitte sehen Sie sich die Seitenquelle an und prüfen Sie, ob es ein Element mit der ID 'data' gibt. – rahul

+0

Warum verwenden Sie JS zum Anzeigen des Div bei Verwendung von AutoPostBack? Setzen Sie die DataList in ein Panel oder machen Sie div 'runat =" server "', und fügen Sie einfach einen Anzeigestil dynamisch hinzu. –

Antwort

18

machen Sie den div

runat="server" 

und tun

if (lstFilePrefix1.SelectedValue=="Prefix2") 
{ 
    int TotalRows = this.BindList(1); 
    this.Prepare_Pager(TotalRows); 
    data.Style["display"] = "block"; 
} 

Ihre Methode funktioniert nicht, weil das JavaScript oben im body-Tag gerendert wird, bevor das div gerendert wird. Sie müssten Code einfügen, damit das JavaScript darauf wartet, dass das DOM vollständig bereit ist, Ihre Anfrage zu übernehmen, was wahrscheinlich am einfachsten mit jQuery zu tun ist.

+0

cool !! danke – ravi

+0

Hat mir geholfen !! Sehr einfache und kurze Menge an Code! –

+0

'runat =" server "' ist der Schlüssel, um das 'div' aus dem dahinterliegenden Code zu manipulieren. – charliebrownie

0

RegisteredClientScriptBlock fügt das Skript an der Spitze der Seite, auf dem Post-back mit keine Gewissheit über den Auftrag, dass nach der Funktionsdeklaration eingespritzt wird (Ihre js Datei mit der Funktion wird entweder der Anruf bedeutet inlined nach Ihr Aufruf) oder wenn das Skript versucht, das div auszuführen, ist es wahrscheinlich noch nicht da die Seite noch rendert. Eine gute Idee ist wahrscheinlich, die beiden oben beschriebenen Szenarien auf Firebug zu simulieren und zu sehen, ob Sie ähnliche Fehler bekommen.

Meine Vermutung ist, das würde funktionieren, wenn Sie das Skript am Ende der Seite mit RegisterStartupScript anhängen - einen Versuch wert mindestens.

Wie auch immer, als alternative Lösung, wenn Sie das Attribut runat="server" dem div hinzufügen, können Sie auf es durch die ID im Codebehind zugreifen (ohne js zurückzukehren - wie cool das sein könnte), und es verschwinden lassen dies:

data.visible = false

+1

Wenn das div-Objekt das Attribut runat = "server" erhält und seine Sichtbarkeit auf "false" gesetzt ist, wird es nicht auf der Seite gerendert und kann nicht mit JavaScript aufgerufen werden (was möglicherweise erforderlich erscheint). RegisterStartupScript ist definitiv einen Versuch wert. –

+0

Ja, ich schlage in der Tat runat = server * anstelle von * js Ansatz nicht in Kombination vor. – JohnIdol

62

Sie können einen Standard ASP.NET Panel verwenden und dann seine sichtbare Eigenschaft in Ihrem Code festlegen.

<asp:Panel ID="Panel1" runat="server" visible="false" /> 

To-Panel in Code-Behind zeigen:

Panel1.Visible = true;

+0

so viel einfacher auf diese Weise !!! – Stainedart

+1

Sollte akzeptiert werden. –

+1

Das hätte richtige Antwort sein sollen –

13

Es gibt einige Möglichkeiten, um das Rendern/Anzeigen von Steuerelementen auf der Seite zu behandeln, und Sie sollten beachten, was mit den einzelnen Methoden passiert.

Rendering und Sichtbarkeit

Es gibt einige Fälle, in denen Elemente auf Ihrer Seite nicht wegen irgendeine Art von Logik oder Datenbankwert für die Nutzer verfügbar sein müssen. In diesem Fall können Sie das Rendering (Erstellen des Steuerelements auf der zurückgegebenen Webseite) vollständig verhindern. Sie möchten dies tun, wenn das Steuerelement später auf der Clientseite nicht angezeigt werden muss, da der Benutzer, der die Seite anzeigt, diese nie sehen muss.

Alle Steuerelemente oder Elemente können von der Serverseite aus sichtbar gemacht werden. Wenn es ein einfaches altes HTML-Element ist, müssen Sie nur den runat-Attributwert auf der Markup-Seite auf server setzen.

<div id="myDiv" runat="server"></div> 

Die Entscheidung, die div oder nicht machen kann nun in der Code-behind-Klasse wie so geschehen:

myDiv.Visible = someConditionalBool; 

Wenn auf true gesetzt ist, wird es auf der Seite dargestellt wird, und wenn es falsch ist es wird überhaupt nicht wiedergegeben, nicht einmal verborgen.

Akquisition Kunde

Hiding ein Element Hiding wird nur auf der Client-Seite getan. Das heißt, es ist gerendert, aber es hat einen CSS-Stil display, der Ihren Browser anweist, es dem Benutzer nicht anzuzeigen. Dies ist nützlich, wenn Sie Dinge basierend auf Benutzereingaben ausblenden oder anzeigen möchten. Es ist wichtig zu wissen, dass das Element auch auf der Serverseite versteckt werden kann, solange das Element/Steuerelement runat=server gesetzt hat, wie ich es im vorherigen Beispiel erklärt habe.

Hiding in der Code-behind-Klasse

ein Element auszublenden, die Sie auf die Seite gerendert werden sollen, aber versteckt ist eine weitere einfache einzige Zeile Code:

myDiv.Style["display"] = "none"; 

Wenn Sie eine Notwendigkeit haben Entfernen Sie die display Stil-Server-Seite, es kann durch Entfernen der display Stil oder Einstellung auf einen anderen Wert wie inline oder block (Werte beschrieben here) getan werden.

myDiv.Style.Remove("display"); 
// -- or -- 
myDiv.Style["display"] = "inline"; 

Verstecken auf der Client-Seite mit Javascript

plain old Mit Javascript, können Sie einfach das gleiche Element in diesem

var myDivElem = document.getElementById("myDiv"); 
myDivElem.style.display = "none"; 

// then to show again 
myDivElem.style.display = ""; 

jQuery versteckt Elemente ein wenig einfacher, wenn macht Weise verstecken Sie bevorzugen die Verwendung von jQuery:

var myDiv = $("#<%=myDiv.ClientID%>"); 
myDiv.hide(); 

// ... and to show 
myDiv.show(); 
0

Ich hatte ein Problem, bei dem das Setzen von element.Visible = true in meinem Code hinter keinen Effekt auf den tatsächlichen Bildschirm hatte. Die Lösung für mich bestand darin, den Bereich meiner Seite, auf dem ich das div anzeigen wollte, in ein ASP UpdatePanel zu verpacken, das dazu verwendet wird, teilweise Bildschirmaktualisierungen zu verursachen.

http://msdn.microsoft.com/en-us/library/bb399001.aspx

Nachdem das Element runat = Server gaben mir Zugang zu ihm von dem Code-Behind, und es in der Update platzieren lassen Sie es tatsächlich auf dem Bildschirm aktualisiert werden.

1

Eine andere Methode (die bisher von niemandem erwähnt wurde) besteht darin, dem Style-Array des Elements ein zusätzliches KeyValue-Paar hinzuzufügen. d.h

Div.Style.Add("display", "none"); 

Dies hat den zusätzlichen Vorteil, dass lediglich das Element versteckt, anstatt verhindern, dass es auf das DOM geschrieben beginnen - im Gegensatz zu der Eigenschaft „Visible“. das heißt

Div.Visible = false 

Ergebnisse in den div nie auf das DOM geschrieben werden.

Edit: Dies sollte in der 'Code-Behind', i.e. getan werden. Die Datei * .aspx.cs.

-2

Verstecken auf der Client-Seite mit Javascript

plain old Mit Javascript, können Sie einfach das gleiche Element auf diese Weise verstecken:

var myDivElem = document.getElementById("myDiv"); 
myDivElem.style.display = "none"; 

Dann wieder zeigen:

myDivElem.style.display = ""; 

jQuery macht das Ausblenden von Elementen etwas einfacher, wenn Sie jQuery verwenden möchten:

var myDiv = $("#<%=myDiv.ClientID%>"); 
myDiv.hide(); 

... und um zu zeigen:

myDiv.show(); 
0
<div id="OK1" runat="server" style ="display:none" > 
    <asp:DropDownList ID="DropDownList2" runat="server"></asp:DropDownList> 
</div> 

vb.net Code

Protected Sub DropDownList1_SelectedIndexChanged(sender As Object, e As EventArgs) Handles DropDownList1.SelectedIndexChanged 
    If DropDownList1.SelectedIndex = 0 Then 
     OK1.Style.Add("display", "none") 
    Else 
     OK1.Style.Add("display", "block") 
    End If 
End Sub 
Verwandte Themen