使用codebehind显示隐藏div

Question

我有一个DropDownList我试图展示的,div OnSelectedIndexChanged但它说OBJECT REQUIRED.

我绑定了DataList那个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">

代码背后:

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,然后在后面的代码中设置它的visible属性.

<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,则根本不会呈现,甚至不会被隐藏.

客户端隐藏

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

躲在课堂后面的守则

隐藏要呈现到页面但隐藏的元素是另一个简单的单行代码:

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();