Füllen Sie jQuery modalen Dialogformular

Question

Ich habe eine Anwendung, die eine Gridview enthält. Wenn ein Benutzer eines der Elemente aus der Gridview auswählt, möchte ich ein jQuery-Dialogfeld anzeigen können, das ein Formular mit einigen vorgefüllten Informationen aus dem ausgewählten Element aus der Gridview enthält. Im Moment habe ich ein div mit einigen HTML-Textfeldern, die als modales Dialogfeld definiert sind. Der Benutzer klickt darauf, und die ID des ausgewählten Elements kann einfach abgerufen werden. Das Problem tritt auf, wenn ich in die Datenbank gehen, einige Details abrufen und dann einige der Textfelder und anderen Elemente ausfüllen möchte, bevor das Dialogfeld dem Benutzer angezeigt wird.

Ein einfacher Vergleich ist ein Benutzer klicken auf ein Element, so dass sie ein Formular zur Verarbeitung mit einigen der Elemente aus der Auswahl bereits ausgefüllt senden können. Ich habe mich gefragt, was der einfachste Weg, um dies zu tun ist. Im Moment habe ich es so, dass die Auswahl eines Elements aus der Gridview jQuery verwendet, um einen Ajax-Post mit der ID zu einem [WebMethod] im Code hinter zu machen, wo es dann aus der Datenbank gehen und alle Details des Datensatzes bekommen kann. Das Problem ist, dass die WebMethod aus offensichtlichen Gründen die Felder des Formulars nicht magisch ausfüllen kann. Ich könnte alle Informationen an die Ajax-Abfrage zurücksenden, um sie auszufüllen, aber das fühlt sich auch ziemlich unordentlich an, weil es keine wirklich starke Verbindung von den zufälligen Daten gibt, die ich zurücksende und zu welchem ​​Feld sie gehören.

Eine Menge davon ist laut nachdenken, aber ich bin wirklich daran interessiert zu verstehen, wie man jQuery und Ajax in ASP.NET verwenden.

Vielen Dank für Ihre Hilfe und Ihre Eingabe.

Answer 1

ein Attribut auf der gridview Schaltfläche hinzu:

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

Client Skript

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; 
    });