Клиентский объект для управления asp.net

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

Затем вы добавляете amethod на свою серверную часть пользовательского элемента управления, чтобы сгенерировать вызов конструктора объекта 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 для записи своих аргументов, поэтому я могу быть уверен, что строки заканчиваются как строки в кавычках, а числа - это числа и т. Д.