将父 DIV 的样式设置为用户控件答案

【问题标题】：Set the style of a parent DIV to a usercontrol将父 DIV 的样式设置为用户控件
【发布时间】：2013-12-26 21:52:07
【问题描述】：

我在 GridView 中有一个动态命名的 DIV，它包含一个带有动态分配 Parent_ID 的用户控件。 javascript 用于显示或隐藏 DIV。我将向您展示两个没有 ASP 代码的不同行的示例。

第 1 行显示订单号 123456：

<a href="<%#"javascript:collapseExpand('Order_Notes_Panel123456');" %>" >+</a>
<div id='Order_Notes_Panel123456' style="display:none;">
    <uc:Comments_Control id="Comments_Control_ID" runat="server" Parent_ID='123456'/>
</div>

第 2 行显示订单号 678901：

<a href="<%#"javascript:collapseExpand('Order_Notes_Panel678901');" %>" >+</a>
<div id='Order_Notes_Panel678901' style="display:none;">
    <uc:Comments_Control id="Comments_Control_ID" runat="server" Parent_ID='678901'/>
</div>

好消息是用户控件绑定并完美运行。每次单击“+”时，javascript 都会显示（将样式设置为“display:block;”）并隐藏（将样式设置为“display:none;”）相应的 DIV。

这是我的问题：用户控件中有一个“回复”链接，单击该链接后，会进行回发并将控件置于编辑模式。当我在另一个没有包含 DIV 的页面上使用此用户控件时，您不会注意到任何事情。但是，当“回复”进行回发时，包含的 DIV 将恢复为 style="display:none;"。

您能否提供一个建议，如何将父 DIV 的样式设置为“display:block;”而用户显然正在使用它？我想当用户控件进入编辑模式时，适当的代码会放在用户控件后面的代码中。

谢谢，
抢

更新：我发现我的 DIV 中没有 runat=server。因为我试图为每个人建立一个动态 ID，所以如果我尝试使用 runat，我会得到一个错误。这可能是我无法从后面的代码中访问它的原因......

【问题讨论】：

标签： asp.net vb.net html user-controls parent

【解决方案1】：

我为自己感到非常高兴...（请参阅 YouTube 视频了解这句话，您会很高兴的。）

总而言之，这就是我添加的内容：
1. 新的 Javascript 函数将目标 DIV 的名称添加到隐藏字段（“collapseExpand”函数在 Site.Master 中。我无法将“load_div_to_hidden”放入 Site.Master 因为“myhiddenField”不是在每个页面上设置
2.新增隐藏字段来捕捉目标DIV的名称
3. 新的 Javascript 函数在 window.onload 上运行，检查我们是否有回传，然后显示隐藏字段中的值
4.从链接中的href添加第二个Javascript调用

下面是新的sn-ps代码：

<script type="text/javascript">
    function load_div_to_hidden(obj) {
        var hidden = document.getElementById('<%= myhiddenField.ClientID %>');
        hidden.value = obj;
    }

    function windowOnLoad() {
        var isPostBack = (('<%= IsPostBack %>').toLowerCase() == 'true') ? true : false;

        if (isPostBack == true) {
            var hid_field_value = document.getElementById('<%= myhiddenField.ClientID %>').value;
            var right_div = document.getElementById(hid_field_value);
            right_div.style.display = "block";
        }
    }

    window.onload = windowOnLoad;

</script>



<input type="hidden" id="myhiddenField" runat="server" value="" />


<a href="<%#"javascript:collapseExpand('Order_Notes_Panel123456'); javascript:load_div_to_hidden('Order_Notes_Panel123456');" %>" >+</a>
<div id='Order_Notes_Panel123456' style="display:none;">
<uc:Comments_Control id="Comments_Control_ID" runat="server" Parent_ID='123456'/>
</div>

像魅力一样工作！

【讨论】：