如何在ASP.net中为可以使用控件ID调用的用户控件添加JavaScript函数
How To add JavaScript function for a user control in ASP.net that can be called using control ID
我想创建一个简单的用户控件,它支持使用控件id调用自己的javascript函数,例如,如果我有以下控件:
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="MyControl.ascx.cs" Inherits="Controls.MyControl" %>
<script type="text/javascript">
function controlClicked(ID) {
alert('Hello I am Control:'+ID);
}
</script>
我希望能够在包含用户控件
的页面上执行以下操作 <%@ Page Title="" Language="C#" MasterPageFile="~/Light.master" AutoEventWireup="true" CodeBehind="Main.aspx.cs" Inherits="Control.Main" %>
<%@ Register Src="~/Controls.MyControl.ascx" TagPrefix="uc1" TagName="MyControl" %>
<script type="text/javascript">
function btnClicked() {
myControl.controlClicked('myControl');
}
</script>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<uc1:MyControl runat="server" id="myControl" />
<asp:Button id="Button1"
Text="Call UserControl Function"
onclientclick="btnClicked"
runat="server"/>
</asp:Content>
您必须确保每个JavaScript函数都有一个唯一的名称。你可以使用UniqueID
<script type="text/javascript">
function controlClicked_<%= UniqueID %>(ID) {
alert('Hello I am Control:' + ID);
}
</script>
<asp:Button ID="Button1" Text="Call UserControl Function" runat="server" />
然后在UserControl后面的代码中设置OnClientClick
以匹配相应的JavaScript函数。
Button1.OnClientClick = "controlClicked_" + UniqueID;
有组织的方法是在这里使用javascript的原型特性。
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="MyControl.ascx.cs" Inherits="Controls.MyControl" %>
<script type="text/javascript">
var <%=this.ClientID%> =
{
controlLoaded: function(ID) {
alert('Hello I am Loaded:'+ID);
},
controlClicked: function(ID) {
alert('Hello I am Clicked:'+ID);
}
}
</script>
" & lt; % =。ClientID%>"将为页面上每次出现的"MyControl"生成一个javascript原型对象。然后,您可以使用此原型对象来调用用于特定控件发生的方法。可以这样做:
<uc1:MyControl runat="server" id="myControl1" />
<button id="btnShowAlert1" onclick="javascript:btnShowAlert1_Clicked();">Click 1 </button>
<uc1:MyControl runat="server" id="myControl2" />
<button id="btnShowAlert2" onclick="javascript:btnShowAlert2_Clicked();">Click 2</button>
<script type="text/javascript">
var myControl1 = <%=myControl1.ClientID%>;
var myControl2 = <%=myControl2.ClientID%>;
function btnShowAlert1_Clicked() {
if(typeof(myControl1) != "undefined") {
myControl1.controlClicked('myControl1');
}
}
function btnShowAlert2_Clicked() {
if(typeof(myControl2) != "undefined") {
myControl2.controlClicked('myControl2');
}
}
window.onload = function() {
if(typeof(myControl1) != "undefined") {
myControl1.controlLoaded('myControl1');
}
}
</script>
相关文章:
- 使用restangular save方法调用put与post时的控件
- 调用按钮单击事件 ajax 加载的用户控件
- 使用 WinForms GeckoFX 控件从 C# 调用 JavaScript 函数的推荐方法是什么?
- 在滑块控件离开鼠标后调用 Javascript 函数
- 多个控件的javascript函数调用
- 如何使用面向对象的 javascript 从控件调用函数
- 如何在对用户控件执行操作后调用 Web 服务
- 在数据列表控件中调用 jQuery 函数
- 在数据列表控件中调用 jQuery 函数
- 如何从用户控件调用父页面中的 javascript 函数
- 从不同的 .Net 用户控件调用相同的 javascript 函数
- 从用户控件调用 Web 服务时 asp.net 页为 null
- 调用后端时,页面会失去对齐方式,并且需要一些时间来重新对齐控件
- 如何从另一个控件调用 onclick 事件
- Metro Style App:如何从 Web 视图控件中运行的 JavaScript 代码调用 C# 方法
- 如何从 asp.net 超链接控件调用 JavaScript
- 如何从多个控件调用 JS 函数
- 无法为克隆的“选择”控件调用“更改”事件
- 数据网格中的超链接控件调用javascript
- 从flash影片控件调用JavaScript函数