Question

我正在尝试了解如何通过客户端脚本访问我的控件的属性和客户端方法。例如，这是一个非常简单的样本控件：

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

<script type="text/javascript">
    $(function() {
        $("#<%=lnksave.ClientID %>").click(function() {
            $("#<%=hiddenText.ClientID %>").val($("#<%=txtText.ClientID %>").val());
        });

        $("#<%=lnkshow.ClientID %>").click(function() {
            alert($("#<%=hiddenText.ClientID %>").val());
        });
    });
</script>

<asp:HiddenField runat="server" ID="hiddenText" />
<input type="text" runat="server" id="txtText" />
<a id="lnksave" runat="server" href="#">Save text</a>
<a id="lnkshow" runat="server" href="#">Show text</a>

我希望其他控件能够在客户端以这样的方式访问它：

<%@ Register Src="~/MyCustomControl.ascx" TagName="CustomControl" TagPrefix="mycontrols" %>
...
<asp:ScriptManager runat="server" ID="scriptManager1"></asp:ScriptManager>
<div>
    <mycontrols:CustomControl runat="server" ID="control1" />
</div>
...
<script type="text/javascript">
    $find("<%=control1.ClientID %>").set_text("sample text");
</script>

，其中set_text类似于

function(text) {
    $("#<%=hiddenText.ClientID %>").val(text);
}

我应该对我的控件进行哪些更改才能让它以这种方式工作？一些代码示例将非常有用。提前致谢！

Answer 1

当我有一个需要JavaScript曝光的用户控件时，我通常会定义一个JavaScript对象来封装它的行为。因此，在您的示例中，我将有一个单独的JavaScript文件MyCustomControl.js，如下所示：

// MyCustomControl JavaScript object constructor:
function MyCustomControl(clientID) {
  this.id = clientID;
}

// MyCustomControl prototype:
//   Declare any methods for the object here.
MyCustomControl.prototype = {
  set_text: function(text) {
    $("#" + this.id).val(text);
  }
};

然后向用户控件服务器端添加一个方法，为用户控件实例生成一个JavaScript对象构造函数调用：

public string GetClientSideObject()
{
  var serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
  return string.format("new MyCustomControl({0})",
    serializer.Serialize(this.ClientID));
}

然后，您可以在动态生成的脚本中嵌入GetClientSideObject()的输出，以创建控件的JavaScript对象的实例：

<script type="text/javascript>
  var myUserControl = <%= this.myUserControl.GetClientSideObject() %>;
  myUserControl.set_text('Foo Bar Baz');
</script>

这种方法的一个好处是你的大部分JavaScript都是静态的，最后是一个单独的.js文件，可以像任何其他脚本一样缓存/组合/缩小/等。它还明确地将实例与原始用户控件相关联，以便任何人阅读代码。

值得注意的一件事是将参数序列化为GetClientSideObject()中的构造函数。我倾向于使用JavaScriptSerializer类写出我的参数，所以我可以确定字符串最终是引用字符串，数字是数字等。

asp.net控件的客户端对象

1 个答案: