2010-12-08 31 views
0

Page:Prévenir Postback après l'ouverture boîte de dialogue jQuery

<body> 
<form id="frmLogin" runat="server"> 
    <asp:Button ID="btnClick" OnClientClick="openConfirmDialog();" OnClick="PopulateLabel" runat="server"/> 
    <div id="divDialog"></div> 
    <asp:Label ID="lblText" runat="server"></asp:Label> 
</form> 
</body> 

JS

<script type="text/javascript"> 
$(document).ready(function() { 
$("#divDialog").dialog({autoOpen: false, 
        buttons: { "Ok": function() 
             { 
             $(this).dialog("close"); 
             }, 
           "Cancel": function() 
             { 
              $(this).dialog("close"); 
             } 
           } 
        }); 
}); 

function openConfirmDialog() 
{ 
    $("#divDialog").dialog("open"); 
} 

C#

protected void Page_Load(object sender, EventArgs e) 
{ 
    lblText.Text = ""; 
} 

protected void PopulateLabel(object sender, EventArgs e) 
{ 
    lblText.Text = "Hello"; 
} 

Ce code me ouvre une boîte de dialogue avec OK et Annuler bouton, mais il n'attend pas l'utilisateur ac publier et afficher la page immédiatement et l'étiquette est peuplée. J'ai besoin d'appeler la fonction C# en fonction de l'activité de l'utilisateur. Si l'utilisateur clique sur "Ok", l'étiquette doit être remplie et si l'utilisateur clique sur "Annuler", il ne doit pas appeler la fonction C#. Comment puis-je y parvenir?

Répondre

0

Ajouté un autre bouton et l'événement pour déclencher nouveau événement click bouton clic() jQuery qui à son tour déclenche le gestionnaire d'événements respectifs en C#

3

Tout d'abord, pour empêcher la page d'afficher immédiatement au serveur, vous devez annuler le comportement par défaut de l'événement click en retournant false de votre gestionnaire:

<asp:Button ID="btnClick" runat="server" OnClick="PopulateLabel" 
    OnClientClick="openConfirmDialog(); return false;" /> 

Ensuite, vous devez effectuer les postback vous-même lorsque le bouton est cliqué Ok:

$("#divDialog").dialog({ 
    autoOpen: false, 
    buttons: { 
     "Ok": function() { 
      $(this).dialog("close"); 
      __doPostBack("btnClick", ""); 
     }, 
     "Cancel": function() { 
      $(this).dialog("close"); 
     } 
    } 
}); 

Notez que le premier argument de __doPostBack() est le nom o f le contrôle (UniqueID dans la terminologie ASP.NET). Comme le bouton est un enfant direct de l'élément <form>, nous pouvons coder en dur id dans l'appel __doPostBack(), mais les choses se compliqueront s'il se trouve dans une hiérarchie de conteneur. Dans ce cas, vous pouvez utiliser ClientScript.GetPostBackEventReference() pour générer l'appel approprié à __doPostBack().

EDIT: Étant donné que votre page ne contient aucun contrôle activé pour la publication, __doPostBack() ne sera pas défini côté client. Pour contourner ce problème, vous pouvez utiliser un contrôle LinkButton au lieu d'un contrôle Button.

+0

__doPostBack (« btnClick », « »); n'appelle pas ma fonction C# –

+0

@Sri Kumar, quel est l'attribut 'name' de votre bouton (dans la source de la page rendue)? –

+0

btnClick est mon ID de bouton et btnClick est le nom –