Wilfried Woivré & .Net

Silverlight : Utilisation du Json pour une application “Cross-Site”

JUIN17

Dans ma quête de toujours vouloir accéder aux données en Silverlight, je vous ramène une petite astuce tout en JavaScript  !!

Bon alors histoire de vous résumer un peu le précédent article pour ceux qui ne voudrait pas le relire….

J’avais montré qu’en Silverlight on pouvait accéder à des données situées en base par l’intermédiaire d’une page en PHP qui génère un XML avec ces données, ou alors un Web Service sur une page ASPX, et bien entendu toutes les combinaisons possibles de ces deux exemples.

Cependant il y avait un souci avec ce genre d’accès aux données, il fallait que le site distant ait à la racine de son serveur IIS ou Apache un fichier XML autorisant justement l’accès de Silverlight à leurs données. Ce qui il faut l’avouer ne facilite pas toujours les choses ….

Il existe cependant une méthode qui existe en Javascript pour créer une application dîtes “Cross-Site”. Cette méthode est dans plusieurs de mes projets pour apprendre Silverlight, mais j’ai néanmoins retrouvé un très bon site ou tous le code est montré en détail.

http://dimebrain.com/2008/12/how-to-make-cross-site-service-calls-in-silverlight-using-json.html (Site en anglais)

Moi je vais vous présenter donc très succinctement comment cela marche.

Donc en fait comme le nom l’indique, cette opération est possible grâce à la communication du plug-in Silverlight avec le code DOM de la page qui l’héberge. C’est donc pour cela que l’on peut voir que le code exécuter en C# pour appeler ce type de service est assez maigre.

public static void SendJson(this string url)
{
    if (!_scriptables.ContainsKey("Json"))
    {
        HtmlPage.RegisterScriptableObject("Json", new JsonEvent());
    }

    var id = HtmlPage.Plugin.Id;
    HtmlPage.Window.Invoke("jsonLoad", url, id);
}

En effet dans cette méthode d’extension de la classe String, on peut appeler de façon simple et néanmoins efficace notre méthode JavaScript ci-dessous

function jsonLoad(url, id) {
    $id = id;
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;
    script.src += hasParameters(url) ? '&' : '?';
    script.src += 'callback=jsonCallback';

    var head = document.getElementsByTagName('head')[0];
    head.appendChild(script);
};

C’est donc cette fonction qui va appeler notre site distant afin qu’il effectue le traitement et nous renvoie les données via le callback en Javascript.

function jsonCallback(jsonData) {
    var id = $id;
    var silverlight = document.getElementById(id);

    if (silverlight) {
        var response = JSON.stringify(jsonData);
        silverlight.Content.Json.Received(response);
    }
};

Et voilà comme “par magie”, on récupère nos données dans notre application Silverlight., on peut donc les traiter et les afficher par la suite.

 

Bon alors je voulais vous faire une petite démonstration en récupérant quelques articles de mon blog (oui je sais c’est follement original) mais j’ai appris à mes dépends que WordPress ne contient ni le fichier XML qu’il faut pour le premier mode d’accès aux données que j’ai cité. Et qu’en plus, il ne supporte pas nativement les fonctions de CallBack en Javascript, certains plug-in le font mais on ne peut en installer sur les sites hébergés chez WordPress.

Donc voilà, comme quoi il faut faire très attention à la façon d’accéder à des données distantes.

Remonter

Cas Pratique : Utilisation d'un Repeater à l'intérieur d'un UpdatePanel

MARS30

Aujourd'hui , lors de la réalisation d'un projet, on m'a demandé de gérer l'ajout de multi pièces jointes dans notre solution Web. En sachant que l'utilisateur peut choisir deux types de documents. Pour la partie technique notre projet est un projet ASP.Net 2.0 avec très forte utilisation du JavaScript dans celui ci. Dans l'implémentation du projet, nous avons déjà crée un module de pièce jointe qui ouvre une popup et qui permet d'ajouter un de nos fichiers, et renseigne la fenêtre mère en JavaScript afin d'obtenir une meilleure navigation De façon simplifié, voilà ce qu'on doit avoir : Etat avec 0 pièces jointes :

On ajoute une pièce jointe :

Etat avec 1 pièces jointes :

Ceci est donc possible avec un nombre infini de pièces jointes. L'idée est donc d'utiliser un repeater placé dans un UpdatePanel afin d'obtenir un postback asynchrone. J'ai donc réalisé cette première implémentation : <asp:UpdatePanel ID="UpdatePanel1" runat="server">

<Triggers>

<asp:AsyncPostBackTrigger ControlID="hf" EventName="ValueChanged" />

</Triggers>

<ContentTemplate>

<asp:HiddenField runat="server" ID="hf" OnValueChanged="hf_ValueChanged" />

<asp:Repeater runat="server" ID="repeat" OnItemDataBound="repeat_ItemDataBound">

<ItemTemplate>

<UC:PieceJointe runat="server" ID="pjnew" PJ='<%# Container.DataItem %>' />

</ItemTemplate>

</asp:Repeater>

</ContentTemplate> </asp:UpdatePanel> Néanmoins, même avec l'ajout du Trigger, le postback asynchrone ne s'effectue pas du fait que la modification du contenu d'un HiddenField ne soulève pas un PostBack (ceci dit fort heureusement, sinon le composant perdrait de son intérêt). Après donc recherche sur internet pour effectuer ce fameux postBack j'ai trouvé cette méthode Javascript :

function postBackHiddenField(hiddenFieldID) {

var hiddenField = $get(hiddenFieldID);

if (hiddenField) {

hiddenField.value = "";

__doPostBack(hiddenFieldID, '');

}

} Grâce à cette fonction, le postBack s'effectue et je peux ainsi reconstruire mon Repeater pour afficher toutes les pièces jointes choisies par l'utilisateur. Voilà, je voulais vous faire partager la solution à un problème que j'ai eu aujourd'hui. Je vous mets de plus, la version simple (celle utilisé pour l'article) afin que vous ayez plus de détails sur l'implémentation.

Remonter