在Web开发中,服务器控件是构建动态网页的重要组成部分。服务器控件通常具有一个在服务器端的ID属性(runat="server")。然而,开发者在尝试通过JavaScript访问服务器端控件时,常会错误地假设可以直接使用服务器端ID来引用客户端渲染后的控件。这种假设是不正确的。
实际上,客户端渲染后的控件ID并不总是与服务器端ID相同。如果将服务器控件放置在实现了INamingContainer标记接口的另一个控件内部,运行时会更改控件的客户端ID,以确保在渲染的HTML文档中该ID的唯一性。可以通过控件的ClientID属性获取最终的客户端ID。
当开始使用母版页(MasterPages)或者将控件放置在如GridView等实现了INamingContainer标记接口的其他控件内部时,将注意到这种行为。
以下示例将展示如何使用其ClientID属性引用输入控件:
<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>
在示例中,有两个文本框控件。第一个 "BtnIncrement" 可以通过JavaScript代码来更改输入控件的值,而另一个控件 "BtnIncrementFromServer" 用于从服务器端代码更改输入值。
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