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

Question

例如:我有一个用户控件，我们称它为“MyControl1”，我想创建可以从父页面上的 javascript 调用的“Show()”和“Hide()”javascript 函数 - 类似于“MyControl1.Show();"

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

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

如果能做这样的事情就好了:

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

我该怎么做呢？我找到的每篇文章都是关于如何在用户控件中 Hook 事件的，我只希望父页面能够调用它认为合适的某些函数——或者也许有一种方法可以使用事件来做我想做的事情做，但我就是不明白。

编辑:这似乎没有正确表达，这个怎么样...

这就是我假设的控件的样子:

<%@ 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(无论它是否在用户控件中)，但是如果您在该页面上有 2 个这样的控件将不起作用，那么您如何创建 javascript 以便父级页面可以区分它要调用哪个用户控件功能？

Answer 1

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

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

为了在页面呈现时获取页面上控件的 ID，您需要执行如下操作:

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

    //dostuff

});

第一行是从运行时获取 ClientID 的 C# 内联代码。

更新**

如果您想从用户控件所在的页面获取用户控件的 clientID，您需要这样做:

//点网页服务器端

protected string controlClientId;

void Page_Load(object sender, Eventargs e)
{

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

}

//在页面客户端

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

    //dostuff

});