博客

一般html下，如果存在asp 的服务端控件，可以像

通过Js 调用 服务端控件后台事件

介绍那样在JavaScript中访问这些控件

但如果页面存在母版页面（Master），而且采用了asp:ContentPlaceHolder 这种的子页面调用方式，这时就需要调整JavaScript的调用方式，直接以控件名称访问服务端控件将失效。因为服务端控件名称被转义。

在不同的版本（Framework2.0，Framework4.0），asp:Content中的服务端控件转义形式有所差异，通过JavaScript访问这些服务端控件需要注意

2.0模式下访问子页面服务端控件范例

<asp:Content ID="test1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
        <script language="javascript" type="text/javascript">
            function test(dp) {
                var sIndex = dp.selectedIndex;
                var sText = dp.options[dp.selectedIndex].text;
                var sValue = dp.value;
                alert(sValue);

                document.getElementById("ctl00_ContentPlaceHolder1_Button1").click();
                alert("ok");
            }
            function test2() {
                document.getElementById("ctl00_ContentPlaceHolder1_DropDownList1").onchange();
            }
    </script>
        <div>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
         <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
    </div>
        <asp:DropDownList ID="DropDownList1" runat="server" OnSelectedIndexChanged="DropDownList1_TextChanged" onchange="test(this)">
             <asp:ListItem Text="文本1" Value="1"></asp:ListItem>
       <asp:ListItem Text="文本2" Value="2"></asp:ListItem>
       <asp:ListItem Text="文本3" Value="2"></asp:ListItem>
        </asp:DropDownList>
        <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
        <input type="button" id="btn2" value="测试" onclick="test2()" />


</asp:Content>

4.0模式下访问子页面服务端控件范例

 <asp:Content ID="test1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
        <script language="javascript" type="text/javascript">
            function test(dp) {
                var sIndex = dp.selectedIndex;
                var sText = dp.options[dp.selectedIndex].text;
                var sValue = dp.value;
                alert(sValue);

                document.getElementById("ContentPlaceHolder1_Button1").click();
                alert("ok");
            }
            function test2() {
                document.getElementById("ContentPlaceHolder1_DropDownList1").onchange();
            }
    </script>
        <div>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
         <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
    </div>
        <asp:DropDownList ID="DropDownList1" runat="server" OnSelectedIndexChanged="DropDownList1_TextChanged" onchange="test(this)">
             <asp:ListItem Text="文本1" Value="1"></asp:ListItem>
       <asp:ListItem Text="文本2" Value="2"></asp:ListItem>
       <asp:ListItem Text="文本3" Value="2"></asp:ListItem>
        </asp:DropDownList>
        <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
        <input type="button" id="btn2" value="测试" onclick="test2()" />


</asp:Content>