Bonne pratique pour la fenêtre modale dans l'application Web Forms

Question

Sur une page de liste, un clic sur l'un des éléments affiche les détails dans une fenêtre contextuelle modale qui aura ses propres fonctionnalités (comme la validation, la mise à jour, etc.). Quelle est la meilleure pratique pour implémenter ceci (ne cherchez pas un hack). Je vois deux options:

1. Masquer les détails balisage jusqu'à ce qu'un élément de la liste est cliqué à ce moment, faire une demande de paiement ajax pour obtenir les détails et remplir et afficher la section détails. Avoir la section des détails comme une page séparée en elle-même. Sur un élément de liste, cliquez sur, afficher cette page dans une fenêtre modale (est-ce encore possible?) Ceci est similaire à l'approche IFrame et sonne comme une approche old school.

Quels sont les avantages des inconvénients de ces approches ou y at-il d'autres moyens de le faire? Il ne devrait pas y avoir de publication sur un élément de liste.

Modifier: Toutes les opinions sont appréciées.

Answer 1

Je fais actuellement l'option 1, c'est très léger et tout ce dont vous avez besoin est un post ajax (jQuery ou UpdatePanel) et un modal (j'utilise jQery UI). C'est plus facile qu'un message sur une page entière, et vous avez l'avantage supplémentaire de pouvoir manipuler la page dans laquelle vous vous trouvez dans le cadre du résultat.

Par exemple, j'ai des grilles dans la page, l'éditeur est modal, généralement avec plus de détails, lorsque vous cliquez sur Enregistrer, la grille est mise à jour. Je l'ai mis dans une solution de modèle générique et il est très facile de travailler avec, et est aussi léger que les webforms peuvent être dans cette situation, donc je suis en faveur de l'option 1.

Voici un exemple d'approche, ayant votre contrôle modal hériter de UpdatePanel (code condensé par souci de concision):

public class Modal : UpdatePanel 
{ 
    private bool? _show; 
    public string Title 
    { 
    get { return ViewState.Get("Title", string.Empty); } 
    set { ViewState.Set("Title", value); } 
    } 

    public string SaveButtonText 
    { 
    get { return ViewState.Get("SaveButtonText", "Save"); } 
    set { ViewState.Set("SaveButtonText", value); } 
    } 

    protected override void OnPreRender(EventArgs e) 
    { 
    if (_show.HasValue) RegScript(_show.Value); 
    base.OnPreRender(e); 
    } 

    public new Modal Update() { base.Update();return this;}  
    public Modal Show() { _show = true; return this; } 
    public Modal Hide() { _show = false; return this; } 

    private void RegScript(bool show) 
    { 
    const string scriptShow = "$(function() {{ modal('{0}','{1}','{2}'); }});"; 
    ScriptManager.RegisterStartupScript(this, typeof (Modal), 
      ClientID + (show ? "s" : "h"), 
      string.Format(scriptShow, ClientID, Title, SaveButtonText), true); 
    } 
} 

en javascript:

function modal(id, mTitle, saveText) { 
    var btns = {}; 
     btns[saveText || "Save"] = function() { 
      $(this).find("input[id$=MySaveButton]").click(); 
     }; 
     btns.Close = function() { 
      $(this).dialog("close"); 
     }; 
     return $("#" + id).dialog('destroy').dialog({ 
      title: mTitle, 
      modal: true, 
      width: (width || '650') + 'px', 
      resizable: false, 
      buttons: btns 
     }).parent().appendTo($("form:first")); 
    } 

Ensuite, dans votre balisage (ne peut pas penser à un meilleur nom que MyControls r ight maintenant, désolé):

<MyControls:Modal ID="MyPanel" runat="server" UpdateMode="Conditional" Title="Details"> 
    //Any Controls here, ListView, whatever 
    <asp:Button ID="MySaveButton" runat="server" OnClick="DoSomething" /> 
</MyControls:Modal> 

Dans les pages que vous CodeBehind vous pouvez faire:

MyPanel.Update().Show(); 

Fr votre approche, j'ai une action jQuery qui définit un champ d'entrée et clique sur un bouton dans le modal, déclenchant le panneau de mise à jour pour la publication, et dans ce code qui charge les détails dans n'importe quel contrôle dans le modal, appelez simplement MyPanel.Update.Show(); et il apparaîtra à l'écran lorsque la requête ajax du panneau de mise à jour reviendra.

L'exemple ci-dessus, en utilisant l'interface utilisateur jQuery aura 2 boutons sur le modal, un à fermer et ne rien faire, un à enregistrer, en cliquant que MySaveButton dans le modal, et vous pouvez faire ce que vous voulez sur puis serveur, appelant MyPanel.Hide() En cas de succès, ou mettre un message d'erreur dans le panneau si la validation échoue, n'appelez pas MyModal.Hide() et il restera en place pour l'utilisateur après la publication.