Quelle est la bonne façon de combiner les boîtes de dialogue modales jQuery et les événements côté serveur ASP.net?

Question

Je suis nouveau à jQuery et je veux faire cette chose simple dans une application ASP.Net:

J'ai un bouton dans le formulaire et qui lorsque je clique sur je veux exécuter un code côté serveur. MAIS je veux d'abord la confirmation de l'utilisateur, donnée par un dialogue modal jQuery.

Laquelle des approches suivantes est correcte:

1) Mettre le bouton ASP.Net (contrôle du serveur qui est OnClick est lié à l'événement côté serveur) sous la forme et utiliser jQuery pour ouvrir la boîte de dialogue lorsque cliquée:

<script ...> 
    $(document).ready(function() 
    { 
     $("#ConfirmDialog").dialog(
     { 
      autoOpen: false, 
      modal: true, 
      buttons: { 
       'Yes': function() { return true; }, 
       'No': function() { return false; } 
      } 
     }); 

     $("#<%= SubmitButton.ClientID %>").click(function (event) { 
      event.preventDefault(); 
      $("#ConfirmDialog").dialog('open'); 
     }); 
    }); 
</script> 
... 
<div id="ConfirmDialog"></div> 
... 
<asp:Button ID="SubmitButton" runat="server" 
     Text="Submit" OnClick="Submit_Click" /> 

2) mettre le bouton ASP.Net (contrôle du serveur) dans le div utilisé comme la boîte de dialogue de confirmation et de mettre un bouton HTML (contrôle non serveur) sous la forme pour l'utilisateur de cliquer.

<script ...> 
    $(document).ready(function() 
    { 
     $("#ConfirmDialog").dialog(
     { 
      autoOpen: false, 
      modal: true 
     }); 

     $("#SubmitButton").click(function (event) { 
      $("#ConfirmDialog").dialog('open'); 
     }); 
    }); 
</script> 
... 
<div id="ConfirmDialog"> 
    <asp:Button ID="SubmitButton" runat="server" 
      Text="Yes" OnClick="Submit_Click" />   
    ... 
</div> 
... 
<input id="SubmitButton" type="button" value="Submit" /> 

Je vais à la première approche, mais ne peut le faire fonctionner, il est autorisé à le faire event.PreventDefault() et puis juste return true; dans le bouton Oui?

Answer 1

La 2ème approche est plus correcte. Si vous y réfléchissez, vous souhaitez utiliser les contrôles côté serveur lorsque vous souhaitez interagir avec le serveur. Dans ce cas, vous ne voulez pas interagir avec le serveur, mais créez une boîte de dialogue modale côté client, qui ne nécessite aucune interaction avec le serveur.

j'utiliser les éléments suivants (non testé):

<script ...> 
    $(document).ready(function() 
    { 
     $("#ConfirmDialog").dialog(
     { 
      autoOpen: false, 
      modal: true 
     }); 

     $("#SubmitButtonClient").click(function (event) { 
      $("#ConfirmDialog").dialog('open'); 
     }); 
    }); 
</script> 
... 
<div id="ConfirmDialog"> 
    <asp:Button ID="SubmitButton" runat="server" 
      Text="Yes" OnClick="Submit_Click" />   
    ... 
</div> 
... 
<input id="SubmitButtonClient" type="button" value="Submit" /> 

Tout ce que je changé était l'id du côté client bouton d'envoi. Dans cette approche, vous n'avez pas besoin de faire event.PreventDefault(). Notez que je n'ai pas testé le code ci-dessus. Cependant, étant donné que jQuery est très orienté AJAX, vous ne voulez généralement pas effectuer de publication sur le serveur pour effectuer votre «bouton de commande», mais utiliser un post AJAX. Cela empêchera le rechargement de toute la page et vous pourrez ajuster votre page si nécessaire. Voir la méthode ajax() dans jQuery pour quelques exemples. Vous remarquerez que dans ASP.NET MVC, vous ne voyez pas autant de contrôles côté serveur, mais une intégration plus complète avec jQuery. C'est la direction générale vers laquelle se dirige Microsoft - moins de contrôles serveur et plus d'intégration au niveau AJAX.