asp:Content 模式下通过Js 调用 服务端控件后台事件

上善若水

一般html下，如果存在asp 的服务端控件，可以像通过Js 调用 服务端控件后台事件 介绍那样在JavaScript中访问这些控件

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

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

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

1. <asp:Content ID="test1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
2. <script language="javascript" type="text/javascript">
3. function test(dp) {
4. var sIndex = dp.selectedIndex;
5. var sText = dp.options[dp.selectedIndex].text;
6. var sValue = dp.value;
7. alert(sValue);
9. document.getElementById("ctl00_ContentPlaceHolder1_Button1").click();
10. alert("ok");
11. }
12. function test2() {
13. document.getElementById("ctl00_ContentPlaceHolder1_DropDownList1").onchange();
14. }
15. </script>
16. <div>
17. <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
18. <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
19. <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
20. </div>
21. <asp:DropDownList ID="DropDownList1" runat="server" OnSelectedIndexChanged="DropDownList1_TextChanged" onchange="test(this)">
22. <asp:ListItem Text="文本1" Value="1"></asp:ListItem>
23. <asp:ListItem Text="文本2" Value="2"></asp:ListItem>
24. <asp:ListItem Text="文本3" Value="2"></asp:ListItem>
25. </asp:DropDownList>
26. <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
27. <input type="button" id="btn2" value="测试" onclick="test2()" />
30. </asp:Content>

复制代码

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

1. <asp:Content ID="test1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
2. <script language="javascript" type="text/javascript">
3. function test(dp) {
4. var sIndex = dp.selectedIndex;
5. var sText = dp.options[dp.selectedIndex].text;
6. var sValue = dp.value;
7. alert(sValue);
9. document.getElementById("ContentPlaceHolder1_Button1").click();
10. alert("ok");
11. }
12. function test2() {
13. document.getElementById("ContentPlaceHolder1_DropDownList1").onchange();
14. }
15. </script>
16. <div>
17. <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
18. <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
19. <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
20. </div>
21. <asp:DropDownList ID="DropDownList1" runat="server" OnSelectedIndexChanged="DropDownList1_TextChanged" onchange="test(this)">
22. <asp:ListItem Text="文本1" Value="1"></asp:ListItem>
23. <asp:ListItem Text="文本2" Value="2"></asp:ListItem>
24. <asp:ListItem Text="文本3" Value="2"></asp:ListItem>
25. </asp:DropDownList>
26. <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
27. <input type="button" id="btn2" value="测试" onclick="test2()" />
30. </asp:Content>

复制代码

 

来源：https://blog.csdn.net/mystonelxj/article/details/82826411
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！