De nieuwe volgorde opslaan

Alles wat we nu moeten doen in het hoofdaspx-bestand, is de nieuwe volgorde van de afbeeldingen naar de server sturen wanneer de afbeeldingen zijn gesorteerd; vervang de opmerking in de bijwerken terugbellen met de volgende code:

// create vars var orderArray = [], wrap = ; // reset 'saved' message $ (". success", $ ("# left")). remove (); // verwerk elke afbeelding $ ("# images img"). each (functie (i) // build img object var imgObj = "id": $ (this) .parent (). attr ("id"). splitsen ("_") [1], "volgorde": i + 1; // object toevoegen aan array orderArray.push (imgObj);); // wrap in object wrap.d = orderArray; // doorgeven aan server $ .ajax (type: "POST", url: "WebService.asmx / updateOrder", gegevens: JSON.stringify (wrap), contentType: "application / json; charset = utf-8", success : function (data) if (data.d === "saved") $ ("
") .text (" Nieuwe bestelling opgeslagen! ") .addClass (" succes "). appendTo (" # left "); else $ ("
") .text (" Opslaan mislukt ") .addClass (" failure "). appendTo (" # left "););

Laten we kijken naar wat deze code doet; eerst maken we een aantal variabelen die we later in het script nodig zullen hebben, de eerste is een array letterlijk, de tweede een letterlijk object. We verwijderen vervolgens eventuele succesboodschappen die aanwezig kunnen zijn van eerdere sorteerinteracties. Vervolgens verwerken we elk van de afbeeldingen in het afbeeldingsraster met behulp van jQuery's elk() methode, die de anonieme functie uitvoert die we eenmaal opgeven voor elke afbeelding in de lijst. Deze functie krijgt automatisch een indexnummer doorgegeven voor het huidige item, waar we gebruik van moeten maken.

Binnen deze functie maken we een nieuw object letterlijk en geven het twee eigenschappen; de ID kaart van de huidige afbeelding en het indexnummer van de huidige afbeelding elk() iteratie. Vervolgens voegen we dit object in de array die we zojuist hebben gemaakt. Zodra we dit voor elke afbeelding op de pagina hebben gedaan, plaatsen we de array in een wikkelobject. Dit object wordt doorgegeven aan de server, wat wordt gedaan met behulp van jQuery's low-level Ajax() methode.

We moeten het gebruiken Ajax() methode in plaats van, laten we zeggen, de post() of getJSON () methoden, omdat we het moeten specificeren contentType zodat de server de gegevens correct verwerkt. We hebben het verzoektype ingesteld op POST, specificeer het server-side bestand met de naam van de methode die de aanvraag verwerkt als een query string parameter. We geven ook ons ​​voorbereide wrap-object door. Om het object volledig in de JSON-syntaxis om te zetten, gebruiken we het stringify () methode van de json2.js het dossier.

We specificeren ook een succeshandler die zal worden uitgevoerd zodra het verzoek is voltooid; we kunnen zien dat de tekenreeks wordt geretourneerd door de server door toegang te krijgen tot de gegevens die zijn doorgegeven aan deze succeshandler. De eigenlijke string wordt opgenomen in een artikel van de gegevens object gelabeld d. Gegevens die via AJAX in .Net naar een pagina worden geretourneerd, zijn meestal toegankelijk via een d object op deze manier.

We kunnen een ander bericht en een andere naam aan de pagina toevoegen, afhankelijk van het feit of de server aangeeft dat het verzoek een succes of mislukking was. Je kunt dit testen en de verschillende berichten bekijken door Firebug te gebruiken om de ID kaart attribuut van een van de afbeeldingscontainers op een waarde die niet bestaat in de database en vervolgens een afbeelding sorteert. Dit is hoe onze berichten zouden moeten verschijnen:

Het bestand met de actieve servermethode

Om het JSON-object te ontvangen dat via AJAX aan de server is doorgegeven na een sorteeractie, kunnen we een asmx-bestand gebruiken; Klik met de rechtermuisknop op de hoofdmap van de site in de Solution Explorer en kies Voeg een nieuw item toe. Kies in het dialoogvenster dat verschijnt Webservice in het bovenste gedeelte en Visual C # in de Taal selecteer het vak en klik vervolgens op Toevoegen.

Dit geeft je een nieuw WebService.asmx bestand op uw site, maar de achterliggende code voor dit bestand gaat naar een automatisch aangemaakte map met de naam App_Code. We hoeven het asmx-bestand helemaal niet bij te werken, alles zal worden gedaan in de achterliggende code WebService.asmx.cs het dossier. Open het en je zult zien dat er al veel code in het bestand zit; verander het zodat het bestand in zijn geheel als volgt wordt weergegeven:

systeem gebruiken; met behulp van System.Collections.Generic; met behulp van System.Data; met behulp van System.Data.SqlClient; met behulp van System.Linq; met behulp van System.Web; met behulp van System.Web.Services; met behulp van System.Web.Script.Services; /// 
 /// Ontvangt en slaat nieuwe volgorde van afbeeldingen op /// 
 [WebServiceBinding (ConformsTo = WsiProfiles.BasicProfile1_1)] // Als u wilt toestaan ​​dat deze webservice vanuit het script wordt aangeroepen met behulp van ASP.NET AJAX, verwijdert u de volgende regel. [System.Web.Script.Services.ScriptService] public class WebService: System.Web.Services.WebService public class ImageDTO public string id get; vast te stellen;  openbare int-bestelling krijg; vast te stellen;  [WebMethod] public string updateOrder (Lijst d) // define connection SqlConnection dbCon = new SqlConnection ("Server = DESKTOP \\ SQLEXPRESS; UID = sa; PWD = your_password; Database = image_organiser"); // verwerk JSON-object foreach (ImageDTO img in d) // define procedure string sSQL = "Update afbeeldingen set [order] =" + img.order + "waarbij id =" + img.id; probeer // open connection dbCon.Open (); // update gegevens cmd.ExecuteNonQuery (); // close connection dbCon.Close ();  catch (SqlException ex) return "failed";  // succes! terug "opgeslagen"; 

We moeten verschillende naamruimten aan de gebruiksectie boven aan het bestand toevoegen om met onze SQL-database te kunnen werken. We moeten er ook voor zorgen dat we de regel waarop onze webservice wordt aangeroepen vanuit het script op de hoofdpagina van aspx opheffen (het is duidelijk gemarkeerd met een opmerking in de standaardversie van het bestand).

Binnen de WebService klasse moeten we een nieuwe klasse toevoegen die elk van de binnenste objecten in de array vertegenwoordigt die aan de webservice is doorgegeven. We doen dit met de ImageDTO klasse en geef elk object ID kaart en bestellen eigenschappen en toewijzer getter en setter methoden voor het werken met de waarden van deze eigenschappen.

Vervolgens komt de methode die wordt aangeroepen vanuit ons script; de order bijwerken web-methode. Deze methode ontvangt de d object dat we casten als een lijst van ImageDTO voorwerpen; we kunnen dan de methoden gebruiken die in onze klasse zijn gedefinieerd om toegang te krijgen tot elke eigenschap.

We definiëren de verbindingsinformatie die nodig is om verbinding te maken met onze database en verwerken vervolgens elk object in ons ImageDTO-lijst. We extraheren de nieuwe bestelling en de ID kaart van de afbeelding en gebruik deze om de bestellen kolom voor de overeenkomstige rij in de MSSQL-tabel.

Deze code is relatief vergelijkbaar met de code die we hebben gebruikt om de informatie uit de database te halen bij het laden van de pagina, we gebruiken gewoon een andere verbindingsreeks en gebruiken de ExecuteNonQuery () methode in plaats van ExecuteReader () omdat we de database bijwerken in plaats van er alleen vanaf te lezen. We verpakken ook onze verbindingsuitvoering in a proberen te vangen en voer de tekenreeks uit mislukt of gered afhankelijk van of de update slaagt.

Samenvatting

We hebben de c # smaak van .Net gecombineerd met jQuery UI in deze tutorial gebruikt om een ​​pagina te maken die de volgorde van de afbeeldingen erop onthoudt en waarmee de afbeeldingen kunnen worden gerangschikt volgens de grillen en verlangens van de bezoeker van de pagina. In dit voorbeeld is het een eenvoudige pagina, maar vergeet niet dat dit bij een juiste implementatie waarschijnlijk alleen toegankelijk zou zijn voor de geverifieerde gebruiker; elke gebruiker zou toegang hebben tot zijn of haar eigen afbeeldingen en ze kunnen sorteren, terwijl de afbeeldingen zouden worden gerepareerd op de publiek toegankelijke versie van de pagina.

We hebben geen sanering doorgevoerd van de gegevens die werden doorgegeven aan het bestand aan de serverzijde dat de database bijwerkt; Hoewel de gebruiker de gegevens niet in een tekstveld invoert, kan het uitgaande verzoek van de pagina eenvoudig worden gemanipuleerd om kwaadwillende code naar de server te verzenden. Het gevaar van dit soort aanvallen zou beperkt zijn omdat we waarschijnlijk alleen het sorteren zouden toestaan ​​aan geregistreerde, geauthenticeerde gebruikers. Hoewel beveiliging buiten het bestek van deze zelfstudie valt, zou het altijd een eerste zorg moeten zijn bij het omgaan met live code.