Remplir le formulaire de boîte de dialogue modulaire jQuery

Question

J'ai une application qui contient une vue de grille. Lorsqu'un utilisateur sélectionne l'un des éléments de la grille, je souhaite être en mesure d'afficher une boîte de dialogue jQuery contenant un formulaire contenant des informations pré-remplies sur l'élément sélectionné dans la vue quadrillée. À l'heure actuelle, j'ai un div avec des zones de texte HTML qui est défini comme une boîte de dialogue modale. L'utilisateur clique dessus, et l'identifiant de l'élément sélectionné est facilement récupérable. Le problème vient quand je veux aller à la base de données, obtenir quelques-uns des détails, puis pré-remplir certaines des zones de texte et d'autres éléments avant d'afficher la boîte de dialogue à l'utilisateur. Une comparaison facile consiste à demander à un utilisateur de cliquer sur un élément pour qu'il puisse soumettre un formulaire à traiter avec certains des éléments de la sélection déjà remplie. Je me demandais quel est le moyen le plus simple d'y parvenir. En ce moment je l'ai pour que la sélection d'un élément de la gridview utilise jQuery pour faire un post Ajax avec l'ID à un [WebMethod] dans le code derrière lequel il peut ensuite quitter la base de données et obtenir tous les détails de l'enregistrement. Le problème est que, pour des raisons évidentes, WebMethod ne peut pas remplir les champs du formulaire de manière magique. Je pourrais renvoyer toutes les informations à la requête ajax pour les remplir, mais cela me semble également assez compliqué car il n'y a pas de vraie connexion forte des données aléatoires que je renvoie et du champ auquel elles appartiennent. Beaucoup de ceci réfléchit fort, mais je suis vraiment intéressé à mieux comprendre comment utiliser jQuery et Ajax dans ASP.NET.

Nous vous remercions de votre aide et de vos commentaires.

Answer 1

ajouter un attribut sur le bouton gridview:

btn.Attributes.Add("onclick","ShowDialog();"); 

script client

function ShowDialog(){ 
     //setup the dialog 
$('#dialog).setup(function(){ 
    ......, 
    buttons: "OK", function(){ 
    //save by calling btn2.click() where btn2 is a hidden button that handles save logic in server side 
}); 
}); 
     $('#dialog').show(); 
    return false; 
    });