Практическое руководство. Добавление событий клиентского сценария в серверные веб-элементы управления ASP.NET

Статья
10/22/2014

Обновлен: Ноябрь 2007

Клиентские сценарии можно добавлять в элементы управления веб-узла ASP.NET декларативно — так же, как и в элементы HTML. Также события сценария клиента можно добавлять в серверные веб-элементы управления ASP.NET программными средствами, что удобно, если событие или код основывается на информации, доступной только во время выполнения.

Примечание.
Обращаться к элементам управления в клиентском сценарии можно по их идентификаторам. Дополнительные сведения см. в разделе Клиентский сценарий на веб-страницах ASP.NET.

Добавление события клиентского сценария onclick к кнопкам требует выполнения особой процедуры, которая описана ниже в данном разделе.

Примечание.
Поддержка клиентского сценария зависит от обозревателя. Например, Internet Explorer, Mozilla и обозреватели для мобильных устройств могут обеспечивать различную степень поддержки клиентских сценариев.

Декларативное добавление клиентского обработчика событий в серверный элемент управления ASP.NET

В разметке элемента управления добавьте атрибут для события — например, для onmouseover или onkeyup. В качестве значения атрибута добавьте клиентский сценарий, которые необходимо выполнить.

Примечание.
После клиентского сценария в атрибуте всегда должна ставиться точка с запятой («;»). Это необходимо для того, чтобы при создании клиентского сценария для элемента управления в ASP.NET (например, если свойству AutoPostBack элемента управления присвоено значение true) сперва запускался код разработчика.

После клиентского сценария в атрибуте всегда должна ставиться точка с запятой («;»). Это необходимо для того, чтобы при создании клиентского сценария для элемента управления в ASP.NET (например, если свойству AutoPostBack элемента управления присвоено значение true) сперва запускался код разработчика.

Любая пара «атрибут-значение» в разметке элемента управления, не соответствующая свойствам элемента управления, передается обозревателю без изменений.

В следующем примере кода приведена страница ASP.NET, на которой размещен клиентский сценарий, который изменяет цвет текста кнопки при наведении указателя мыши.

<%@ Page Language="VB"%>
<html>
<head runat="server">
  <title>Untitled Page</title>
  <script type="text/javascript">
      var previousColor;
      function MakeRed()
      {
          previousColor = window.event.srcElement.style.color;
          window.event.srcElement.style.color = "#FF0000";
      }
      function RestoreColor()
      {
          window.event.srcElement.style.color = previousColor;
      }
  </script>
</head>
<body>
  <form id="form1" runat="server">
    <asp:button id="Button1" runat="server"
      text="Button1"
        onmouseover="MakeRed();"onmouseout="RestoreColor();" />
  </form>
</body>
</html>

<%@ Page Language="C#" %>
<html>
<head runat="server">
  <title>Untitled Page</title>
  <script type="text/javascript">
      var previousColor;
      function MakeRed()
      {
          previousColor = window.event.srcElement.style.color;
          window.event.srcElement.style.color = "#FF0000";
      }
      function RestoreColor()
      {
          window.event.srcElement.style.color = previousColor;
      }
  </script>
</head>
<body>
  <form id="form1" runat="server">
  <asp:button id="Button1" runat="server" 
    text="Button1" 
      onmouseover="MakeRed();"onmouseout="RestoreColor();" />
  </form>
</body>
</html>

Программное добавление клиентского обработчика событий в элемент управления ASP.NET

В событии Init или Load на странице вызовите метод Add коллекции Attributes элемента управления.

В следующем примере кода показано, как добавить клиентский сценарий в элемент управления TextBox. Клиентский сценарий отображает длину текста в элементе управления TextBox. В сценарии предполагается, что на странице содержится элемент span с именем spanCounter.
```
Protected Page_Load(ByVal sender As Object, _
    ByVal e As System.EventArgs)
    Dim displayControlName As String = "spanCounter"
    TextBox1.Attributes.Add("onkeyup", _
        displayControlName & ".innerText=this.value.length;")
End Sub
```

protected void Page_Load(object sender, EventArgs e)
{
    String displayControlName = "spanCounter";
    TextBox1.Attributes.Add("onkeyup", displayControlName + 
        ".innerText=this.value.length;");
}

Добавление клиентского события onclick к кнопке

Задайте в качестве значения свойства OnClientClick кнопки (элементы управления Button, LinkButton, и ImageButton) клиентский сценарий, который необходимо выполнять.

В следующем примере кода показано, как добавить клиентский сценарий события щелчка мыши в элемент управления Button.

<%@ Page Language="VB" %>
<script runat="server">
    Sub Button1_Click(ByVal sender As Object, _
        ByVal e As System.EventArgs)
        Label1.Text = "Server click handler called."
    End Sub
</script>

<body>
  <form id="form1" runat="server">
    <asp:Button ID="Button1" Runat="server" 
      OnClick="Button1_Click" 
        OnClientClick="return confirm('Ready to submit.')" 
        Text="Test Client Click" />
    <br />
    <asp:Label ID="Label1" Runat="server" text="" />
  </form>
</body>
</html>

<%@ Page Language="C#" %>
<script runat="server">
    protected void Button1_Click(Object sender, EventArgs e)
    {
        Label1.Text = "Server click handler called.";
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<body>
  <form id="form1" runat="server">
    <asp:Button ID="Button1" Runat="server" 
      OnClick="Button1_Click" 
        OnClientClick="return confirm('Ready to submit.')" 
        Text="Test Client Click" />
    <br />
    <asp:Label ID="Label1" Runat="server" text="" />
  </form>
</body>
</html>

Безопасность

Клиентский сценарий может выполнять потенциально вредоносные функции на клиентском компьютере. Следует исключительно осторожно подходить к записи сценария на странице, особенно в том случае, если он создается или изменяется в ответ на ввод данных пользователем. Дополнительные сведения см. в разделе Общие сведения об использовании сценариев.

См. также

Задачи

Практическое руководство. Настройка атрибутов HTML для элементов управления на веб-страницах ASP.NET

Пошаговое руководство. Добавление клиентского сценария динамически на веб-страницы ASP.NET

Основные понятия

Клиентский сценарий на веб-страницах ASP.NET

Поделиться через