Lagre den nye bestillingen

Alt vi trenger å gjøre nå i hovedfilen .aspx, sendes den nye rekkefølgen av bildene til serveren når bildene sorteres. erstatte kommentaren i Oppdater tilbakeringing med følgende kode:

// lage vars var orderArray = [], wrap = ; / / tilbakestill 'lagret' melding $ ("suksess", $ ("# venstre")). fjern (); // prosess hvert bilde $ ("# images img"). hver (funksjon (i) // bygge img objekt var imgObj = "id": $ (dette) .parent (). attr ("id"). split ("_") [1], "rekkefølge": i + 1; // legge til objekt i array orderArray.push (imgObj);); // pakke inn objekt wrap.d = orderArray; // pass til server $ .ajax (type: "POST", url: "WebService.asmx / updateOrder", data: JSON.stringify (wrap), contentType: "application / json; charset = utf-8" : funksjon (data) if (data.d === "saved") $ ("
") .text (" Ny ordre lagret! ") .addClass (" suksess "). appendTo (" # left "); else $ ("
") .text (" Lagre mislyktes ") .addClass (" feil "). appendTo (" # left "););

La oss se på hva denne koden gjør; Først oppretter vi et par variabler som vi senere trenger i skriptet, den første er en matrise bokstavelig, den andre et objekt bokstavelig. Vi fjerner deretter eventuelle suksessmeldinger som kan være til stede fra tidligere sorteringsinteraksjoner. Vi behandler deretter hvert av bildene i bildegitteret ved hjelp av jQuery's Hver() metode som vil utføre den anonyme funksjonen vi spesifiserer en gang for hvert bilde i listen. Denne funksjonen passerer automatisk et indeksnummer for det nåværende elementet, som vi må benytte oss av.

Innenfor denne funksjonen oppretter vi et nytt objekt bokstavelig og gir det to egenskaper; de id av det nåværende bildet, og indeksnummeret til gjeldende Hver() iterasjon. Vi legger da inn dette objektet i gruppen vi opprettet for øyeblikket. Når vi har gjort dette for hvert bilde på siden, setter vi inn arrayet i et innpakningsobjekt. Dette objektet sendes til serveren, som er gjort ved hjelp av jQuery's lavnivå Ajax () metode.

Vi må bruke Ajax () metode i stedet for, si, post() eller getJSON () metoder, fordi vi må spesifisere innholdstype for at serveren skal kunne behandle dataene riktig. Vi stiller forespørselstypen til POST, spesifiser server-sidefilen med navnet på metoden som vil håndtere forespørselen som en forespørselsstrengparameter. Vi passerer også i vårt forberedte wrap-objekt. For å konvertere objektet fullt ut til JSON syntaks bruker vi stringify () metode av json2.js fil.

Vi spesifiserer også en suksesshandler som vil bli utført når forespørselen er fullført. vi kan se strengen returnert av serveren ved å få tilgang til dataene som sendes tilbake til denne suksesshandleren. Den faktiske strengen vil være inneholdt i en egenskap av data objekt merket d. Data returnert til en side via AJAX i. Net er vanligvis tilgjengelig via a d objekt på denne måten.

Vi kan legge til en annen melding og klassenavn til siden, avhengig av om serveren indikerer at forespørselen var en suksess eller feil. Du kan teste dette og se de forskjellige meldingene ved å bruke Firebug for å endre id Attributt av en av bildebeholdere til en verdi som ikke eksisterer i databasen, og deretter sortere et bilde. Slik viser våre meldinger:

Den aktive servermetoden filen

For å motta JSON-objektet som sendes til serveren via AJAX etter en sorteringsinteraksjon, kan vi bruke en asmx-fil; høyreklikk roten til nettstedet i Solution Explorer og velg Legg til nytt element. I dialogboksen som vises velger du Nettjeneste i toppseksjonen og Visual C # i Språk velg boks, og klikk deretter Legg til.

Dette vil gi deg en ny WebService.asmx filen på nettstedet ditt, men koden bak for denne filen vil gå inn i en automatisk opprettet mappe som heter App_code. Vi trenger ikke å oppdatere asmx filen i det hele tatt, alt vil bli gjort i koden bak WebService.asmx.cs fil. Åpne den opp, og du vil se at det allerede er mye kode i filen; endre den slik at filen i sin helhet vises som følger:

bruker system; bruker System.Collections.Generic; bruker System.Data; bruker System.Data.SqlClient; bruker System.Linq; bruker System.Web; bruker System.Web.Services; bruker System.Web.Script.Services; /// 
 /// Mottar og lagrer ny rekkefølge av bilder /// 
 [WebServiceBinding (ConformsTo = WsiProfiles.BasicProfile1_1)] // For å tillate at denne webtjenesten blir kalt fra skript, bruker ASP.NET AJAX, uncomment følgende linje. [System.Web.Script.Services.ScriptService] offentlig klasse WebService: System.Web.Services.WebService offentlig klasse ImageDTO public string id get; sett;  public int order get; sett;  [WebMethod] public string updateOrder (List d) // definer forbindelse SqlConnection dbCon = ny SqlConnection ("Server = DESKTOP \\ SQLEXPRESS; UID = sa; PWD = din_password; Database = image_organiser"); // prosess JSON objekt foreach (ImageDTO img i d) // definer prosedyre streng sSQL = "Oppdater bilder sett [rekkefølge] =" + img.order + "hvor id =" + img.id; prøv // åpen forbindelse dbCon.Open (); // Oppdater data cmd.ExecuteNonQuery (); // Lukk forbindelse dbCon.Close ();  fangst (SqlException ex) retur "mislyktes";   //suksess! returnere "lagret"; 

Vi må legge til flere navneområder i brukerdelen øverst i filen for å kunne jobbe med vår SQL-database. Vi må også sikre at vi uncomment linjen som tillater at vår webtjeneste blir kalt fra skriptet i hovedaspx-siden (det er tydelig merket med en kommentar i standardversjonen av filen).

Innen Nettjeneste klasse må vi legge til en ny klasse som representerer hver av de indre objektene i gruppen som sendes til webtjenesten. Vi gjør dette med ImageDTO klasse og gi hvert objekt id og rekkefølge egenskaper og tilordne getter og setter metoder for å jobbe med verdiene av disse egenskapene.

Neste kommer metoden som kalles fra vårt skript; de updateOrder web-metoden. Denne metoden mottar d objekt som vi kaster som en liste over ImageDTO objekter, Vi vil da kunne bruke metodene som er definert i vår klasse for å få tilgang til hver eiendom.

Vi definerer tilkoblingsinformasjonen som trengs for å koble til vår database og deretter behandle hvert objekt i vår ImageDTO-listen. Vi trekker ut den nye ordren og id av bildet og bruk dette for å oppdatere rekkefølge kolonne for den tilsvarende raden i MSSQL-tabellen.

Denne koden er relativt lik koden vi brukte for å få informasjonen ut av databasen på sidebelastning, vi bruker bare en annen tilkoblingsstreng og bruker ExecuteNonQuery () metode i stedet for ExecuteReader () fordi vi oppdaterer databasen i stedet for å bare lese fra den. Vi pakker også vår tilkobling i en prøv ... fange setning og enten utføre strengen mislyktes eller lagret avhengig av om oppdateringen lykkes.

Sammendrag

Vi brukte c # smaken av. Net kombinert med jQuery UI i denne opplæringen for å lage en side som husker rekkefølgen på bildene på den, og tillater bildene å bli omorganisert i henhold til lystene og begjærene til den besøkende til siden. I dette eksemplet er det en enkel side, men ikke glem at det ved en riktig implementering kun vil være tilgjengelig bare av den autentiserte brukeren; hver bruker vil ha tilgang til sine egne bilder og kunne sortere dem, mens bildene vil bli løst på den offentlig tilgjengelige versjonen av siden.

Vi gjorde ingen sanitisering av dataene som ble sendt inn i server-sidefilen som oppdaterer databasen; Selv om brukeren ikke oppgir dataene i et tekstfelt, kan den utgående forespørselen fra siden lett bli manipulert for å sende skadelig kode til serveren. Faren for denne typen angrep ville være begrenset, da vi sannsynligvis bare ville tillate sortering i utgangspunktet til registrerte, autentiserte brukere. Selv om sikkerhet er utenfor omfanget av denne opplæringen, bør det alltid være en primær bekymring når det gjelder live kode.