vs2010html控件使用,vs2010中关于HTML控件与服务器控件分别和js函数混合使用的问题...

墨蓝 2022-10-06 10:55 179阅读 0赞

此文档解决以下问题：

1.在.cs文件中如何访问html控件？

在html控件中添加属性runat="server"即可

2.在html控件中，如何调用js函数？

在html控件中，利用事件绑定js函数即可，如 οnclick="showJs()"

3.在.aspx文件的js中，如何调用.cs文件自定义的变量或方法？

使用调用即可

4.在.cs文件中如何调用js函数？

通过语句this.Page.ClientScript.RegisterStartupScript(this.Page.GetType(), "", "" )调用即可

5.在.aspx文件的js中，如何访问ASP.NET服务器控件？

在服务器控件中添加属性ClientID="btnCilent" (双引号中名称自定)，由document.getElementById("")访问即可

6.在.aspx文件的js中，如何访问html控件？

遵循js语法，由document.getElementById("html控件的id")访问即可

7.在.aspx文件中，html控件如何调用.cs文件自定义的变量或方法？

需要在自定的变量或方法前面添加public，同时去除其属性runat="server"，再使用调用即可

1-1.index.aspx中，添加了Button，TextBox控件，input控件，其中Button控件绑定了点击事件btn\_Click，

![203bdb7d3fed9927d042dc8d020bd0b2.png][]

1-2.index.aspx.cs中，添加了点击事件btn\_Click，自定义方法GetStr，注意，input控件添加了属性runat="server"，使其变成服务器控件，可以在.cs文件中访问，如ipt.Value

![6d44c2524dce516879bad5d012dee339.png][]

1-3.F5,运行调试

![a1016905e2a94a5697fa9e3e40619a1f.png][]

1-4.点击Button控件，input内容改变如下

![314a322043ffb826a3d0c489eb191f3e.png][]

2-1.在input控件上调用js函数

![a798be5f2fa50f0751b375e6ee3bd5ea.png][]

2-2.运行成功

![0c904b4add67c626c8876ed8ad159f11.png][]

3-1.在js函数中获取.cs文件中定义的方法或变量，格式：

![557208c4c2b92b2ecd6d7aa4e1473360.png][]

3-2.运行成功

![260bee4a47c3fb11fcc95780b9db9e16.png][]

4-1.在.cs文件中调用js函数方法，格式：this.Page.ClientScript.RegisterStartupScript(this.Page.GetType(), "", "" );

![99e5b4e8c67160a5e2ff7dce9a8fd30f.png][]

4-2.运行成功

![cf14bd8b043698da92a78712dbc0240a.png][]

5-1.js函数中获取服务器控件TextBox的id，注意，需要在TextBox控件添加属性ClientID="txt"，否则无法获取，格式：document.getElementById("");

![d3f1905e62abd383902b7d20cbc0af00.png][]

5-2.由于服务器控件TextBox被浏览器解析后会变成html控件input，ClientID属性保证了input控件的id为“txt”，这样js才能找到其id

![e1071f20f31b610f84ee519abdcd75c7.png][]

5-3.运行成功

![1d099f835d9fb71b3235583ac16e0e7f.png][]

6-1.js获取HTML控件input 的id，格式： document.getElementById("ipt");

![7e662c52c1e8bf35ed1ae0c763ff8169.png][]

6-2.运行成功

![388d1ae7684dd03cb122600fb6112066.png][]

7-1.在HTML控件input中调用.cs文件中自定义的方法，注意：input控件需要去除属性runat="server"， 格式：

![48bc9ad538d22c5e7a91a7c4b472c958.png][]

7-2.运行成功

![dc3221baf8c5ecca157ab16c04a400f4.png][]

原文：https://www.cnblogs.com/yankyblogs/p/9481615.html

[203bdb7d3fed9927d042dc8d020bd0b2.png]: /images/20221005/e1f8822af368465ab48f474fadb2bba8.png
[6d44c2524dce516879bad5d012dee339.png]: /images/20221005/c2a4254271fe424bb1a8396ce877674f.png
[a1016905e2a94a5697fa9e3e40619a1f.png]: /images/20221005/fbb0e5c606874d67a55900d551137cb3.png
[314a322043ffb826a3d0c489eb191f3e.png]: /images/20221005/0f02021eac234b3d9ca020ce8f7248da.png
[a798be5f2fa50f0751b375e6ee3bd5ea.png]: /images/20221005/bdbb20160b194d078f5a4f34247d1b96.png
[0c904b4add67c626c8876ed8ad159f11.png]: /images/20221005/cab21bb8a5dc4ebd8c8b5f97f4b1a410.png
[557208c4c2b92b2ecd6d7aa4e1473360.png]: /images/20221005/7f7bd9b9ddad4c749649faa60a6d00a5.png
[260bee4a47c3fb11fcc95780b9db9e16.png]: /images/20221005/f93cf70f03754591bd98d85b97d5a620.png
[99e5b4e8c67160a5e2ff7dce9a8fd30f.png]: /images/20221005/fe3bcc307e9d471792528404f500b0a5.png
[cf14bd8b043698da92a78712dbc0240a.png]: /images/20221005/71ca5a49c64b4528918ff7785e08192e.png
[d3f1905e62abd383902b7d20cbc0af00.png]: /images/20221005/96f0e8b6e94a4b62b1adaf5ba8ffbd0a.png
[e1071f20f31b610f84ee519abdcd75c7.png]: /images/20221005/4d62ca85f0a14a37a67dcd66672b62b7.png
[1d099f835d9fb71b3235583ac16e0e7f.png]: /images/20221005/c11f1e473c9f4b91b8c95c4887ec816d.png
[7e662c52c1e8bf35ed1ae0c763ff8169.png]: /images/20221005/79a86b33bcef4866b99b63c3cff62b08.png
[388d1ae7684dd03cb122600fb6112066.png]: /images/20221005/b184e8f126344b1aa8d38d1591120e03.png
[48bc9ad538d22c5e7a91a7c4b472c958.png]: /images/20221005/57934895114f4d69adc5ad130d656ab7.png
[dc3221baf8c5ecca157ab16c04a400f4.png]: /images/20221005/2c6beb2264d440eabfe267662dd318c5.png