Client object for asp.net control

Question

Hello guys. I'm trying to find out how to get properties and client methods of my controls be accessible via client scripts. For example, here is a very simple sample control:

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

I wish another controls to access it the way like this on client side:

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

, where set_text is something like

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

What kind of changes should I do to my control to get it working this way? Some code example will be very helpful. Thanks in advance!

Answer 1

When I have a user control that needs a JavaScript exposure, I typically define a JavaScript object to encapsulate its behavior. So in your example I would have a separate JavaScript file MyCustomControl.js that looks something like:

// 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);
  }
};

Then you add amethod to your user control server-side to generate a JavaScript object constructor call for the user control instance:

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

You can then embed the output of GetClientSideObject() in dynamically generated script to create an instance of your control's JavaScript object:

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

One of the nice things about this approach is most of your JavaScript is static and ends up in a separate .js file, which can be cached/combined/minified/etc just like any other script. It also clearly associates the instance with the original user control for anyone reading the code.

One thing to watch out for however is serializing your arguments to the constructor in GetClientSideObject(). I tend to use the JavaScriptSerializer class to write out my arguments, so I can be sure strings end up as quoted strings, and numbers are numbers, etc.