"Zone de prévisualisation" dans UpdatePanel non Rafraîchissant

Question

Salutations!

J'ai une page "générateur de code" où les utilisateurs sélectionnent divers boutons radio et génèrent un balisage HTML (principalement des balises SCRIPT) qu'ils peuvent utiliser sur leur page pour afficher certaines données. Il y a aussi une zone de "prévisualisation" pour qu'ils puissent voir les résultats avant de copier/coller le code sur leur site. La forme existe dans un contrôle FormView et est enveloppé par un UpdatePanel comme ceci:

<asp:UpdatePanel ID="UpdatePanel1" runat="server"> 
    <ContentTemplate> 
     <asp:FormView ID="FormView1" runat="server" DataSourceId="XmlDataSource1"> 
      <ItemTemplate> 
       <div id="configArea"> 
        <ul> 
         <li> 
          <%# XPath("Steps/Step1/ServerStatus") %><br /> 
          <asp:RadioButton ID="RadioButton1" runat="server" GroupName="OneA" Checked="true" AutoPostBack="true" Text='<%# XPath("Steps/Step1/YesOption") %>' /> 
          <asp:RadioButton ID="RadioButton2" runat="server" GroupName="OneA" AutoPostBack="true" Text='<%# XPath("Steps/Step1/NoOption") %>' /> 
         </li> 
         <li> 
          <%# XPath("Steps/Step1/Uptime") %><br /> 
          <asp:RadioButton ID="RadioButton3" runat="server" GroupName="OneB" Checked="true" AutoPostBack="true" Text='<%# XPath("Steps/Step1/YesOption") %>' /> 
          <asp:RadioButton ID="RadioButton4" runat="server" GroupName="OneB" AutoPostBack="true" Text='<%# XPath("Steps/Step1/NoOption") %>' /> 
         </li> 
         <li> 
          <%# XPath("Steps/Step1/IPAddress") %><br /> 
          <asp:RadioButton ID="RadioButton5" runat="server" GroupName="OneC" Checked="true" AutoPostBack="true" Text='<%# XPath("Steps/Step1/YesOption") %>' /> 
          <asp:RadioButton ID="RadioButton6" runat="server" GroupName="OneC" AutoPostBack="true" Text='<%# XPath("Steps/Step1/NoOption") %>' /> 
         </li> 
        </ul> 
       </div> 
       <div id="copyCode"> 
        <%# XPath("Steps/Step2/CopyPasteCode") %><br /> 
        <asp:TextBox ID="Textbox1" runat="server" TextMode="MultiLine" Width="300" Height="300" /> 
       </div> 
       <div id="previewArea"> 
        <%# XPath("Steps/Step3/PreviewTitle") %><br /> 
        <asp:Literal ID="Literal1" runat="server" /> 
       </div> 
      </ItemTemplate> 
     </asp:FormView> 
    </ContentTemplate> 
</asp:UpdatePanel> 
<asp:XmlDataSource ID="XmlDataSource1" runat="server" XPath="Root/Data" /> 

Il génère avec succès le code dans la zone de texte copycode (TextBox1), ce qui peut ressembler à ceci:

<script src="http://example.com/src/Constants.js"></script> 
<script> 
    showIPAddress = 0; 
    DisplayServerStatus(); 
</script> 

En même temps, je mets à jour le contrôle littéral de la zone "preview" (Literal1) avec le texte du copycode TextBox (TextBox1). L'aperçu est affiché parfaitement lorsqu'il n'est pas dans un UpdatePanel, mais ne fonctionne pas quand il est (et je préfère utiliser un UpdatePanel pour empêcher l'actualisation de la page). Je fais la mise à jour de la zone « aperçu » et le texte copycode lors de l'événement PreRender:

protected override void OnPreRender(EventArgs e) 
{ 
    base.OnPreRender(e); 

    UpdateCodeSnippetAndPreviewArea(); 
} 

Toutes les idées pourquoi l'aperçu ne met pas à jour quand il est dans un UpdatePanel?

Answer 1

La raison pour laquelle il n'est pas mis à jour lors de l'utilisation d'un UpdatePanel est que l'infrastructure ASP.NET AJAX ne traite aucun javascript en ligne retourné par le serveur. Regardez à l'aide de la méthode ScriptManager.RegisterStartUpScript côté serveur pour enregistrer l'exécution de javascript en ligne. Essentiellement, vous pouvez utiliser cette méthode pour lancer l'exécution de javascript personnalisé une fois le panneau mis à jour. Dans votre cas, votre javascript personnalisé doit interpréter le script de prévisualisation de manière appropriée (c'est-à-dire détecter les tags de script, les enregistrer dynamiquement puis exécuter les fonctions données).

Espérons que cela aide!

Rohland