Objet client pour le contrôle asp.net

Question

J'essaie de savoir comment obtenir les propriétés et les méthodes client de mes contrôles accessibles via des scripts client. Par exemple, voici un échantillon très simple commande:

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

Je souhaite un autre contrôle à elle accéder à la première comme celui-ci sur le côté client:

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

, où set_text est quelque chose comme

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

Quel genre de changements dois-je faire à mon contrôle pour le faire fonctionner de cette façon? Un exemple de code sera très utile. Merci d'avance!

Answer 1

Lorsque j'ai un contrôle utilisateur qui nécessite une exposition JavaScript, je définis généralement un objet JavaScript pour encapsuler son comportement. Donc, dans votre exemple, j'aurais un fichier JavaScript distinct MyCustomControl.js qui ressemble à:

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

Ensuite, vous ajoutez aMethod à votre côté serveur de contrôle de l'utilisateur pour générer un appel constructeur d'objet JavaScript pour l'instance de contrôle de l'utilisateur:

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

Vous pouvez ensuite intégrer la sortie de GetClientSideObject() dans le script généré dynamiquement pour créer une instance de l'objet JavaScript de votre commande:

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

L'une des bonnes choses à propos de cette approche est que la plupart de votre JavaScript est statique et se retrouve dans un fichier .js distinct, qui peut être mis en cache/combiné/minifié/etc comme n'importe quel autre script. Il associe également clairement l'instance au contrôle utilisateur d'origine pour quiconque lisant le code. Cependant, une chose à surveiller est la sérialisation de vos arguments au constructeur au GetClientSideObject(). J'ai tendance à utiliser la classe JavaScriptSerializer pour écrire mes arguments, donc je peux être sûr que les chaînes se terminent par des chaînes entre guillemets, et que les nombres sont des nombres, etc.