从 Javascript 引用服务器控件

在本文中，我们将展示如何从 JavaScript 代码引用服务器端控件（服务器控件是指具有 一个 runat="server" 属性）。

通常，每个服务器控件在服务器端都有一个 ID。当从 JavaScript 访问服务器端控件时，一个常见的问题是开发人员假设控件的服务器端 ID 可以直接在 JavaScript 代码中使用来引用客户端呈现的控件。这是一个错误的假设。

呈现控件的客户端 ID 不总是与服务器端的 ID 相同。如果您将服务器端控件放置在实现 INamingContainer 标记接口的另一个控件内部，运行时将更改控件的客户端 ID，以强制在呈现的 html 文档中该 ID 的唯一性。 您可以通过控件的 ClientID 属性获取生成的客户端 ID。

注意：当您开始使用母版页或将控件放置在 GridView 控件或任何其他实现 INamingContainer 标记接口的控件内部时，您会注意到这种行为。

以下示例将展示如何使用其 ClientID 属性引用 Input 控件

<script language="javascript" type="text/javascript">
function incrementValue() {
    var txtToIncr = document.getElementById('<%= txtToIncr.ClientID %>');
    var CurrentValue = 0;
    if (txtToIncr.value != '')
        CurrentValue = parseInt(txtToIncr.value);
    txtToIncr.value = CurrentValue + 1;
}
</script>

<div>
    <input id="txtToIncr" type="text" runat="server" value="0" />
    <asp:Button ID="BtnIncrement" runat="server" Text="Increment From Client Side" UseSubmitBehavior="false"
        OnClientClick=" return incrementValue();" />
   <asp:Button ID="BtnIncrementFromServer" runat="server" Text="Increment From Server Side" />
</div>

代码后置

Protected Sub BtnIncrementServer_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles BtnIncrementServer.Click
        Dim Currentvalue As Integer = 0
        If (txtToIncr.Value <> "") Then
            Currentvalue = Integer.Parse(txtToIncr.Value)
        End If
        txtToIncr.Value = Currentvalue + 1
 End Sub

在 示例中，有两个 TextBox 控件。  第一个 "BtnIncrement" 可用于通过 JavaScript 代码更改 Input 控件的值，而另一个控件 "BtnIncrementFromServer" 用于从服务器端代码更改 Input 值。