Transférer des données dans un ModalPopupExtender

Question

J'ai un ModalPopupExtender qui permet à un client d'appliquer des informations de paiement. Cela a fonctionné très bien. Ensuite, le client a demandé à voir le total dû sur le ModalPopup. Cela ne semblait pas très compliqué de prendre le total dû au contrôle parent et de le passer dans le contrôle ModalPopup. Il semble qu'il n'y a pas de moyen facile de le faire.

Voici mon code HTML, garder à l'esprit ce code est enveloppé dans un UpdatePanel

<asp:LinkButton ID="lnkMakePayment" runat="server" Visible="true" OnClick="lnkMakePayment_Click" > 

<asp:Label ID="lblMakePayment" runat="server" Text="Make Payment"/></asp:LinkButton> 

<asp:Button ID="btnDummy" style="display: none;" runat="server" 
      OnClick="btnDummy_Click" /> 

<ajaxToolkit:ModalPopupExtender ID="mdlPopupPayment" runat="server" 
TargetControlID="btnDummy" PopupControlID="pnlMakePayment" 
CancelControlID="popUpCancel" DropShadow="true" BackgroundCssClass="modalBackground"> 
</ajaxToolkit:ModalPopupExtender> 

<asp:Panel ID="pnlMakePayment" runat="server" Style="display: none;" 
      SkinID="PopUpPanel" class="ContentBoxColor" Width="400px" Height="170px"> 
    <MP1:MakePaymentPopup ID="MakePayment" runat="server" /> 
    <div style="text-align: right; width: 100%; margin-top: 5px;"> 
     <asp:Button ID="popUpCancel" runat="server" Text="Cancel" Width="0px" /> 
    </div> 
</asp:Panel> 

Maintenant, voici le codebehind

protected void btnDummy_Click(object sender, EventArgs e) { } 

protected void lnkMakePayment_Click(object sender, EventArgs e) 
{ 
    mdlPopupPayment.Show(); 
} 

Ainsi, lorsque l'utilisateur clique sur le lien de paiement de faire la ModalPopup fonctionne bien. Et il déclenche même un événement que le contrôle parent écoute pour appliquer les informations de paiement et tous les détails de paiement associés que l'utilisateur remplit dans la fenêtre contextuelle. Encore une fois tout cela fonctionne bien.

Ma première tentative d'envoi du total dû à la ModalPopup se présente comme suit:

protected void lnkMakePayment_Click(object sender, EventArgs e) 
{ 
    // MakePayment is the actual ModalPopup control and total due is a public property 
    MakePayment.TotalDue = txtTotalDue.Text 
    mdlPopupPayment.Show(); 
} 

Le problème est que lorsque je clique sur le lien pour afficher le ModalPopup l'événement PageLoad ne se déclenche pas si je aucun moyen d'attribuer ma propriété à une étiquette dans le ModalPopup. J'ai même essayé d'utiliser l'objet session mais j'avais le même problème. Je ne peux même pas faire un voyage à la base de données parce que je ne peux pas passer un identifiant client. Des idées? Je suis un novice en Javascript et je préfère un côté serveur mais à ce stade je suis prêt à tout essayer.

Le contrôle utilisateur MakePayment contient 3 zones de texte ASP. Un pour l'utilisateur pour entrer un montant de paiement, un autre pour le type de paiement, et un troisième pour les notes comme les numéros de chèques. Également sur le contrôle, il y a un bouton Appliquer et Annuler. Le contrôle parent est une page ascx de base qui est un écran d'entrée de données contenant ModalPopupExtender et tout le code html pour l'activer.

Answer 1

Une fois que j'ai réalisé ce que je faisais de mal, la solution que j'ai trouvée était assez simple. Je dois remercier Arnold Matusz car c'était son entrée de blog qui m'a montré la lumière. Au lieu d'avoir l'appel de ModalPopup, appelez un contrôle utilisateur qui vient d'afficher du code html. J'ai fait un contrôle d'utilisateur qui était le ModalPopupExtender. De cette façon, je peux l'appeler et transmettre des données.

HTML de contrôle utilisateur Mon MakePayment ressemble

<asp:Button ID="btnDummy" style="display: none;" runat="server" 
    OnClick="btnDummy_Click" /> 
<ajaxToolkit:ModalPopupExtender ID="mdlPopupPayment" runat="server" 
      TargetControlID="btnDummy" PopupControlID="pnlMakePayment" 
      CancelControlID="popUpCancel" DropShadow="true" 
      BackgroundCssClass="modalBackground"> 
</ajaxToolkit:ModalPopupExtender> 
<asp:Panel ID="pnlMakePayment" runat="server" Style="display: none;" 
    SkinID="PopUpPanel" class="ContentBoxColor" Width="400px" Height="170px"> 
<div class="contentbox"> 
    <div class="contentboxHeader1"> 
     <asp:Label ID="lblPopupTitle" Width="350px" runat="server" Text=""></asp:Label> 
    </div> 
    <div class="contentbox"> 
     <div style="text-align: left"> 
      <asp:Label ID="lblTotalDue" Width="100px" runat="server" Text=""> 
      </asp:Label> 
      <asp:Label ID="lblTotalDueValue" Width="100px" runat="server"> 
      </asp:Label> 
     </div> 
     <div style="text-align: left"> 
      <asp:Label ID="lblPayment" Width="100px" runat="server" Text=""></asp:Label> 
      <asp:TextBox ID="txtPayment" Width="100px" runat="server"></asp:TextBox> 
      <ajaxToolkit:FilteredTextBoxExtender ID="ftbePayment" runat="server" 
       TargetControlID="txtPayment" FilterType="Custom, Numbers" 
       ValidChars="."> </ajaxToolkit:FilteredTextBoxExtender> 
     </div> 
     <div style="text-align: left"> 
      <asp:Label ID="lblPaymentRefNo" Width="100px" runat="server" Text=""> 
      </asp:Label> 
      <asp:TextBox ID="txtPaymentRefNo" Width="100px" runat="server"> 
      </asp:TextBox> 
     </div> 
     <div style="text-align: left"> 
     <asp:Label ID="lblPaymentType" Width="100px" runat="server" Text=""></asp:Label> 
      <asp:TextBox ID="txtPaymentType" Width="250px" runat="server"></asp:TextBox> 
     </div> 
    </div> 
    <div class="contentbox" style="text-align=right"> 
     <asp:Button ID="btnApplyPayment" runat="server" Text="" 
      OnClick="btnApplyPayment_Click" /> 
     <asp:Button ID="btnCancel" runat="server" Text="" OnClick="btnCancel_Click" /> 
    </div> 
</div> 
<div style="text-align: right; width: 100%; margin-top: 5px;"> 
    <asp:Button ID="popUpCancel" runat="server" Text="Cancel" Width="0px" /> 
</div> 
</asp:Panel> 

Et dans le code derrière j'ai une méthode publique

public void MakePayment(string szAmountDue) 
{ 
    lblTotalDueValue.Text = szAmountDue; 
    mdlPopupPayment.Show(); 
} 

Sur ma principale forme que j'ai un lien appelé Make Paiement

<asp:LinkButton ID="lnkMakePayment" runat="server" Visible="true" 
     OnClick="lnkMakePayment_Click" > 
    <asp:Label ID="lblMakePayment" runat="server" Text=""/> 
</asp:LinkButton> 

Lorsque vous cliquez sur le lien Make Payment, le code derrière appelle le contrôle MakePayment chanter dans les données que je souhaite afficher.

protected void lnkMakePayment_Click(object sender, EventArgs e) 
{ 
    MakePayment.MakePayment(lblTotalValue.Text.ToString()); 
} 

Answer 2

Je pense que vous devez fournir un peu plus d'informations. Pouvez-vous nous montrer ou décrire le markup/codebehind contenu dans votre contrôle utilisateur MakePayment? Et quand vous parlez du «contrôle parental», de quel élément parlez-vous? MakePayment, pnlMakePayment, pnlDummy?

Answer 3

Il est pas nécessaire de créer un contrôle utilisateur pour transmettre des données dans une fenêtre contextuelle modale. Je créerais seulement un contrôle d'utilisateur si j'avais besoin de le réutiliser dans différents endroits. Si vous n'avez pas besoin de le réutiliser dans plusieurs emplacements, vous n'avez pas besoin d'un contrôle utilisateur. Au lieu de cela, faites ceci:

Supposons que vous ayez besoin d'un popup qui affiche une chaîne et qui a des boutons OK et Annuler, mais vous devez définir la valeur de chaîne avant qu'elle n'apparaisse.

1. Créer un panneau.
2. Placez un UpdatePanel dans le Panel à partir de l'étape 1.
3. Placez un bouton et ModalPopupExtender dans le UpdatePanel.

4. Placez une étiquette, les boutons Ok et Annuler à l'intérieur du UpdatePanel, sous l'extendeur contextuel. Ceci est illustré ci-dessous:

   <asp:Panel ID="Panel1" runat="server" CssClass="popup" Width="320px" Style="display:none"> 
       <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional"> 
        <ContentTemplate> 
         <asp:Button ID="Button1" runat="server" Style="display:none" /> 
         <cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" 
          TargetControlID="Button1" 
          PopupControlID="Panel1" 
          CancelControlID="CancelButton"> 
         </cc1:ModalPopupExtender> 
         <asp:Label ID="Label1" runat="server" /> 
         <asp:Button ID="OkButton" runat="server" Text="Ok" CausesValidation="true" OnClick="OkButton_OnClick" />&nbsp; 
         <asp:Button ID="CancelButton" runat="server" Text="Cancel" CausesValidation="false" /> 
        </ContentTemplate> 
       </asp:UpdatePanel> 
   </asp:Panel> 
   

5. Ensuite, sur votre page, placez un bouton et une zone de texte comme celui-ci:

   <asp:TextBox ID="MyTextBox" runat="server" /> 
   <asp:Button ID="MyButton" runat="server" Text="Popup" OnClick="MyButton_OnClick" /> 
   

6. Maintenant, dans le code derrière pour votre page, placez le gestionnaire pour MyButton:

   protected void MyButton_OnClick(object sender, EventArgs e) 
   { 
       Label1.Text = MyTextBox.Text; 
       UpdatePanel1.Update(); 
       ModalPopupExtender1.Show(); 
   } 
   

Answer 4

<asp:Panel runat="server" ID="pPopupQuoteSearch" CssClass="modalPopupQuote" Style="display: none"> 
    <asp:LinkButton ID="lbClose" Text="Close" runat="server" /> 
    <div id="dQuoteContainer" runat="server"> 
    </div> 
</asp:Panel> 
<asp:Button ID="Button5" runat="server" Style="display: none" /> 
<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="Button5" 
     PopupControlID="pPopupQuoteSearch" BackgroundCssClass="modalBackground" OkControlID="lbClose"> 
</cc1:ModalPopupExtender> 

C# CODE

protected void btnQuteSearch_Click(object sender, EventArgs e) 
{ 
    pPopupQuoteSearch.Style.Remove("display"); 
    pPopupQuoteSearch.Style.Add("display", "inline"); 

    dQuoteContainer.InnerHtml = "some HTML code"; 

    ModalPopupExtender1.Show(); 
}