web-dev-qa-db-ja.com

コードビハインドを使用した非表示divの表示

DropDownListを表示しようとしているdivOnSelectedIndexChangedがありますが、OBJECT REQUIRED。

そのdivでDataListをバインドしています：

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

コードビハインド：

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

私は何を間違えていますか？

asp.netdrop-down-menu
25
ravi

Divを作成する

runat="server"

そして、やります

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

Divがレンダリングされる前に、javascriptがbodyタグの上部にレンダリングされているため、メソッドが機能していません。 DOMがリクエストに完全に対応できるようになるまでjavascriptに指示するコードを含める必要があります。これはおそらくjQueryを使用するのが最も簡単でしょう。

21
Nick Spiers

標準の ASP.NET Panel を使用して、コードビハインドで表示プロパティを設定できます。

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

分離コードでパネルを表示するには：

Panel1.Visible = true;

68
Dan Diplo

ページ上のコントロールのレンダリング/表示を処理する方法はいくつかあります。各メソッドで何が起こるかに注意してください。

レンダリングと可視性

ある種のロジックまたはデータベース値のために、ユーザーのページ上の要素をレンダリングする必要がない場合があります。この場合、レンダリング（返されるWebページでコントロールを作成）を完全に防ぐことができます。コントロールを後でクライアント側で表示する必要がない場合、ページを表示しているユーザーは表示する必要がないため、これを実行する必要があります。

コントロールまたは要素は、サーバー側から可視性を設定できます。プレーンな古いhtml要素の場合、マークアップページでrunat属性値をserverに設定するだけです。

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

Divをレンダリングするかどうかの決定は、クラスビハインドクラスで次のように行うことができます。

myDiv.Visible = someConditionalBool;

Trueに設定されている場合、ページ上にレンダリングされ、falseの場合、まったく表示されず、非表示にもなりません。

クライアント側の非表示

要素の非表示は、クライアント側でのみ行われます。つまり、レンダリングされますが、display CSSスタイルが設定されており、ブラウザーにユーザーに表示しないように指示します。これは、ユーザーの入力に基づいて物事を非表示/表示したい場合に役立ちます。前の例で説明したように要素/コントロールにrunat=serverが設定されている限り、要素はサーバー側でも非表示にできることを知っておくことが重要です。

コードビハインドクラスの非表示

ページに表示するが非表示にする要素を非表示にするには、もう1つの簡単なコード行を追加します。

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

displayスタイルのサーバー側を削除する必要がある場合は、displayスタイルを削除するか、inlineやblockなどの別の値に設定することで削除できます。 （値の説明 ここ ）。

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

javascriptでクライアント側に非表示

普通の古いjavascriptを使用すると、この方法で同じ要素を簡単に隠すことができます

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

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

jQueryを使用する場合は、jQueryによって要素の非表示が少し簡単になります。

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

// ... and to show 
myDiv.show();
16
jlafay

もう1つの方法（これまで誰も言及していないようです）は、追加のKeyValueペアを要素のStyle配列に追加することです。すなわち

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

これには、「Visible」プロパティとは異なり、DOMに要素が書き込まれるのを防ぐのではなく、単に要素を非表示にするという追加の利点があります。つまり.

Div.Visible = false

div neverがDOMに書き込まれます。

編集：これは「コードビハインド」で行う必要があります。 * .aspx.csファイル。

1
XtraSimplicity

RegisteredClientScriptBlockは、ポストバックのページ上部に順序についての保証なしでスクリプトを追加します。これは、関数宣言の後に呼び出しが挿入されることを意味します（jsファイル呼び出し後に関数がインライン化されます）またはスクリプトがdivを実行しようとすると、おそらくページがまだレンダリングされているため、まだそこにありません。おそらく、上記で説明した2つのシナリオをfirebugでシミュレートし、同様のエラーが発生するかどうかを確認することをお勧めします。

私の推測では、ページの下部にRegisterStartupScriptを付けてスクリプトを追加すると機能します-少なくとも一撃の価値があります。

とにかく、代替ソリューションとしてrunat="server"属性をdivに追加すると、コードビハインドのIDで（jsに戻らずに-どれだけクールかも）にアクセスして、次のように消えます。この：

data.visible = false

0
JohnIdol

コードビハインドでelement.Visible = trueを設定しても、実際の画面に影響がないという問題がありました。私の解決策は、divを表示したいページの領域をASP UpdatePanelでラップすることで、これは部分的な画面更新を引き起こすために使用されました。

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

要素runat = serverを使用すると、コードビハインドからアクセスできるようになり、UpdatePanelに配置して、画面上で実際に更新できるようになりました。

0
MWinstead
<div id="OK1"  runat="server" style ="display:none" >
    <asp:DropDownList ID="DropDownList2" runat="server"></asp:DropDownList>
</div>

vb.netコード

  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
0
Aladein