Salvataggio del nuovo ordine

Tutto quello che dobbiamo fare ora nel file .aspx principale è inviare il nuovo ordine delle immagini al server ogni volta che le immagini vengono ordinate; sostituire il commento nel aggiornare callback con il seguente codice:

// crea vars var orderArray = [], wrap = ; // resetta il messaggio 'salvato' $ (". successo", $ ("# sinistra")). remove (); // processa ogni immagine $ ("# images img"). each (function (i) // build img object var imgObj = "id": $ (this) .parent (). attr ("id"). split ("_") [1], "order": i + 1; // aggiungi oggetto a array orderArray.push (imgObj);); // wrap in object wrap.d = orderArray; // passa al server $ .ajax (tipo: "POST", url: "WebService.asmx / updateOrder", dati: JSON.stringify (wrap), contentType: "application / json; charset = utf-8", successo : function (data) if (data.d === "saved") $ ("
"). text (" Nuovo ordine salvato! ") .addClass (" successo "). appendTo (" # left "); else $ ("
") .text (" Save failed ") .addClass (" failure "). appendTo (" # left "););

Diamo un'occhiata a cosa fa questo codice; per prima cosa creiamo un paio di variabili di cui avremo bisogno in seguito nello script, il primo è un array letterale, il secondo un oggetto letterale. Quindi rimuoviamo tutti i messaggi di successo che possono essere presenti dalle precedenti interazioni di ordinamento. Elaboriamo quindi ciascuna delle immagini nella griglia dell'immagine utilizzando jQuery ogni() metodo, che eseguirà la funzione anonima che specifichiamo una volta per ogni immagine nell'elenco. Questa funzione viene automaticamente passata un numero di indice per l'articolo corrente, che dobbiamo utilizzare.

All'interno di questa funzione creiamo un nuovo oggetto letterale e gli diamo due proprietà; il id dell'immagine corrente e il numero di indice della corrente ogni() iterazione. Quindi inseriamo questo oggetto nell'array che abbiamo creato un momento fa. Una volta fatto questo per ogni immagine sulla pagina, inseriamo la matrice in un oggetto di avvolgimento. Questo oggetto verrà passato al server, che viene eseguito utilizzando il livello basso di jQuery ajax () metodo.

Dobbiamo usare il ajax () metodo invece di, ad esempio, il inviare() o getJSON () metodi, perché abbiamo bisogno di specificare il tipo di contenuto in modo che il server elabori correttamente i dati. Impostiamo il tipo di richiesta a INVIARE, specificare il file sul lato server con il nome del metodo che gestirà la richiesta come parametro della stringa di query. Passiamo anche nel nostro oggetto wrapper preparato. Per convertire completamente l'oggetto in sintassi JSON usiamo il stringa i () metodo del json2.js file.

Specifichiamo anche un gestore di successo che verrà eseguito una volta completata la richiesta; possiamo vedere la stringa restituita dal server accedendo ai dati passati a questo gestore di successo. La stringa effettiva sarà contenuta in una proprietà del dati oggetto etichettato d. I dati restituiti a una pagina tramite AJAX in .Net è generalmente accessibile tramite a d oggetto in questo modo.

Possiamo aggiungere un messaggio e un nome di classe diversi alla pagina a seconda che il server indichi che la richiesta è stata un successo o un fallimento. Puoi testarlo e vedere i diversi messaggi usando Firebug per cambiare il id attributo di uno dei contenitori immagine a un valore che non esiste nel database e quindi all'ordinamento di un'immagine. Ecco come dovrebbero apparire i nostri messaggi:

Il file del metodo Active Server

Per ricevere l'oggetto JSON passato al server tramite AJAX dopo un'interazione di ordinamento, possiamo usare un file asmx; fare clic con il tasto destro del mouse sulla radice del sito in Esploratore di soluzioni e scegliere Aggiungi un nuovo elemento. Nella finestra di dialogo che appare scegli Servizio web nella parte superiore e Visual C # nel linguaggio selezionare la casella, quindi fare clic Inserisci.

Questo ti darà un nuovo WebService.asmx file nel tuo sito, ma il code-behind per questo file andrà in una cartella creata automaticamente chiamata App_Code. Non è necessario aggiornare il file asmx, tutto verrà eseguito nel code-behind WebService.asmx.cs file. Aprilo e vedrai che c'è già molto codice nel file; cambiala in modo che il file nella sua interezza appaia come segue:

usando il sistema; using System.Collections.Generic; usando System.Data; using System.Data.SqlClient; using System.Linq; usando System.Web; utilizzando System.Web.Services; utilizzando System.Web.Script.Services; /// 
 /// Riceve e salva un nuovo ordine di immagini /// 
 [WebServiceBinding (ConformsTo = WsiProfiles.BasicProfile1_1)] // Per consentire a questo servizio Web di essere chiamato dallo script, utilizzando ASP.NET AJAX, rimuovere il commento dalla riga seguente. [System.Web.Script.Services.ScriptService] WebService di classe pubblica: System.Web.Services.WebService public class ImageDTO public string id get; impostato;  public int order get; impostato;  [WebMethod] public string updateOrder (List d) // define connection SqlConnection dbCon = new SqlConnection ("Server = DESKTOP \\ SQLEXPRESS; UID = sa; PWD = tua_password; Database = image_organiser"); // process JSON object foreach (ImageDTO img in d) // define procedure string sSQL = "Aggiorna immagini set [ordine] =" + img.order + "dove id =" + img.id; prova // apri connessione dbCon.Open (); // aggiorna i dati cmd.ExecuteNonQuery (); // chiudi connessione dbCon.Close ();  catch (SqlException ex) return "failed";  // successo! ritorno "salvato"; 

Abbiamo bisogno di aggiungere diversi namespace alla sezione using nella parte superiore del file per lavorare con il nostro database SQL. Dovremo inoltre rimuovere il commento dalla linea che consente al nostro servizio Web di essere chiamato dallo script nella pagina principale di aspx (è chiaramente contrassegnato con un commento nella versione predefinita del file).

All'interno del Servizio web classe abbiamo bisogno di aggiungere una nuova classe che rappresenta ciascuno degli oggetti interni all'interno della matrice passata al servizio web. Lo facciamo con il ImageDTO classe e dare ogni oggetto id e ordine proprietà e assegnare metodi getter e setter per lavorare con i valori di queste proprietà.

Poi viene il metodo che viene chiamato dal nostro script; il updateOrder metodo web. Questo metodo riceve il d oggetto che abbiamo lanciato come elenco di ImageDTO oggetti; potremo quindi utilizzare i metodi definiti nella nostra classe per accedere a ciascuna proprietà.

Definiamo le informazioni di connessione necessarie per connettersi al nostro database e quindi elaborare ogni oggetto nel nostro Elenco ImageDTO. Estraiamo il nuovo ordine e il id dell'immagine e usarla per aggiornare il ordine colonna per la riga corrispondente nella tabella MSSQL.

Questo codice è relativamente simile al codice che abbiamo usato per ottenere le informazioni dal database al caricamento della pagina, usiamo solo una stringa di connessione diversa e usiamo il ExecuteNonQuery () metodo invece di ExecuteReader () perché stiamo aggiornando il database invece di limitarci a leggerlo. Inoltre, avvolgiamo la nostra esecuzione della connessione in a prova a prendere dichiarazione e l'output della stringa mancato o salvato a seconda se l'aggiornamento ha esito positivo.

Sommario

Abbiamo usato il sapore c # di .Net combinato con l'interfaccia utente di jQuery in questo tutorial per creare una pagina che ricorda l'ordine delle immagini su di esso e consente di riordinare le immagini secondo i capricci e i desideri del visitatore alla pagina. In questo esempio è una pagina semplice ma non dimenticare che in una corretta implementazione questo sarebbe probabilmente accessibile solo dall'utente autenticato; ogni utente avrebbe accesso alle proprie immagini ed essere in grado di ordinarle, mentre le immagini sarebbero fissate sulla versione pubblicamente accessibile della pagina.

Non abbiamo effettuato alcuna sanificazione dei dati passati nel file sul lato server che aggiorna il database; sebbene l'utente non inserisca i dati in un campo di testo, la richiesta in uscita dalla pagina potrebbe essere facilmente manipolata per inviare codice dannoso al server. Il pericolo di questo tipo di attacco sarebbe limitato poiché probabilmente permetteremo solo l'ordinamento in primo luogo agli utenti registrati e autenticati. Sebbene la sicurezza esuli dallo scopo di questo tutorial, dovrebbe sempre essere una preoccupazione primaria quando si ha a che fare con codice live.