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

本文关键字：控件 调用 ID 添加 函数 JavaScript 用户 ASP net 可以使 | 更新日期: 2023-09-27 18:15:03

我想创建一个简单的用户控件，它支持使用控件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>

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

您必须确保每个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>
相关文章：