Question

我有一个DropDownList，我试图展示div OnSelectedIndexChanged，但它显示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";
}

我做错了什么？

Answer 1

您可以使用标准ASP.NET Panel，然后在代码中设置它的可见属性。

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

在代码隐藏中显示面板：

Panel1.Visible = true;

Answer 2

制作div

runat="server"

并做

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

您的方法无效，因为在呈现div之前，javascript正在body标签的顶部呈现。你必须包含代码来告诉javascript等待DOM完全准备好接受你的请求，这可能是最简单的jQuery。

Answer 3

有几种方法可以处理页面上的渲染/显示控件，你应该注意每种方法会发生什么。

渲染和可见性

在某些情况下，由于某种类型的逻辑或数据库值，不需要为用户呈现页面上的元素。在这种情况下，您可以完全阻止渲染（在返回的网页上创建控件）。如果稍后不需要在客户端显示控件，您可能希望这样做，因为无论如何，查看页面的用户都不需要查看它。

任何控件或元素都可以从服务器端设置其可见性。如果它是一个普通的旧HTML元素，您只需要在标记页面上将runat属性值设置为server。

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

现在可以在类后面的代码中完成渲染div的决定：

myDiv.Visible = someConditionalBool;

如果设置为true，它将在页面上呈现，如果它为false，则根本不会呈现，甚至不会被隐藏。

客户端隐藏

隐藏元素仅在客户端完成。意思是，它被渲染但是它上面设置了display CSS样式，它指示浏览器不向用户显示它。当您想要根据用户输入隐藏/显示内容时，这非常有用。重要的是要知道元素可以隐藏在服务器端，只要元素/控件设置runat=server就像我在前面的例子中解释的那样。

隐藏在课程背后的代码

隐藏要渲染到页面但隐藏的元素是另一个简单的单行代码：

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

如果您需要删除display样式服务器端，可以通过删除display样式或将其设置为其他值来完成，例如inline或{{ 1}}（描述here）的值。

block

使用javascript隐藏在客户端

使用普通的旧javascript，您可以轻松地以这种方式隐藏相同的元素

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

如果你更喜欢使用jQuery，jQuery会使隐藏元素变得更简单：

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

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

Answer 4

另一种方法（到目前为止看来没有人提到），是为元素的Style数组添加一个额外的KeyValue对。即

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

这有一个额外的好处，就是只隐藏元素，而不是阻止它开始写入DOM - 不像＆＃34; Visible＆＃34;属性。即。

Div.Visible = false

导致div 从不被写入DOM。

编辑：这应该在＆＃39;代码隐藏＆＃39;中完成。 * .aspx.cs文件。

Answer 5

RegisteredClientScriptBlock在帖子后面的页面顶部添加了脚本无法保证订单，这意味着要么在函数声明之后注入了调用（你的调用后内联函数的js文件）或者当脚本尝试执行div时可能还没有因为页面仍然呈现。一个好主意可能是模拟我在firebug上面描述的两个场景，看看你是否得到类似的错误。

我的猜测是，如果您使用RegisterStartupScript在页面底部附加脚本，这将会有效 - 至少值得一试。

无论如何，作为替代解决方案，如果你将runat="server"属性添加到div中，你将能够通过代码隐藏中的id访问它（而不是恢复为js - 可能有多酷），并且它会像这样消失：

data.visible = false

Answer 6

我遇到一个问题，在我的代码后面设置element.Visible = true对实际屏幕没有任何影响。我的解决方案是将我的页面区域包装在我想要在ASP UpdatePanel中显示div的区域，用于导致部分屏幕更新。

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

让元素runat = server让我可以从代码隐藏中访问它，并将它放在UpdatePanel中，让它实际上在屏幕上更新。

Answer 7

<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

Answer 8

使用javascript隐藏在客户端

使用普通的旧javascript，您可以通过以下方式轻松隐藏相同的元素：

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

然后再次显示：

myDivElem.style.display = "";

如果你更喜欢使用jQuery，jQuery会使隐藏元素变得更简单：

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

...并显示：

myDiv.show();

使用后面的代码显示隐藏div

8 个答案: