Share
I denne veiledningen vil jeg gå gjennom hvordan du skriver en Twitter-widget for ASP.NET i form av en gjenbrukbar serverkontroll som er komplett med fine ting som automatisk å slå webadresser til koblinger og cache for å øke hastigheten på sidetilpasningstider.
For å følge denne opplæringen er alt du trenger, Visual Studio (Du kan bruke MonoDevelop hvis du ikke er på Windows, selv om det ikke er noen garantier der.) Hvis du ikke ønsker å gaffel over kontanter for den fullstendige versjonen av Visual Studio, kan ta tak i den gratis Express Edition.
Du trenger også kunnskap om C # 3.0, da denne opplæringen gjør bruk av noen av de nyere funksjonene i språket, for eksempel lambda-uttrykk og Var søkeord.
ASP.NET inneholder en praktisk funksjon som kalles Server Controls. Disse er egendefinerte koder som tar sikte på å hjelpe utviklere til å strukturere sin kode. Når en side som bruker en serverkontroll, blir forespurt, utfører ASP.NET runtime Render () metode og inkluderer produksjonen i den endelige siden.
Når du har opprettet et nytt webprogram i Visual Studio, høyreklikker du i Solution Explorer og legger til et nytt element i løsningen. Velg ASP.NET Server Control, og gi den et navn. Her har jeg kalt det Twidget.cs, men du er velkommen til å ringe det uansett hva du liker. Lim inn følgende kode i, og vær ikke bekymret hvis alt ser litt utlandet - jeg skal forklare det hele kort tid.
Accentsconagua
bruker system; bruker System.Collections.Generic; bruker System.Linq; bruker System.Web; bruker System.Web.UI; bruker System.Web.Script.Serialization; bruker System.Net; namespace WebApplication1 offentlig klasse Twidget: Control public string Konto get; sett; offentlige int Tweets get; sett; beskyttet overstyring ugyldig Render (HtmlTextWriter-skribent) writer.Write ("Dette handler om så grunnleggende som du kan få for en Twitter-widget. Slik fungerer det:
Når en bruker ber om en side med denne kontrollen på den, Render () Metoden blir utført med a HtmlTextWriter passert som en parameter. Det skriver ut tag, og går deretter inn i en sløyfe som skriver ut hver tweet som en liste element. Den magien her skjer i GetTweets () metode. Legg merke til hvordan vi bruker Ta() utvidelsesmetode for å sikre at vi bare skriver ut mengden tweets som vi blir bedt om.
Når kjøringen er overført til GetTweets () metode, oppsett vi a List> string< å holde våre tweets og a JavaScriptSerializer å analysere JSON fra Twitter API-serverne. Erklæringen på linjene 31 - 34 (delt opp for lesbarhet) treffer brukerens tidslinje i JSON-format, og deserialiserer seg til .NET-typer vi kan jobbe med. På linje 36 løp vi gjennom alle tweets og legger dem en etter en til tweetlisten. Vi må manuelt kaste x [ "tekst"] til en string fordi vi deserialiserte det som en gjenstand. Vi måtte gjøre dette, fordi JSON returnert av Twitter API bruker et smorgasboard av forskjellige typer - noe som er greit for JavaScript, men litt vanskelig med C #.
Nå har vi koden for Twitter-widgeten vår; la oss sette den til bruk! Åpne din default.aspx side (eller hvilken side du vil bruke dette inn) og sett følgende kode umiddelbart etter <%@ Page %> direktiv:
<%@ Register TagPrefix="widgets" Namespace="WebApplication1" Assembly="WebApplication1" %>
Du er velkommen til å endre TagPrefix til hva du vil, men sørg for at namespace Attributtet er riktig satt til hvilket navneområde du plasserte widgetkoden i, og sørge for at montering Attributtet er satt til navnet på ditt webprogram (i vårt tilfelle, WebApplication1).
Når du har registrert riktig prefix (og du må gjøre dette for hver side du vil bruke kontrollen på), kan du begynne å bruke den. Lim inn følgende kode et sted på siden din, og igjen, vær så snill å endre attributter til hva du vil:
Hvis du har gjort alt riktig, bør du se en side som ligner dette når du kjører webapplikasjonen din:
Du må innrømme at kontrollen vi har i øyeblikket, er ganske rudimentær. Det trenger ikke å være skjønt, så la oss spiffy opp det litt ved å slå webadresser til hyggelige klikkbare koblinger for de besøkende.
Finn foreach loop i Render () metode og skrap det helt. Erstatt det med dette:
// Du må legge til dette ved hjelp av et direktiv til toppen av filen: ved hjelp av System.Text.RegularExpressions; Foretak (var t i GetTweets (). Ta (Tweets)) streng s = Regex.Replace (HttpUtility.HtmlEncode (t), @ "[az] +: // [^ \ s] +", x => " "+ x.Value +" ", RegexOptions.Compiled | RegexOptions.IgnoreCase); writer.Write ("Det er ganske mye den samme koden, bortsett fra det humongøse kallet til Regex.Replace () på linje 6. Jeg skal forklare hva dette gjør.
Den første parameteren er inngangen, eller strengen som Regex fungerer på. I dette tilfellet er det bare tweetteksten etter at den er sendt gjennom HttpUtility.HtmlEncode () så vi blir ikke offer for et ond XSS-angrep. Inngangen matches deretter mot den andre parameteren, som er et regulært uttrykk som er utformet for å matche en nettadresse.
Den tredje parameteren er hvor det blir litt involvert. Dette er et lambda-uttrykk, en funksjon som er ny for C # 3. Det er egentlig en veldig kort måte å skrive en metode på som dette:
offentlig statisk streng SomeFunction (Match x) return "" + x.Value + "";
Alt det gjør er å pakke inn nettadressen med en tag, hvorav alle anførselstegn i nettadressen erstattes med HTML-enheten ", som bidrar til å forhindre XSS-angrep. Den fjerde og siste parameteren er bare en ELLERed sammen to flagg som justerer måten vår regex oppfører seg på.
Utgangen av kontrollen etter å ha gjort denne justeringen er noe lik skjermbildet nedenfor.
Det er et stort problem med koden jeg har gitt deg ovenfor, og det er at det ikke cache svaret fra Twitter API. Dette betyr at hver gang noen laster inn siden din, må serveren gjøre en forespørsel til Twitter API og vente på et svar. Dette kan redusere sidenes belastningstid dramatisk, og kan også gi deg enda mer utsatt for et Angrep på tjenesten. Heldigvis kan vi jobbe rundt alt dette ved å implementere en cache.
Selv om den grunnleggende strukturen i kontrollens kode forblir etter implementering av caching, er det for mange små endringer i listen, så jeg vil gi deg full kilde og deretter - som vanlig - forklare hvordan det fungerer.
