JQuery BlockUI avec UpdatePanel Viewstate Issue

Question

J'ai un panneau de mise à jour dans un div que je modale en utilisant le plugin JQuery BlockUI. À l'intérieur du UpdatePanel est une zone de texte et un bouton. Lorsque j'entre quelque chose dans la zone de texte et que je clique sur le bouton, je n'arrive pas à récupérer le texte dans la zone de texte. Lorsque je débogue, la zone de texte n'a aucune valeur.

<asp:UpdatePanel ID="upTest" UpdateMode="Conditional" runat="server"> 
    <ContentTemplate> 
     <div id="divTest"> 
      <asp:TextBox ID="txtTestVS" runat="server" /><br /> 
      <asp:Button ID="cmdTest" Text="TEST" OnClick="cmdTest_Click" UseSubmitBehavior="false" runat="server" /> 
     </div> 
    </ContentTemplate> 
</asp:UpdatePanel> 

côté serveur:

protected void cmdTest_Click(object sender, EventArgs e) 
{ 
    string x = txtTestVS.Text; 
} 

---

Cela devrait clarifier les choses. Voici le contenu total de la page.

<a href="javascript:$.blockUI({ message: $('#divTest') });">SHOW MODAL</a> 

<div id="divTest"> 
    <asp:UpdatePanel ID="upTest" UpdateMode="Conditional" runat="server"> 
     <ContentTemplate> 
      <asp:TextBox ID="txtTestVS" runat="server" /><br /> 
      <asp:Button ID="cmdTest" Text="TEST" OnClick="cmdTest_Click" UseSubmitBehavior="false" runat="server" /> 
     </ContentTemplate> 
    </asp:UpdatePanel> 
</div> 

Answer 1

Ceci est un problème commun avec les plug-ins de dialogue, le problème est quand le contenu est mis dans le blockUI contient er, il est ajouté à l'élément, et non plus dans le formulaire soumis au serveur. Pour résoudre cela, vous devez modifier le code BlockUI un peu:

Voici la source: http://github.com/malsup/blockui/blob/master/jquery.blockUI.js

Modifier ceci: Ligne 262:
var layers = [lyr1,lyr2,lyr3], $par = full ? $('body') : $(el);
à:
var layers = [lyr1,lyr2,lyr3], $par = full ? $('form') : $(el);

et ceci:

Ligne 382:
els = $('body').children().filter('.blockUI').add('body > .blockUI');
à:
els = $('form').children().filter('.blockUI').add('form > .blockUI');

Cela devrait vous y aller et les valeurs de zone de texte à venir à travers.

(avec la permission de réponse de Nick Craver https://stackoverflow.com/users/13249/nick-craver)

Answer 2

Si vous essayez d'utiliser BlockUI sur un bouton dans un panneau de mise à jour (vous cliquez sur le bouton dans le panneau de mise à jour et l'interface utilisateur est bloqué), vous devez gérer l'utilisation des événements PageRequestManager

prm = Sys.WebForms.PageRequestManager.getInstance(); 
     prm.add_beginRequest(function() { 
      $.blockUI({ message: '<img src="../../Content/images/Busy2.gif" />' }); 
     }); 

     prm.add_endRequest(function() { 
      $.unblockUI(); 
     }); 

Ou sur un clic de bouton, si vous voulez afficher une fenêtre modale avec cette zone de texte et un bouton, vous pouvez essayer quelque chose comme this