Question

我有一个带有style =“display：none”的div。按下html按钮后div应该可见：

function JSAdd() {
    document.getElementById('divDetail').style.display = "block";
}
    <div style="float:left">

    <div id="ctl00_MainContent_upnlLbRD">





            <select size="4" name="ctl00$MainContent$lbRD" id="ctl00_MainContent_lbRD" style="width:188px;">

    <option value="5">one</option>
    <option value="1">two</option>
</select>

    <input id="btnAdd" type="button" value="Добавить" onclick="JSAdd();" />
    <input id="btnEdit" type="button" value="Редактировать" onclick="JSEdit();" />
</div>
<div id="ctl00_MainContent_divDetail" style="display:none" clientidmode="static">
    <div id="ctl00_MainContent_upnlDescription">

            <div>

                <span id="ctl00_MainContent_lblDescription">Описание:</span>

                <input name="ctl00$MainContent$txtDescription" type="text" id="ctl00_MainContent_txtDescription" />  

                <span id="ctl00_MainContent_txtDescriptionRequiredFieldValidator" style="color:Red;visibility:hidden;">Описание является обязательным для заполнения</span>

            </div>

            <input type="submit" name="ctl00$MainContent$btnSave" value="Сохранить" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$MainContent$btnSave&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, false))" id="ctl00_MainContent_btnSave" />

我需要能够从代码隐藏中再次使div不可见。除非是runat="server"，否则我无法访问div。但是当我添加runat =“server”时，从上面的javascript函数按下按钮时div不会显示。你能帮帮我吗？

谢谢，
大卫

Answer 1

您可以通过添加runat="server"属性来访问代码隐藏中的div。添加此属性确实会改变您在JavaScript中访问元素的方式：

var el = document.getElementById("<%=div1.ClientID%>");
if (el){
    el.style.display = "none"; //hidden
}

有两种方法可以调整代码隐藏的可见性，但由于您在JavaScript中设置了display:none，因此您可能希望在代码隐藏中使用相同的方法：

div1.Style["display"] = "block"; //visible

在代码隐藏中，您还可以将Visible属性设置为false，但这是不同的，因为它会阻止元素被渲染。

修改

如果div仍然显示display:none，那么您可能在某个地方有一个未关闭的标记或引号来影响标记。仔细检查并确保标记有效。

Answer 2

您有几个选项，使用ClientIDMode="Static"或在运行时使用动态ClientID。这两个选项都允许您对对象进行服务器端访问。

<强>动态：

 <div id="divDetail" runat="server" />
 //or
 <asp:panel id="divDetail" runat="server" />

  function JSAdd() {
    document.getElementById('<%= divDetail.ClientID %>').style.display = "block";
  }

  //to hide from code-beind
  divDetail.Attributes.Add("style","display:none;");

静态（.NET 4.0 +）：

 <div id="divDetail" runat="server" ClientIdMode="Static">
  //or
 <asp:panel id="divDetail" runat="server" ClientIdMode="Static" />

  function JSAdd() {
    document.getElementById('divDetail').style.display = "block";
  }

Answer 3

使用Panel，它会呈现为经典div

<asp:Panel runat="server" ID="divDetail" ClientIDMode="Static" />

Answer 4

当runat="server"应用于元素时，asp.net会通过修改它来确保它具有唯一的ID。只需向asp.net询问真实的客户端ID：

function JSAdd() {
    document.getElementById("<%=div1.ClientID%>").style.display = "block";
}

或者，您可以通过将此ID添加到您的div来告诉asp.net保留您的ID：

<div id="div1" runat="server" clientidmode="Static">

<强>资源：

ClientIdMode="Static" docs

Answer 5

在ASP.NET中，为了使ID唯一（如果在指定相同ID的情况下加载了多个控件），元素上的ID通常遵循ctl00_container1_container2_controlID之类的约定，这是您调用{{1}时返回的内容}。

如果您考虑这样一种情况，即服务器端上有相同的ID并且您在页面中加载了这两个控件，您可以考虑使用jQuery，control.ClientID只需将ID与结尾匹配就可以更轻松部分：

runat="server"

Answer 6

最简单的技术是使用Javascript / Jquery来改变Div的Display属性。如果不是，你可以使用以下代码

<form method="post" runat="server">
    <div style = "display:none" id= "div1" runat ="server" >Hello I am visible</div>
    <asp:Button Text="display Div" runat ="server" ID ="btnDisplay" OnClick = "displayDiv" />
    <asp:Button Text="display Div" runat ="server" ID ="btnHideDiv" OnClick = "hideDiv" />
    </form>

代码背后的代码如下

 protected void displayDiv(object sender, EventArgs e)
    {
        div1.Style.Clear();
        div1.Style.Add("display", "block");
    }
    protected void hideDiv(object sender, EventArgs e)
    {

        div1.Style.Clear();
        div1.Style.Add("display", "none");
    }

猜你得到了解决方案

从javascript和代码隐藏</div>访问<div>

6 个答案: