Il presente articolo è stato tradotto automaticamente.

Cutting Edge

Passare oltre form HTML con AJAX

Dino Esposito

Download codice disponibile dalla Raccolta di codice di MSDN
Selezionare il codice in linea

Contenuto

Form di scelta rapida
Convalida just-in-time
Della limitazione per l'invio
Form risparmio automatico
AJAX E oltre

Oltre hype di esperienza utente migliorata, interattività più, lo sfarfallio pagina ridotta, trasferimento dei dati più rapido e tutti i gli altri miglioramenti promesse di AJAX, la modifica di chiave che AJAX portato alla tabella è che esso consente controllo totale tramite l'invio di dati al server.

In un'applicazione AJAX pura, qualsiasi invio dei dati di browser per server attraversano codice dello sviluppatore. Gli sviluppatori è decidere come registrare i dati e quando. Inoltre, è anche possibile decidere se una maschera deve essere utilizzata.

Per ottenere tale livello di controllare il processo di invio dei dati in un'applicazione basata sul browser, ti viene richiesto di scrivere molto codice JavaScript. In effetti, in rate precedente di questo articolo, descritti le funzionalità principali di una raccolta JavaScript molto diffuso, ovvero la libreria jQuery, che può offrire è una grande quantità di Guida in linea quando si scrive codice JavaScript grave.

Questo mese, È necessario esaminare alcuni scenari che implicano forme nel contesto di applicazioni AJAX. È necessario esaminare diversi approcci all'implementazione di funzionalità quali convalida di salvataggio automatico, just in time e la limitazione per l'invio. Si inizia con maschere popup.

Form di scelta rapida

Ultimo mese presentato un sottoinsieme della libreria jQuery, jQuery Library dell'interfaccia utente, che è stato appositamente progettato per semplificare la creazione di interfacce utente sofisticate tramite finestre modali e non a scelta obbligatoria e avanzate e potente Widget, ad esempio accordions e le tabulazioni.

In un contesto Web, tuttavia, una maschera popup può non essere la soluzione migliore per la visualizzazione dei dati derivante da operazioni di drill-down. La finestra popup viene in genere creata utilizzando il browser API, in genere, il metodo window.open e sono soggette al criterio di blocco popup che l'utente dispone per tale sito. Il seguente frammento di codice viene illustrato come forzare il browser per visualizzare una finestra popup:

window.open(url, 'Sample', 'width=400,height=300,scrollbars=yes'); 

La scelta rapida visualizzerà la pagina specificata NELL'URL e possibile registrare dati da qualsiasi altra pagina nell'applicazione. È possibile passare dati a popup utilizzando la stringa di query; in alternativa, è possibile recuperare inpui campi nel form padre tramite la proprietà opener all'oggetto window. Si chiama l'oggetto dalla finestra dal pagina visualizzata nel popup, come segue:

var text = window.opener.document.Form1["TextBox1"].value;

Dalla proprietà opener è possibile accedere al modello del modulo opener a oggetti e leggere il contenuto di un particolare form tramite il DOM HTML.

Abuso di popup e pop-in moduli nel Web pubblicitari agli sviluppatori di browser led di introdurre le funzionalità per controllare la proliferazione di tali finestre. Di conseguenza, anche legittimo utilizzare i menu popup per raccogliere informazioni per l'utente è perdere impatto e diventare quasi impossibili.

Oggi, i moduli di popup nelle applicazioni Web sono principalmente in primo piano DIV contenuto visualizzato in modo a scelta obbligatoria, dopo la possibilità di fare clic su elementi di sotto di disattivazione. L'interfaccia utente del popup non appartiene necessariamente a una pagina separata; più spesso di non è sufficiente fa parte della pagina in cui viene viene visualizzato. Può essere un tag DIV inizialmente nascosto che diventa visibile quando viene eseguito il codice di script appropriato.

Da tale una pseudo popup finestra, è possibile accedere facilmente qualsiasi elemento della pagina poiché il contenuto della finestra popup pseudo è già parte della pagina. Inizializzazione gli elementi di input, di conseguenza, non è più un problema.

Raccolte potenti, ad esempio il jQuery dell'interfaccia utente anche offrono funzionalità per controllare l'aspetto di tale i menu popup per aspetto come finestre di dialogo Windows classici. (Vedere la Figura 1 ).

Il codice che si inserisce in del popup può o non può includere un tag form. Ad che non può includere gli elementi di altro modulo sul lato server, purché la pagina host sia una pagina ASP.NET. Un elemento form HTML priva del runat = server attributo può essere inserito se la pagina è classico ASP.NET o ASP.NET MVC. Se il popup contiene un tag form, quindi è possibile sfruttare funzionalità di invio del browser per registrare i dati per l'URL di azione della scelta. In caso contrario, è comunque possibile registrazione, ma è necessario scrivere il codice.

Figura 1 un esempio di finestra di dialogo della creati con jQuery 1.7 dell'interfaccia utente

È possibile scorrere in ciclo campi di input, preparare il corpo di una richiesta HTTP e registrarlo tramite direttamente l'oggetto XMLHttpRequest o qualsiasi astrazione di quali (la $ .AJAX funzione nella jQuery.) o l'oggetto Sys.Net.WebRequest della libreria client Microsoft AJAX

Infine, per mantenere il contenuto del popup fisicamente separato dal resto della pagina ASP.NET, si desidera possibile definire all'interno di un controllo utente ASCX, in questo modo:

<div id="DialogBox1">
  <cc1:YourUserControl runat="server"     ID="DialogBox1_Content" />
</div>

Questo approccio può essere ottenuto in entrambi ASP.NET classico e in pagine ASP.NET MVC.

Convalida just-in-time

È piuttosto comune che un modulo Web è necessario per notificare all'utente di valori non corretti prima dell'invio. Avvisare l'utente di input non corretto è un processo che i controlli di convalida in ASP.NET piuttosto bene. ValidatorCalloutExtender in quindi AJAX Control Toolkit può inoltre impostare avvisi di input non validi interessante, come illustrato nella Figura 2 .

Nella figura 2 estensioni di convalida in un'interfaccia utente

I controlli di convalida ASP.NET funzionano dalla convalida l'intero contenuto del modulo quando viene inviato. Nella versione corrente di ASP.NET, non c'è nessuna convalida personalizzata asincrona che consente di codice sul lato client convalidare i campi in una regola di server (personalizzati). Un componente può tuttavia essere rilasciato nelle future versioni di ASP.NET.

In sintesi, per rilevare e segnalare valori non corretti per l'utente è necessario due approcci possibili. In primo luogo, si può associare una convalida asincrono qualsiasi campo di input e messaggi di errore di report come valore delle modifiche di campo. In secondo luogo, si può convalidare il contenuto del modulo complessivamente. Questo secondo approccio può essere implementato in due modi diversi: è semplicemente possibile inviare il modulo nel modo consueto tramite il browser e attendere la risposta del server oppure è possibile in modo asincrono e a livello di codice invia il contenuto del modulo, anche il contenuto parziale, per commenti iniziali. Si diversi approcci e si nota come sfruttare le funzionalità AJAX.

In ASP.NET, esistono numerosi controlli di convalida predefinito che applicare le regole fisse il contenuto del campo e determinare se l'input è valido. Convalida di esempio esegue controlli ad esempio, se un campo viene lasciato vuoto, una data rientra in un determinato intervallo, o parte del contenuto uguale a un determinato valore o corrisponde a un'espressione regolare specificata. Tutti questi controlli coprono più comuni esigenze di convalida. Tuttavia, il controllo più comune deve essere eseguito sul server e richiede una connessione di database, un flusso di lavoro o ad esempio un servizio Web. Per tutti i questi casi, ASP.NET fornisce il controllo CustomValidator.

CustomValidator è un ottimo controllo che consente di specificare una funzione JavaScript client e un metodo server per verificare il riscontro di valore e di report al livello dell'interfaccia utente. Incapsulato correttamente fino in un pannello di aggiornamento AJAX, il controllo CustomValidator può anche restituire la risposta in modo asincrono, evitando di un aggiornamento full-page. Lo svantaggio solo del CustomValidator è che, analogamente a qualsiasi convalida non controlla il valore fino a quando il modulo viene inviato. Consideriamo il codice nella Figura 3 .

Figura 3 di implementazione del Pannello di aggiornamento

<asp:UpdatePanel runat="server" ID="UpdatePanel1">
  <ContentTemplate>
    <asp:TextBox ID="TextBox1" runat="server" 
                 AutoPostBack="true" />
    <asp:CustomValidator ID="CustomValidator1" runat="server" 
                 Display="Dynamic" 
                 ControlToValidate="TextBox1" 
                 SetFocusOnError="true" 
                 ErrorMessage="Invalid ID"
                 OnServerValidate=" CustomValidator1_Validate" >
   </asp:CustomValidator> 
 </ContentTemplate>
</asp:UpdatePanel>
<asp:Button ID="Button1" runat="server" Text="Submit" />

La pagina registrato precedente come l'utente modifica il contenuto della casella di testo. Un'istanza CustomValidator è associata a casella di testo e sa come convalidare il contenuto. Aggiornamento-Pannello garantisce che genera un postback solo un aggiornamento parziale. Sfortunatamente, questo codice non produrre i risultati previsti. Il postback della pagina indietro come la casella di testo viene modificata, ma non la convalida viene sempre eseguita. Per attivare la convalida personalizzata, è necessario che l'utente inserisce il pulsante di invio.

Il problema è che nessun percorso di codice comporta la chiamata di metodo Validate nella classe Page all'esterno il processo di invio del modulo classico. Per risolvere questo problema, è necessario controllare se un postback asincrono accade e richiamare convalida manualmente, come illustrato di seguito:

protected void Page_Load(object sender,     EventArgs e)
{
    if (ScriptManager1.IsInAsyncPostBack)
    {
        this.Validate();
    }
}

Il metodo di convalida, a sua volta, verrà scorrere in ciclo le convalide nella pagina e dei report sui eventuali valori non corretti nella pagina.

Se l'obiettivo è di segnalare gli errori di input presto, solo alternativa all'approccio precedente consiste nell'aggiungere codice JavaScript ai campi di input critici. Di seguito è riportato un esempio:

 <asp:TextBox ID="TextBox1" runat="server" 
              onchange="__doValidation(this)" />

In una casella di testo, l'evento onchange non viene generato quando l'utente è digitazione, ma solo quando l'utente si sposta all'esterno della casella di testo e in modo implicito conferma le modifiche apportate. Nel frammento di codice precedente viene eseguito un gestore JavaScript per eseguire una convalida remoto tramite XMLHttpRequest. Ecco il codice per il gestore JavaScript:

<script type="text/javascript">
    function __doValidation(textBox) {
        var text = textBox.value;
        PageMethods.PerformValidation(text, onComplete);
    }

    function onComplete(results) {
        if (results == false)
            $get("Label1").innerHTML = "Invalid ID";
        else
            $get("Label1").innerHTML = "";
    } </script>

Si può notare, nell'esempio viene utilizzato un metodo di pagina ASP.NET per definire l'endpoint HTTP da richiamare. Qualsiasi tali endpoint è corretta, ad esempio un metodo di servizio WCF, un metodo di servizio Web o un servizio REST. La risposta che è ottenere dall'endpoint HTTP può essere un valore booleano o una parte del codice HTML. Nel primo caso, la logica che aggiorni l'interfaccia utente risiede sul client e può essere effettivamente semplice; in quest'ultimo caso, è richiesto un logica più sofisticato nel server di.

Se non è necessario convalidare i campi di input singolarmente e può attendere commenti e suggerimenti fino a quando il modulo intero viene inviato, quindi il più semplice che procedere è consigliabile convalide all'interno di un controllo UpdatePanel ASP.NET. In questo caso, tenere presente che le convalide e controlli di input devono essere collocati nel pannello stesso.

In alternativa a parziale esegue il rendering per la registrazione e convalida il contenuto di un modulo, è possibile considerare una libreria AJAX, ad esempio jQuery in combinazione con il plug-in di form e convalida. Un esempio illustrato nell'articolo" Combinazione di convalida JQuery form e l'invio di AJAX in ASP.NET."

Complessivamente, ritiene che singoli controlli sono preferibili quanto rilevare immediatamente valori non corretti ed è possibile modificare il modulo in modo dinamico per riflettere input corrente. Per il tempo, è necessario utilizzare JavaScript o eventualmente eseguire il rendering parziale con i controlli di postback automatico.

Se si desidera convalidare l'intero modulo in modo asincrono, comunque ritiene che con le convalide ASP.NET classiche il rendering parziale è l'opzione più semplice. Altrettanto efficace è qualsiasi soluzione che serializza il contenuto del modulo in una stringa e registra che a un endpoint HTTP utilizzando la libreria AJAX di scelta. Come si vedrà in seguito, serializzazione personalizzata e la registrazione di un modulo fornisce per funzionalità più avanzate.

Della limitazione per l'invio

Con AJAX, non è più necessario solo un modo per registrare il contenuto di un modulo al server Web. È possibile certamente eseguirla in modo esplicito tramite un pulsante di invio o a livello di programmazione tramite il metodo di invio dell'oggetto HTML DOM form. Cosa più importante, tuttavia, è possibile considerare l'invio di contenuto per il server in blocchi e in più passaggi anziché tutti contemporaneamente. Pattern-Wise, se scelto per l'invio di tutto il contenuto di un modulo in una sola volta, quindi si applica il criterio "invio EXPLICIT"; in caso contrario, si è limitazione per l'invio tramite il modello "invio limitazione" (ST).

Il motivo TS dimostra utile per la smussatura l'impatto di operazioni di client che consente di inserire pressione nel server, comprese le operazioni che generano frequenti sequenze di andata e ritorno. In questo modo TS motivo la strategia di chiave per l'implementazione interessante funzionalità quali moduli di salvataggio automatico.

In poche parole, il motivo TS suggerisce cache il contenuto da inviare in un buffer lato del browser e li inviano gradualmente, in più passaggi. L'esempio canonico è il motore di completamento automatico. Durante la digitazione in una casella di testo, viene effettuata una richiesta al server per i suggerimenti. È facile capire che il numero di richieste che il server Web in orari di punta è molto elevato.

Raggiungere un compromesso accettabile tra tempi di risposta dell'applicazione e carico di lavoro del server Web, si desidera possibile assumere il controllo sul processo di invio. Per comprendere la limitazione per, si esaminare il codice sorgente di estensione di completamento automatico di Microsoft, cui potrai trovare in AJAX Control Toolkit.

L'estensione di completamento automatico invia una richiesta di suggerimenti durante la digitazione nella casella di input. Base di ciò, uno previsto un gestore per l'evento keypress che chiama il servizio Web specificato. Tuttavia, si scopre autorizzazione uno sguardo più da vicino al codice sorgente relativa che funziona in modo diverso, come illustrato nella figura 4 .

Figura 4 postback controllato da un timer

// Handler for the textbox keydown event
onKeyDown: function(ev) 
{
    // A key has been pressed, so let's reset the timer
    this._timer.set_enabled(false);

    // Is it a special key?
    if (k === Sys.UI.Key.esc) {
       ...
    }
    else if (k === Sys.UI.Key.up) {
       ...
    }
       ...
    else {
       // It's a text key, let's start the timer again 
       this._timer.set_enabled(true);
    }     
}

L'estensione utilizza un timer interno configurato per un intervallo di un secondo (per impostazione predefinita). Il timer viene avviato quando la casella di testo ottiene lo stato attivo per l'input. Non appena viene premuto un tasto premuto, il timer viene arrestato e inizia un'analisi della chiave. Se la chiave è uno con un significato speciale, ad esempio INVIO, ESC, TAB o un tasto di direzione, l'estensione procede con il proprio codice. Se il tasto premuto indica contenuto per essere immesso nel buffer di casella di testo, il timer viene avviato.

Il timer viene arrestato e riavviato ogni volta che viene digitata una chiave effettiva. Se si interrompe la digitazione di un secondo (o qualsiasi intervallo configurare), quindi sul segno di graduazione del timer, il contenuto effettivo del campo input verrà inviato a ricevere suggerimenti. Non è una modifica di grandi dimensioni per gli utenti ma è notizie grande per il server perché si verifica alcun postback fino a parte dell'utente. Se l'utente esegue un'interruzione di un secondo, della scadenza del timer e quindi viene eseguito il postback.

I timer sono uno strumento potente in JavaScript perché il comportamento asincrono inerente può essere utilizzato per simulare il multithreading. Creando un timer in JavaScript, sono che indica L'interprete per eseguire il codice associato appena possibile, ma non immediatamente. Se il codice è abbastanza semplice e l'intervallo di timer appropriato, quindi L'interprete potranno pianificare l'esecuzione in modo corretto, pertanto successivo esecuzione di contemporaneamente più attività.

Form risparmio automatico

Non è insolito in applicazioni AJAX che l'utente trascorre molto tempo lavoro in un unico form, ma senza pubblicare tutti i dati al server Web per un determinato periodo di tempo. Il server Web non dispone di alcun modo per scoprire cosa è succedendo sul client. Successivamente, se non riceve le richieste per un periodo di tempo, è possibile sufficiente del timeout di sessione server. Di conseguenza, quando l'utente registra infine il modulo compilato al server, verrà visualizzato un sorpresa spiacevoli (messaggio di timeout).

Per evitare che, l'applicazione client invia un messaggio di "heartbeat" tramite XMLHttpRequest con una frequenza appropriata. Un messaggio di heartbeat può richiedere qualsiasi modulo e il contenuto è adatto per lo scenario specifico. Ad esempio, può essere una richiesta vuota che indica solo che il client ancora lavorando ed è l'unico obiettivo di tenere la sessione del server dei e in esecuzione. In questo caso, l'intervallo deve essere di qualsiasi lunghezza è inferiore al timeout della sessione configurato per l'applicazione.

L'heartbeat includa anche il contenuto corrente, probabilmente parziale del modulo. Tale contenuto viene caricato periodicamente e memorizzate nella cache il server in attesa di momento opportuno per elaborare. L'idea generale non è molto diversa dalla funzionalità di salvataggio automatico di Microsoft Office Word, in cui il documento aperto periodicamente Salva il nuovamente su disco per evitare la perdita di dati.

Sul Web, moduli di salvataggio automatico hanno un comportamento molto meno definito e relativa implementazione interna è gran parte da sinistra a creatività le esigenze dello sviluppatore. Moduli di salvataggio automatico sono essenzialmente moduli endowed con la possibilità di periodicamente pubblicata relativo contenuto a un URL. L'URL di destinazione verrà quindi gestire i dati e in genere nella cache per l'utente corrente. Nella figura 5 viene illustrato un esempio.

Nella figura 5 Implementazione di un modulo di risparmio automatica

<script type="text/javascript">
    var _myTimerID = null;
    var _userID = null;
    function enableAutoSave(id) {
        _userID = id;
        _myTimerID = window.setInterval(__doAutoSave, 10000);
    }

    function __doAutoSave() {
        var body = "ID='" + _userID + "'&" +
                   "TextBox2='" + $get("TextBox2").value + "'&" +
                   "TextBox3='" + $get("TextBox3").value + "'&" +
                   "TextBox4='" + $get("TextBox4").value + "'";

        PageMethods.AutoSave(_userID, body, onComplete);
    }

    function onComplete(results) {
        $get("Msg").innerHTML = "<i>Form auto-saved for user '" + 
              _userID + "' at " + results + ".</i>";
    }
</script>

<body>
    ...
</body>

// In the code-behind class ...
protected void Button1_Click(object sender, EventArgs e)
{
    string user = TextBox1.Text;

    // Populate input fields if any previously entered 
    // data is available
    string body = AutoSaveAPI.Read(user);
    if (!String.IsNullOrEmpty(body))
    {
        Dictionary<string, object> data = body.ParseToDictionary();
        TextBox2.Text = data["TextBox2"] as string;
        TextBox3.Text = data["TextBox3"] as string;
        TextBox4.Text = data["TextBox4"] as string;
    }

    // Re-enable auto-save for this editing session
    string script = "enableAutoSave('" + user + "');";
    ScriptManager.RegisterStartupScript(this, this.GetType(), 
                  "myTimer", script, true);
}

[WebMethod]
public static string AutoSave(string id, string body)
{
    AutoSaveAPI.Save(id, body);
    return DateTime.Now.ToString();
}

Una volta che l'utente passa il modulo, la classe codebehind carica i dati immessi in precedenza per tale modulo. In genere, i dati sono leggere dalla cache o da qualsiasi origine di scelta. Nella Figura 5 , l'archiviazione è nascosto dietro l'interfaccia della classe AutoSaveAPI. Le informazioni di lettura viene utilizzate per popolare i campi inpui nel modulo.

Per attivare Salvataggio automatico in una nuova sessione di immissione dei dati, creare una riga di uno script che avvia un timer. Quando il timer ticks, il callback raccoglie i valori correnti nei vari campi e genera una stringa. La stringa viene quindi caricata utilizzando XMLHttpRequest. È possibile caricare per un servizio Web, un URL semplice utilizzando un approccio REST o persino per un metodo di pagina. Poiché un modulo di salvataggio automatico è un componente specifico di una determinata pagina, utilizzando un metodo di pagina è la soluzione ideale perché è limitata di pagina, efficace e facile da codice. Figura 6 mostra un modulo di salvataggio automatico in azione.

Nella figura 6 un form risparmio automatico in azione

AJAX E oltre

Con AJAX, il tag di modulo HTML precedente deve alcune aree. Con lo standard HTML 5.0 futura, un nuovo insieme di input, inclusi URL, data e posta elettronica verrà gestito in modo nativo da browser. Questo verrà ridurre il numero di casi per il quale script e convalide sono richiesti. L'evoluzione del linguaggio HTML consente di concentrarsi convalida sul lato server, che deve essere asincrona in applicazioni AJAX.

Inviare domande e commenti per contattare Dino per cutting@microsoft.com.

Dino Esposito è un architetto IDesign e coautore di Microsoft .NET: Architecting Applications for the Enterprise (Microsoft Press, 2008). In base in Italia, Dino è oratore eventi del settore tutto il mondo. È possibile partecipare a suo blog all' weblogs.asp. NET/despos.