javascript-如何为ASP.NET用户控件创建客户端API？

例如：我有一个用户控件,我们将其称为“ MyControl1”,我想创建“ Show()”和“ Hide()” javascript函数,这些函数可以从父页面上的javascript调用,例如“ MyControl1.Show”. ();”

显然,页面上可能有多个控件,因此,如果您在页面上放置了2个控件,则：

   <MyTag:MyControl ID="MyControl1" runat="server" />
   <MyTag:MyControl ID="MyControl2" runat="server" />

能够做类似的事情会很好：

   function ParentPageJavascriptFunction(){
      MyControl1.Show();
      MyControl2.Hide();
   }

我该怎么做呢？我发现的每一篇文章都是关于如何在用户控件中挂钩事件的,我只是希望父页面能够调用它认为合适的某些函数-也许有一种方法可以使用事件来完成我想做的事情是的,我只是不明白.

编辑：这似乎没有正确遇到,怎么样…

我的假设控件如下所示：

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="MyControl.ascx.cs" Inherits="controls_MyControl" %>

<script type="text/javascript">
    function Display(msg) {
        var Label1ClientID = '<%= Label1.ClientID %>';
        document.getElementById(Label1ClientID)... (display the message)
    } 
</script>

<asp:Label ID="Label1" runat="server"> </asp:Label>

现在,“父”页面将如下所示注册控件：

<%@ Register Src="~/controls/MyControl.ascx" TagName="MyControl" TagPrefix="MyTag" %>

在体内它具有：

<asp:Button ID="MyButton1" runat="server" Text="Display" OnClientClick="javascript:MyControl1.Display('hello'); return false;" />
    <MyTag:MyControl Id="MyControl1" runat="server">
    </MyTag:MyControl>

唯一的问题显然是行不通的-但这就是我要解决的问题.您如何进行这项工作？我希望能够允许用户控件嵌套在其中的页面(父页面)能够调用该用户控件的Display函数.我意识到您可以直接调用Display,因为它只是js(无论是否在用户控件中),但是如果该页面上有其中两个控件不起作用,那么如何创建JavaScript,使父级页面可以区分要调用的User Controls函数？

解决方法:

您的尝试非常简单. asp.net控件是将纯HTML包装到页面上的控件中的一种庞大方法.为了能够在控件上调用javascript事件,您必须知道控件呈现到页面的结果的ID.

注意：所有.net控件都有一个名为.ClientID的成员,该成员表示运行时将生成的内容,以作为旨在封装/呈现的HTML的ID.

为了在呈现控件时获得页面上控件的ID,您需要执行以下操作：

var dotNetHtmlClientID = '<%= txtMessage.ClientID %>';
$('#' + dotNetHtmlClientID).bind('onclick', function(){

    //dostuff

});

第一行是c#内联代码,用于从运行时获取ClientID.

更新**

如果要从其所在页面获取用户控件的clientID,则需要执行以下操作：

//在点网页服务器端

protected string controlClientId;

void Page_Load(object sender, Eventargs e)
{

     controlClientId = Page.FindControl("MyControlThatImBindingEventToDotNetId").ClientID;

}

//在页面客户端

var dotNetHtmlClientID = '<%= controlClientId %>';
$('#' + dotNetHtmlClientID).bind('onclick', function(){

    //dostuff

});

标签：user-controls,javascript,net
来源： https://codeday.me/bug/20191102/1991788.html