Question

对于网站已定义usercontrol（ascx）为用户执行计算辅助。该控件在另一个ascx控件中实现了多次，该控件是umbraco网站的一部分。

用户控件中的某些面板已被隐藏，我试图通过使用java脚本来显示它们。

选择要显示的面板的asp代码：

<asp:Panel ID="firstpanel" runat="server">
  <asp:RadioButtonList ID="rblSelect" runat="server" RepeatDirection="Vertical" >
     <asp:ListItem Text="Show hidden" Value="0" onclick="ShowMe('<%= hiddenPan.ClientID %>');" ></asp:ListItem>
     <asp:ListItem Text="Show other" Value="1" onclick="ShowMe('<%= otherPan.ClientID %>');" ></asp:ListItem>
  </asp:RadioButtonList>
</asp:Panel>

<asp:Panel ID="hiddenPan" runat="server" style="display:none">
  <!-- stuff to work with -->
</asp:Panel>

javascript代码如下：

function ShowMe(showPanel) {
    console.log(showPanel);
    $('#' + showPanel).show();
}

此方法不起作用。控制台日志返回值＆lt;％= hiddenPan.ClientID％＆gt; ，而不是我期望的clientID。

我尝试过的解决方案：实现静态客户端ID - ＆gt;由于ascx控件实现了多次，这将导致javascript显示并隐藏它找到的第一个控件，而不是活动控件。

我已尝试过此Link中找到的解决方案，但它对我不起作用。

我的问题是如何在示例中切换面板的显示。也欢迎一个好的工作。

Answer 1

<强> ** **编辑

我不确定但也许是因为ListItem属性将所有值转换为字符串，请检查：

<asp:ListItem Text="<%= hiddenPan.ClientID %>" Value="0"></asp:ListItem>

您可以看到文本也显示为<%= hiddenPan.ClientID %>。

如果它与真实项目没有冲突，你可以试试这个，这完全符合你的要求：

<div class="divUserControlContainer">
    <asp:Panel ID="firstpanel" runat="server">
      <asp:RadioButtonList ID="rblSelect" runat="server" RepeatDirection="Vertical" >
         <asp:ListItem Text="Show hidden" Value="0" onclick="ShowMe(this.id,'hiddenPan');" ></asp:ListItem>
         <asp:ListItem Text="Show other" Value="1" onclick="ShowMe(this.id,'otherPan');" ></asp:ListItem>
      </asp:RadioButtonList>
    </asp:Panel>

    <asp:Panel ID="hiddenPan" runat="server" style="display:none">
        <!-- stuff to work with -->
    </asp:Panel>
    <asp:Panel ID="otherPan" runat="server" style="display:none">
        <!-- stuff to work with -->
    </asp:Panel>
</div>

使用Javascript：

function ShowMe(thisId, showPanel) {
    console.log(showPanel);
    $('#' + showPanel).show();
    $('#' + thisId).closest('.divUserControlContainer').find("div[id*='" + showPanel + "']").show();
}

唯一的问题是每个PanelID不应该是另一个PanelID的子字符串，并且每个UserControl都包含div这个类：divUserControlContainer。

Answer 2

您可以使用JQuery：

使用其他解决方法

<asp:Panel ID="firstpanel" runat="server">
  <asp:RadioButtonList ID="rblSelect" runat="server" RepeatDirection="Vertical" >
     <asp:ListItem Text="Show hidden" Value="0"   ></asp:ListItem>
     <asp:ListItem Text="Show other" Value="1"   ></asp:ListItem>
  </asp:RadioButtonList>
</asp:Panel>

<asp:Panel ID="hiddenPan" runat="server" style="display:none">
  <!-- stuff to work with -->here some content
</asp:Panel>

    <asp:Panel ID="otherPan" runat="server" style="display:none">
  <!-- stuff to work with -->here some more content
</asp:Panel>

在jQuery方面：

/// $("[id*=rblSelect] input").live("click", function () { -- old jquery way

// new version of Jquery uses 'on' instead of 'live'
$("[id*=rblSelect]").on("click", "input", function () 
{ 
     var selectedValue = $(this).val();
     if (selectedValue == "0") // IF first item is clicked
     {
          $('#' + '<%=hiddenPan.ClientID %>').show();
     } else {
         $('#' + '<%=otherPan.ClientID %>').show();
     }
 });

Answer 3

显然，如果在一些属性（如ListItem的'onclick'属性）中使用它们，则ASP.NET解析器会将引号编码为其HTML等效项。（我不完全知道这种行为，但这是一个案例）。

为了解决您的问题，我建议使用此解决方法：将控件的名称放在onclick属性中，然后在控件的OnPreRender方法中找到该控件并使用其客户端ID创建变量。我选择了PreRender，因为客户端ID都是在此之前分配的。

在控件的标记中，只需将面板的服务器端ID：

<asp:ListItem Text="Show hidden" Value="0" onclick="hiddenPan"></asp:ListItem>
<asp:ListItem Text="Show other" Value="1" onclick="otherPan" ></asp:ListItem>

在Control的代码背后：

public partial class WebUserControl1 : System.Web.UI.UserControl
{
    protected override void OnPreRender(EventArgs e)
    {
        System.Text.StringBuilder sb = new System.Text.StringBuilder("<script type='text/javascript'>");
        foreach (ListItem i in rblSelect.Items)
        {
            string relatedControlId = i.Attributes["onclick"];

            Control relatedControl = null;
            if (!string.IsNullOrEmpty(relatedControlId) && (relatedControl = FindControl(relatedControlId)) != null)
            {
                sb.AppendFormat("var {0}_id = '{0}';", relatedControl.ClientID);
                i.Attributes["onclick"] = string.Format("ShowMe({0}_id)", relatedControl.ClientID);
            }
        }
        sb.Append("</script>");
        this.Page.ClientScript.RegisterClientScriptBlock(this.GetType(), string.Format("ids{0}", this.ID) , sb.ToString());

        base.OnPreRender(e);
    }

这将添加到呈现的输出HTML中，每个ListItem的变量都是这样的：

<script type='text/javascript'>var uc1_hiddenPan_id = 'uc1_hiddenPan';</script>

并将该列表项的每个onclick属性更改为以下内容：

 onclick="ShowMe(uc1_hiddenPan_id);"

更新：我已经编辑了答案，以便在OP请求的情况下使用多个控件。

Answer 4

目前我已经通过javascript在客户端进行了以下修改：

<div id="containerDiv">
  <asp:Panel ID="firstpanel" runat="server">
    <asp:RadioButtonList ID="rblSelect" runat="server" RepeatDirection="Vertical" >
       <asp:ListItem Text="Show hidden" Value="0" onclick="ShowMe($$(this, 'hiddenPan'));" ></asp:ListItem>
       <asp:ListItem Text="Show other" Value="1" onclick="ShowMe($$(this, 'otherPan'));" ></asp:ListItem>
    </asp:RadioButtonList>
  </asp:Panel>

  <asp:Panel ID="hiddenPan" runat="server" style="display:none">
    <!-- stuff to work with -->
  </asp:Panel>
</div>

javascript /客户端功能：

function ShowMe(showPanel) {
   showPanel.show();
}

function $$(target, id) {

    var t = $(target);
    var con = t.closest("#containerDiv");
    var el = $("#" + id, con);
    if (el.length < 1)
        el = $("[id$=_" + id + "]", con);

    return el;
}

以下link用于解决问题。

在asp.net中检索javascript代码的客户端ID无效

4 个答案: