Пошаговое руководство. Упрощение доступа к элементам управления, размещенным в пользовательских веб-элементах управления, с помощью JavaScript

В этом практическом руководстве будет создан пользовательский веб-элемент управления, который отображает элемент управления DropDownList и элемент управления Label. При выборе в раскрывающемся списке одного из четырех времен года клиентский скрипт задает текст метки названию вида спорта, которым обычно занимаются в это время года.

Элемент управления Label отображается как элемент span в HTML, а клиентский скрипт получает ссылку на элемент span с помощью свойства id. Для ClientIDMode элемента управления Label будет задано значение Static, так что идентификатор останется прежним, а клиентский скрипт будет работать независимо от места на странице, где будет помещен пользовательский элемент управления.

Чтобы создать пользовательский веб-элемент управления с элементом управления Label, который генерирует предсказуемые атрибуты идентификатора HTML, задайте для свойства ClientIDMode элемента управления Label значение Static.

Создание пользовательского элемента управления

  1. В Visual Studio создайте новый пользовательский веб-элемент управления с именем Seasons.ascx.

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

  3. Переключитесь в представление конструктора, если еще не сделали это.

  4. Откройте меню Задачи DropDownList и щелкните Правка элементов.

  5. Добавьте элементы со следующими значениями:

    • Выбрать сезон

    • Весна

    • Лето

    • Осень

    • Зима.

  6. Добавьте элемент управления Label в пользовательский элемент управления после элемента управления DropDownList.

  7. Для элемента управления Label в окне Свойства для параметра ID задайте значение SelectedSport, для ClientIDMode задайте Static и очистите поле Текст.

  8. Переключитесь в представление исходного кода.

  9. Между двумя элементами управления вставьте разрыв (<br />).

  10. Перед элементом управления asp:DropDownList добавьте следующий клиентский скрипт.

    
    
    <script type="text/javascript">
      var seasonalSports = new Array("None selected",
                                     "Tennis",
                                     "Volleyball",
                                     "Baseball",
                                     "Skiing");
    
      function DisplaySport(x) {
          document.getElementById("SelectedSport").innerHTML
          = seasonalSports[x];
      }    
    </script>
    
    
    
    

    Этот скрипт использует свойство selectedIndex элемента HTML select, который отображается для серверного элемента управления DropDownList, чтобы выбрать название вида спорта, соответствующего выбранному названию времени года. Это задает привязку свойства innerHTML элемента span, который отображается для элемента управления Label, к этому названию.

  11. Добавьте атрибут onChange к элементу asp:DropDownList, что приведет к запуску функции DisplaySport каждый раз, когда выбор DropDownList изменится. DropDownList будет отображаться как элемент HTML select, а функции DisplaySport будет передаваться значение свойства selectedIndex элемента select.

    
    <asp:DropDownList ID="DropDownList1" runat="server" 
                      onchange="DisplaySport(this.selectedIndex);">
    
    
    

    Разметка выполненного серверного элемента управления теперь похожа на следующее.

    
    <%@ 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>
    
    
    

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

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

  1. Создайте новую главную страницу с именем Seasons.master.

  2. Создайте новую веб-форму с именем Seasons.aspx, выбрав Seasons.master в качестве ее главной страницы.

  3. Не закрывая Seasons.aspx, переключитесь в представление конструктора.

  4. Перетащите пользовательский элемент управления Seasons.ascx из обозревателя решений на поверхность конструирования.

    Разметка главной страницы Seasons.master теперь похожа на следующее.

    
    <%@ Master AutoEventWireup="true" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <asp:ContentPlaceHolder id="head" runat="server">
        </asp:ContentPlaceHolder>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
    
            </asp:ContentPlaceHolder>
        </div>
        </form>
    </body>
    </html>
    
    
    

    А разметка страницы содержимого Seasons.aspx теперь похожа на следующее.

    
    <%@ Page Title="" MasterPageFile="~/Seasons.master" AutoEventWireup="true" %>
    
    <%@ Register Src="Seasons.ascx" TagName="Seasons" TagPrefix="uc1" %>
    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
      <uc1:Seasons ID="Seasons1" runat="server" />
    </asp:Content>
    
    
    
  5. Правой кнопкой мыши щелкните Seasons.aspx в обозревателе решений и выберите Просмотреть в браузере.

    В поле с раскрывающимся списком отобразится Выбрать сезон.

    Раскрывающийся список на странице Seasons.ascx
  6. Выберите Весна.

    Под полем с раскрывающимся списком отобразится Теннис.

  7. Просмотрите исходный код страницы в браузере.

    Элемент управления Label отображается как элемент диапазона.

    <span id="SelectedSport"></span>
    

    Если значение свойства ClientIDMode элемента управления Label не было бы задано, атрибут id отобразился бы как ctl00_ContentPlaceHolder1_Seasons1_SelectedSport. Поскольку id изменяется в случае помещения пользовательского элемента управления в другой контейнер именования — на другую главную страницу или страницу содержимого либо в другой элемент управления контейнера на странице, будет труднее написать клиентский скрипт, который продолжал бы работать независимо от того, как и где используется этот пользовательский элемент управления.

В этом практическом руководстве было показано, как использовать клиентский скрипт для доступа к элементам управления, размещенным в пользовательском веб-элементе управления. После этого полезно больше узнать о том, как ASP.NET создает значения ClientID, или об особых соображениях, имеющих отношение к связанным с данными элементам управления. В следующем списке предлагаются разделы для дополнительного изучения:

Показ: