Практическое руководство. Доступ к элементам управления из JavaScript по ID

Один из способов доступа к элементу управления из клиентского скрипта предусматривает передачу значения свойства ClientID серверного элемента управления методу document.getElementById. Значение свойства ClientID отображается в HTML как атрибут id. Чтобы использовать этот метод, необходимо знать, как создается значение ClientID. В этом документе объясняется, что означают имеющиеся алгоритмы и как выбрать один из них.

Чтобы получить доступ к элементу управления из клиентского скрипта, выполните следующие действия

  1. Добавьте элемент управления на веб-страницу или в пользовательский элемент управления.

  2. Задайте для свойства ClientIDMode одно из следующих значений:

    • AutoID . Применяйте это значение, когда клиентский скрипт, который планируется использовать, уже имеется, а скрипт ожидает, что значения ClientID будут создаваться с помощью алгоритма, который применялся в .NET Framework 3.5 и более ранних версиях. Значение свойства ClientID генерируется путем объединения свойства ClientID родительского контейнера именования элемента управления и свойства ID элемента управления. Когда этот алгоритм применяется в связанном с данными сценарии, после значения ClientID родительского элемента управления и перед значением ID элемента управления вставляется значение приращения. Все сегменты разделены символом подчеркивания (_).

      ПримечаниеПримечание

      Если требуется использовать параметр настройки AutoID, то обычно нет необходимости явно задавать свойство ClientIDMode. Для веб-страницы по умолчанию задано значение AutoID, а для элемента управления на странице — Inherit. Таким образом, если не задать явным образом свойство ClientIDMode родительского элемента управления или страницы, элемент управления автоматически наследует параметр настройки AutoID. Дополнительные сведения см. в Идентификация серверного веб-элемента управления ASP.NET.

    • Static . Применяйте это значение, когда требуется, чтобы свойство ClientID содержало значение, заданное для свойства ID. Этот параметр может использоваться в пользовательском веб-элементе управления, чтобы удостовериться, что значения ClientID элементов управления, которые содержатся в пользовательском веб-элементе управления, остаются прежними независимо от места на веб-странице, где размещен пользовательский элемент управления. Дополнительные сведения см. в Пошаговое руководство. Упрощение доступа к элементам управления, размещенным в пользовательских веб-элементах управления, с помощью JavaScript.

    • Predictable . Применяйте это значение, когда элемент управления находится внутри связанного с данными элемента управления, у которого имеется свойство ClientIDRowSuffix (например, ListView или GridView), и требуется получить доступ к конкретным экземплярам элемента управления в клиентском скрипте с помощью ключевого значения из базы данных. Дополнительные сведения см. в разделе Практическое руководство. Упрощение доступа к элементам управления с привязкой к данным с помощью JavaScript.

    • Inherit . Применяйте это значение, когда требуется использовать значение ClientIDMode, которое задано для родительского контейнера элемента управления.

  3. Если для свойства ClientIDMode задано значение Predictable, задайте для свойства ClientIDRowSuffix имя поля данных, которое планируется использовать в качестве уникального идентификатора для каждого экземпляра элемента управления. Для элемента управления GridView можно ввести несколько имен полей, разделенных запятыми.

    Если свойство ClientIDRowSuffix не задано, ASP.NET использует порядковый номер в качестве суффикса ClientID. Это похоже на алгоритм, используемый для AutoID, за исключением того, что номер помещается в конце сгенерированного идентификатора, а не перед идентификатором элемента управления. В дополнение к этому, порядковый номер отображается без префикса ctrl (например, ClientID будет Container_Control_25, а не Container_ctrl25_Control).

  4. В клиентском скрипте примените метод document.getElementById и передайте ему значение ClientID, которое будет сгенерировано выбранным алгоритмом.

    В следующем примере показан пользовательский элемент управления, который включает в себя элемент управления Label со свойством ClientIDMode, которому задано значение Static. Пользовательский элемент управления также содержит клиентский скрипт, который обращается к элементу управления по ID. Поскольку для свойства ClientIDMode задано значение Static, этот пользовательский элемент управления может использоваться в любом элементе управления контейнера и иметь то же значение для свойства ClientID.

    
    <%@ Control AutoEventWireup="true" %>
    
    <script type="text/javascript">
      var seasonalSports = new Array("None selected",
                                     "Tennis",
                                     "Volleyball",
                                     "Baseball",
                                     "Skiing");
    
      function DisplaySport(x) {
          document.getElementById("SelectedSport").innerHTML
          = seasonalSports[x];
      }    
    </script>
    
    <asp:DropDownList ID="DropDownList1" runat="server" 
                      onchange="DisplaySport(this.selectedIndex);">
      <asp:ListItem Value="Select a season"></asp:ListItem>
      <asp:ListItem Value="Spring"></asp:ListItem>
      <asp:ListItem Value="Summer"></asp:ListItem>
      <asp:ListItem Value="Autumn"></asp:ListItem>
      <asp:ListItem Value="Winter"></asp:ListItem>
    </asp:DropDownList>
    <br />
    <asp:Label ID="SelectedSport" runat="server" ClientIDMode="Static">
    </asp:Label>
    
    
    
Показ: