Salvarea ordinii noi

Tot ceea ce trebuie să facem acum în fișierul .aspx principal este trimiterea ordinii noi a imaginilor la server ori de câte ori imaginile sunt sortate; înlocuiți comentariul în Actualizați inversă cu următorul cod:

// crează vars var orderArray = [], wrap = ; // reinițializați mesajul "salvat" $ (". succes", $ ("# left")) remove (); // procesează fiecare imagine $ ("# images img") fiecare (funcția (i) // construi img obiect var imgObj = "id": $ (this). împărțiți ("_") [1], "comanda": i + 1; // adăugați obiect la array orderArray.push (imgObj);); // înfășurați în obiect wrap.d = orderArray; // treci la server $ .ajax (tip: "POST", url: "WebService.asmx / updateOrder", date: JSON.stringify (wrap), contentType: "application / json; charset = utf-8" : funcția (date) if (data.d === "salvat") $ ("
") .text (" Noua ordine salvată! ") .addClass (" succes ") appendTo (" # left "
") .text (" Salvați eșuat ") .addClass (" eșec "). appendTo (" # left "););

Să ne uităm la ceea ce face acest cod; mai întâi vom crea câteva variabile pe care le vom avea nevoie mai târziu în scenariu, primul este un literar matriceal, al doilea obiect literal. Apoi eliminăm toate mesajele de succes care pot apărea din interacțiunile de sortare anterioare. Apoi, procesăm fiecare dintre imaginile din grila de imagini utilizând jQuery fiecare() , care va executa funcția anonimă specificată o dată pentru fiecare imagine din listă. Această funcție este transmisă automat un număr de index pentru elementul curent, de care trebuie să facem uz.

În cadrul acestei funcții se creează un nou obiect literal și se dau două proprietăți; id a imaginii curente și numărul indexului curentului fiecare() repetare. Apoi inserăm acest obiect în matricea pe care am creat-o acum un moment. După ce am făcut acest lucru pentru fiecare imagine din pagină, inserăm matricea într-un obiect de împachetare. Acest obiect va fi trecut pe server, care se face folosind jQuery's low-level ajax () metodă.

Trebuie să folosim ajax () în loc de, să zicem, post() sau getJSON () metode, deoarece trebuie să specificăm tipul de conținut pentru ca serverul să proceseze corect datele. Am setat tipul de solicitare la POST, specificați fișierul de pe server cu numele metodei care va gestiona solicitarea ca parametru de șir de interogare. De asemenea, trecem în obiectul de înfășurare pregătit. Pentru a converti complet obiectul în sintaxa JSON, folosim stringify () metodă a json2.js fişier.

De asemenea, specificăm un handler de succes care va fi executat după finalizarea solicitării; putem vedea șirul returnat de server accesând datele trimise înapoi la acest programator de succes. Șirul real va fi conținut într - o proprietate a date obiect etichetat d. Datele returnate pe o pagină prin AJAX în .Net sunt de obicei accesate prin intermediul unui a d obiect în acest fel.

Putem adăuga un mesaj diferit și un nume de clasă la pagină, în funcție de faptul că serverul indică faptul că cererea a fost un succes sau un eșec. Puteți testa acest lucru și puteți vedea diferitele mesaje utilizând Firebug pentru a schimba id atributul unuia dintre containerele de imagine unei valori care nu există în baza de date și apoi sortarea unei imagini. Astfel trebuie să apară mesajele noastre:

Fișierul metodei Active Server

Pentru a primi obiectul JSON transmis către server prin intermediul AJAX după o interacțiune de sortare, putem folosi un fișier asmx; faceți clic dreapta pe rădăcina site-ului în Soluție Explorer și alegeți Adăugați un element nou. În caseta de dialog care apare alegeți Serviciu web în secțiunea de sus și Visual C # în Limba selectați caseta, apoi faceți clic pe Adăuga.

Acest lucru vă va oferi un nou WebService.asmx fișier în site-ul dvs., dar codul-spatele pentru acest fișier va merge într-un folder creat automat numit App_code. Nu avem nevoie să actualizăm deloc fișierul asmx, totul se va face în codul din spate WebService.asmx.cs fişier. Deschideți-l și veți vedea că în fișier există deja multe coduri; modificați-o astfel încât fișierul să apară în întregime după cum urmează:

utilizând Sistemul; folosind System.Collections.Generic; utilizând System.Data; utilizând System.Data.SqlClient; folosind System.Linq; utilizând System.Web; utilizând System.Web.Services; utilizând System.Web.Script.Services; /// 
 /// Primeste si salveaza o noua ordine de imagini /// 
 [WebServiceBinding (ConformsTo = WsiProfiles.BasicProfile1_1)] // Pentru a permite ca acest serviciu Web să fie apelat din script, folosind ASP.NET AJAX, detașați următoarea linie. [System.Web.Script.Services.ScriptService] clasă publică WebService: System.Web.Services.WebService public class ImageDTO public string id get; a stabilit;  public int order get; a stabilit;  [WebMethod] șirul public de actualizareOrder (Listă d) // defini conexiunea SqlConnection dbCon = nou SqlConnection ("Server = DESKTOP \\ SQLEXPRESS; UID = sa; PWD = your_password; Database = image_organiser"); // proces JSON obiect foreach (ImageDTO img în d) // definiți șir de procedură sSQL = "Actualizare set de imagini [order] =" + img.order + "unde id =" + img.id; încercați // deschideți conexiunea dbCon.Open (); // actualizare date cmd.ExecuteNonQuery (); // închide conexiunea dbCon.Close ();  captură (SqlException ex) return "nu a reușit";  // succes! retur "salvat"; 

Trebuie să adăugăm mai multe spații de nume în secțiunea de utilizare din partea de sus a fișierului pentru a lucra cu baza de date SQL. De asemenea, trebuie să ne asigurăm că necompletăm linia care permite serviciului nostru Web să fie apelat din script-ul în pagina principală aspx (este clar marcat cu un comentariu în versiunea implicită a fișierului).

În cadrul Serviciu web trebuie să adăugăm o nouă clasă care reprezintă fiecare dintre obiectele interioare din matricea trecută serviciului web. Facem asta cu ImageDTO clasă și să dea fiecare obiect id și Ordin proprietățile și atribuirea metodelor getter și setter pentru a lucra cu valorile acestor proprietăți.

Apoi vine metoda care este chemată din scenariul nostru; updateOrder metoda web. Această metodă primește d obiect pe care îl aruncăm ca o listă de ImageDTO obiecte; atunci vom putea folosi metodele definite în clasa noastră pentru a accesa fiecare proprietate.

Definim informațiile de conectare necesare conectării la baza noastră de date și apoi procesăm fiecare obiect din site-ul nostru Lista de imagini. Extragem noua comandă și id a imaginii și pentru a le actualiza Ordin pentru rândul corespunzător din tabelul MSSQL.

Acest cod este relativ similar cu codul folosit pentru a obține informațiile din baza de date la încărcarea paginii, pur și simplu folosim un alt șir de conexiuni și folosim ExecuteNonQuery () în loc de ExecuteReader () deoarece actualizăm baza de date în loc să citim doar din ea. Înfășurăm, de asemenea, execuția conexiunii într-o rețea încearcă să prinzi instrucțiune și fie ieșiți șirul a eșuat sau salvate în funcție de succesul actualizării.

rezumat

Am folosit aroma c # a .Net combinată cu jQuery UI în acest tutorial pentru a crea o pagină care să rețină ordinea imaginilor pe ea și permite ca imaginile să fie reordonate în funcție de capriciile și dorințele vizitatorului de pagină. În acest exemplu este o pagină simplă, dar nu uitați că, într-o implementare corectă, acest lucru ar fi probabil accesibil doar de către utilizatorul autentificat; fiecare utilizator ar avea acces la propriile sale imagini și ar putea să le sorteze, în timp ce imaginile vor fi fixate pe versiunea accesibilă publicului a paginii.

Nu am făcut nici o dezinfectare a datelor care sunt transmise în fișierul de pe server care actualizează baza de date; deși utilizatorul nu introduce datele într-un câmp de text, cererea de ieșire de pe pagină poate fi manipulată cu ușurință pentru a trimite cod rău intenționat serverului. Pericolul acestui tip de atac ar fi limitat, deoarece probabil vom permite doar sortarea în primul rând a utilizatorilor înregistrați, autentificați. Deși securitatea depășește domeniul de aplicare al acestui tutorial, ar trebui să fie întotdeauna o preocupare principală atunci când se ocupă de codul viu.