Bienvenue à Blogs CodeS-SourceS Identification | Inscription | Aide

Atteint de JavaScriptite Aiguë [Cyril Durand]

Expert ASP.net Ajax et WCF, Cyril Durand parle dans son blog de point techniques sur ASP.net, ASP.net Ajax, JavaScript, WCF et .net en général. Cyril est également consultant indépendant, n'hésitez pas à le contacter pour de l'assistance sur vos projets

Actualités

  • Blog de Cyril DURAND, passionné de JavaScript, Ajax, ASP.net et tout ce qui touche au developpement Web Client-Side.

    N'hésitez pas à me contacter pour vos projets .net : architecture, accompagnement, formation, ...

    View Cyril Durand's profile on LinkedIn
    hit counters


    Expertise Commerce server et BizTalk

Ajax et Upload - part 2 : utilisation d'un UpdatePanel et d'un FileUpload

Dans un précédent post, j'ai expliqué comment uploader un fichier sans faire un submit complet du formulaire : Ajax et Upload - part 1. Je viens de poster sur aspfr une solution pour que les FileUpload fonctionnent avec les UpdatePanel.

ASP.net Ajax : UpdatePanel et FileUpload

Pour faire fonctionner tout ce petit monde, j'ai fait un nouveau contrôle qui hérite de FileUpload, rajouté un HttpModule et un brin de JavaScript.

Voici comment cela fonctionne : imaginez que vous avez une page avec un FileUpload, un UpdatePanel, un Label et un Button, lorsque vous cliquez sur le bouton vous voulez envoyer le fichier au serveur et écrire la taille du fichier envoyé dans le Label et tout ça sans faire un rafraichissement complet de la page. Voici comment cela se passe :

  1. l'utilisateur clique sur le bouton
  2. l'événement initializeRequest du PageRequestManager est déclenché
    1. j'annule la requête XMLHttpRequest que cela aurait du faire
    2. je créé une nouvelle iframe
    3. je modifie le formulaire pour qu'il post dans l'iframe (cf Ajax et Upload - part 1)
    4. je mets un flag dans un champ caché
    5. je redéclenche le postback qui se fait alors normalement
  3. La requête http, arrive au niveau de l'UploadModule
  4. L'évenement BeginRequest de l'UploadModule est declenché
    1. je détecte la requête grâce au flag du champ caché
    2. j'enregistre le contenu de la réponse dans un StringBuilder grâce à un Response.Filter
  5. La requête s'effectue normalement au niveau de la page
  6. L'évenement EndRequest de l'UploadModule est declenché
    1. Le contenu de la réponse est stocké dans le cache pendant 5 minutes, cette réponse est associée à un Guid
    2. L'uploadModule renvoie du HTML qui exécute la méthode CS.FileUpload.callBack en passant en paramètre l'id de la réponse
  7. L'iframe reçoit la réponse et exécute la méthode CS.FileUpload.callBack
    1. je mets un nouveau flag dans un champ caché suivi de l'id de la réponse
    2. je déclenche un vrai AsyncPostBack qui sera fait via XmlHttpRequest
  8. L'événement BeginRequest de l'UploadModule est declenché
    1. je détecte la requête grâce au flag du champ caché
    2. j'extrais l'id de la réponse demandé
    3. je renvoie la réponse stocké dans le cache
    4. je supprime la réponse du cache
    5. je mets fin à la requête
  9. Coté client, le PageRequestManager reçoit la réponse comme une réponse classique d'AsyncPostBack
    1. le PageRequestManager continue son exécution et rafraichit les différents UpdatePanels 

Pour simplifier l'utilisation de mon contrôle on peut utiliser le TagMapping, qui remplacera tous les classiques FileUpload par mon FileUpload sans modifier les pages du projet. Cela a pour avantage de simplifier la mis en place de cette solution puisqu'il suffit de rajouter un HttpModule et un TagMapping dans le web.config.

Vous trouverez dans le zip associé à la source, le projet CSAjaxUpload ainsi qu'un site de test. Attention ce projet est un prototype, cela ressemble plus à un "proof of concept" qu'à une vrai solution. Je suis impatient d'avoir des retours sur ce projet :-)

Posted: dimanche 6 mai 2007 16:35 par cyril
Ce post vous a plu ? Ajoutez le dans vos favoris pour ne pas perdre de temps à le retrouver le jour où vous en aurez besoin :

Commentaires

DevThony a dit :

Bonjour Cyril

Très intéressant cet Upload de fichier.

J'ai testé ton controle sur un site Web de test.

Ca marche nickel (a l'exception d'un plantage lors de l'acces à UploadObject car il arrive que mon HttpContext.Current soit null).

Ensuite, j'ai inclus tes 3 fichiers directement sur mon site Web. J'ai juste modifié la reférence au javascript qui n'est plus (dans mon cas) une ressource incorporée.

Ca marche tres bien sous Firefox par contre sous IE l'appel à la fonction javascript "callback" ne s'effectue pas. La reponse est bien envoyé à l'IFrame via le UploadModule mais la fonction n'est pas exécuté ensuite sur le client.

Aurais tu une idée, une raison possible ?

# mai 10, 2007 22:53

cyril a dit :

La ressource n'est plus incorporée ? c'est à dire ?

En tout cas la meilleure chose que tu puisse faire c'est d'analyser les requêtes HTTP pour voir ce qu'il peut se passer.

# mai 11, 2007 00:27

DevThony a dit :

Je viens d'analyser les requetes HTTP.

Le client recoit bien les trames contenant l'appel de la fonction callback, mais il ne répond pas. Ca s arrete la (sous IE).

J ai effectué d'autres test. Sur mon site web, quand ma page reference une master page, ca fonctionne bien.

Avec le meme code, si ma page ne reference pas de master page, ca ne fonctionne plus sous IE !

Je ne vois pas l'influence que peux avoir la master page sur le principe mis en place.

Je reste perplexe, ta solution semble bonne pourtant.

# mai 11, 2007 12:53

cyril a dit :

regarde au niveau des ID, peut etre que a un endroit j'ai utiliser un ClientID au lieu d'un UniqueID ou vice-versa

c'est la seule chose que je vois que peut influencer l'utilisation de master page

# mai 11, 2007 13:32

DevThony a dit :

Salut

J'ai règlé mon probleme en ajoutant:

       application.Response.Flush();

       application.CompleteRequest();

lors de l'envoi de la reponse callback dans le PostRequestHandlerExecute.

J'utilise mon FileUpload dans un UC qui est créé dynamiquement.

J'ai modifié la fonction "CreateChildControls" dans FileUpload.cs pour faire l'enregistrement du hiddenfield au niveau du scriptmanager et non pas au niveau de la page :

"ScriptManager.RegisterHiddenField(this, K_HiddenFieldName, string.Empty)"

J ai encore un probleme :-)

Il arrive que la reponse finale (mise à jour des update panel) ne soit pas inséré dans la page mais qu elle remplace la page entiere.

Je me retrouve avec une page HTML qui ne contient que le resultat de la mise à jour des update panel.

J espere etre assez clair.

# mai 15, 2007 19:50

TrackBack a dit :

# juin 2, 2007 16:21

Thibault a dit :

Salut,

Très bon post mais ne fonctionne pas lorsqu'on met le fileupload dans un modalpopup ... :(

C'est vraiment dommage !!!

# juin 8, 2007 16:23

Thibault a dit :

Re ,

Voici une URL qui peut vous interesser : http://www.jeffzon.net/Blog/page/Released-Components.aspx

Bon dev

# juin 8, 2007 20:24

cyril a dit :

Thibault, quelle est l'erreur que tu obtient lorsque tu le met dans une modalpopup ? car il n'y a aucune raison que cela ne fonctionne pas ! une modalpopup est du html classique :s

# juin 9, 2007 17:33

guilhem a dit :

Bonjour Cyril,

j'ai un soucis avec ton control :

J'ai encapsulé ton controle dans un User control qui contient un GridView, le controle FileUpload est chargé lors de la mise en édition d'une ligne.

Le fichier s'upload bien, la réponse est retournée correctement (le gridview n'est plus en edition).

Par contre une fois que le controle a été chargé une première fois, le JavaScript continue a s'executer sur chaque Post, la réponse est donc redirigée et les Post ne fonctionne plus correctement.

J'ai reproduit le problème avec l'exemple que tu as posté sur code source (ajout d'un bouton à l'interieur de l'UpdatePanel), le post sur ce bouton ne fonctionne pas correctement, par contre il fonctionne bien sur un bouton à l'exterieur.

Si tu as une piste pour me decoincer je suis preneur,

merci d'avance,

salutations

Guilhem

# septembre 19, 2007 11:44

slacky a dit :

Bonjour,

Merci beaucoup pour se code s'est genial.

Un soucis, j'ai un fileup un boutton et 5 images.

Au premier clique pas de soucis ca fonctionne tout bien, mais si j essaie un deuxieme clique rien ne se passe il ne fait pas l'event.

Une idée ?

Merci.

# novembre 5, 2007 11:04

cyril a dit :

Bonjour,

Pour résoudre le problème, je te conseille de regarder ce bien comprendre le fonctionnement théorique puis de regarder ce qui se passe avec Fiddler puis du debug au niveau httpmodule.

# novembre 5, 2007 20:51

Kitaeru a dit :

Salut,

J'aimerais savoir comment je peux adapter ton code pour pouvoir utiliser deux contrôls FileUpload dans la même page aspx, car ça me dit qu'il y a une erreur lorsque je charge la page.

Voici l'erreur qui m'est indiquée :

Sys.Application.add_init(function(){CS.FileUpload.addFileUploadElements(['FileUpload1''FileUpload2'])});Sys.Application.initialize();

Merci.

# février 23, 2009 18:51
Les commentaires anonymes sont désactivés

Les 10 derniers blogs postés

- Merci par Blog de Jérémy Jeanson le 10-01-2019, 20:47

- Office 365: Script PowerShell pour auditer l’usage des Office Groups de votre tenant par Blog Technique de Romelard Fabrice le 04-26-2019, 11:02

- Office 365: Script PowerShell pour auditer l’usage de Microsoft Teams de votre tenant par Blog Technique de Romelard Fabrice le 04-26-2019, 10:39

- Office 365: Script PowerShell pour auditer l’usage de OneDrive for Business de votre tenant par Blog Technique de Romelard Fabrice le 04-25-2019, 15:13

- Office 365: Script PowerShell pour auditer l’usage de SharePoint Online de votre tenant par Blog Technique de Romelard Fabrice le 02-27-2019, 13:39

- Office 365: Script PowerShell pour auditer l’usage d’Exchange Online de votre tenant par Blog Technique de Romelard Fabrice le 02-25-2019, 15:07

- Office 365: Script PowerShell pour auditer le contenu de son Office 365 Stream Portal par Blog Technique de Romelard Fabrice le 02-21-2019, 17:56

- Office 365: Script PowerShell pour auditer le contenu de son Office 365 Video Portal par Blog Technique de Romelard Fabrice le 02-18-2019, 18:56

- Office 365: Script PowerShell pour extraire les Audit Log basés sur des filtres fournis par Blog Technique de Romelard Fabrice le 01-28-2019, 16:13

- SharePoint Online: Script PowerShell pour désactiver l’Option IRM des sites SPO non autorisés par Blog Technique de Romelard Fabrice le 12-14-2018, 13:01