在asp.net中獲取javascript代碼的客戶端ID不起作用

Question

對於網站，已經定義了一個usercontrol（ascx）為用戶提供計算幫助。 該控件在另一個umbraco網站的ascx控件中實現了多次。

用戶控件中的某些面板已被隱藏，我正嘗試通過使用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();
}

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

我嘗試過的解決方案：實現靜態客戶端ID->由於多次執行了ascx控件，這將導致javascript顯示和隱藏它找到的第一個控件，而不是活動控件。

我已經嘗試過在此鏈接中找到的解決方案，但是它對我不起作用。

我的問題是如何在示例中切換面板的顯示。 也歡迎進行良好的工作。

Answer 1

** **編輯

我不確定，但也許是因為ListItem屬性會將所有值轉換為字符串，請檢查以下內容：

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

您可以看到Text也顯示為<%= 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的串並包裝每個用戶控件用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;
}

以下鏈接用於解決方案。