Question

我想创建一个简单的用户控件，支持使用控件ID调用自己的javascript函数，例如，如果我有以下控件：

* { box-sizing: border-box; }


.padding-top--sm { padding-top: 1rem; }
.padding-bottom--sm { padding-bottom: 1rem; }

我希望能够在包含用户控件的页面上执行以下操作

<%@ 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>

Answer 1

您必须确保每个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;

Answer 2

有条理的方法是在这里使用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>

＆＃34;＆LT;％= this.ClientID％GT;＆＃34;将为每次出现的＆＃34; MyControl＆＃34;生成一个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>

如何为ASP.net中的用户控件添加可以使用控件ID调用的JavaScript函数

2 个答案: