Share
In diesem Lernprogramm gehe ich Ihnen durch, wie Sie ein Twitter-Widget für ASP.NET in Form eines wiederverwendbaren Serversteuerelements schreiben. Dazu gehören nützliche Dinge wie das automatische Umwandeln von URLs in Links und das Zwischenspeichern, um das Laden der Seiten zu beschleunigen.
Um diesem Lernprogramm zu folgen, benötigen Sie lediglich Visual Studio (Sie können MonoDevelop verwenden, wenn Sie nicht unter Windows sind, es gibt jedoch keine Garantien.) Wenn Sie nicht für die Vollversion von Visual Studio Geld sparen möchten, müssen Sie dies tun kann die kostenlose Express Edition nutzen.
Sie benötigen außerdem Kenntnisse in C # 3.0, da in diesem Lernprogramm einige der neueren Funktionen der Sprache verwendet werden, z. B. Lambda-Ausdrücke und var Stichwort.
ASP.NET enthält eine praktische Funktion, die als Serversteuerelemente bezeichnet wird. Hierbei handelt es sich um benutzerdefinierte Tags, die Entwicklern helfen sollen, ihren Code zu strukturieren. Wenn eine Seite mit einem Serversteuerelement angefordert wird, führt die ASP.NET-Laufzeitumgebung die Machen() Methode und enthält die Ausgabe auf der letzten Seite.
Wenn Sie eine neue Webanwendung in Visual Studio erstellt haben, klicken Sie mit der rechten Maustaste in den Projektmappen-Explorer und fügen Sie der Lösung ein neues Element hinzu. Wählen Sie ASP.NET Server Control aus, und geben Sie ihm einen Namen. Hier habe ich es angerufen Twidget.cs, aber Sie können es gerne nennen, wie Sie möchten. Fügen Sie den folgenden Code ein, und machen Sie sich keine Sorgen, wenn alles ein bisschen fremd aussieht - ich erkläre das alles in Kürze.
Accentsconagua
mit System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.Script.Serialization; mit System.Net; Namespace WebApplication1 public class Twidget: Control öffentliche Zeichenfolge Account get; einstellen; public int Tweets get; einstellen; protected überschreibt void Render (HtmlTextWriter-Writer) writer.Write ("Dies ist ungefähr so grundlegend, wie Sie für ein Twitter-Widget erhalten können. So funktioniert das:
Wenn ein Benutzer eine Seite mit diesem Steuerelement anfordert, wird die Machen() Methode wird mit a ausgeführt HtmlTextWriter als Parameter übergeben. Es schreibt das aus tag und öffnet eine Schleife, die jeden Tweet als Listenelement ausgibt. Die Magie hier geschieht im GetTweets () Methode. Beachten Sie, wie wir das verwenden Nehmen() Erweiterungsmethode, um sicherzustellen, dass nur die Anzahl der Tweets gedruckt wird, nach denen gefragt wird.
Sobald die Ausführung an den GetTweets () Methode richten wir ein Liste> Zeichenfolge< unsere Tweets halten und a JavaScriptSerializer um den JSON von den Twitter-API-Servern zu analysieren. Die Anweisung in den Zeilen 31 - 34 (zur besseren Lesbarkeit aufgeteilt) ruft die Benutzerzeitleiste im JSON-Format ab und deserialisiert dann in .NET-Typen, mit denen wir arbeiten können. In Zeile 36 durchlaufen wir alle Tweets und fügen sie nacheinander der Tweet-Liste hinzu. Wir müssen manuell gießen x ["text"] zu einem Schnur weil wir es als deserialisiert haben Objekt. Wir mussten dies tun, da der von der Twitter-API zurückgegebene JSON ein Smorgasboard verschiedener Typen verwendet - was für JavaScript in Ordnung ist, aber mit C # etwas kompliziert ist..
Jetzt haben wir den Code für unser Twitter-Widget. lass es uns benutzen! Öffne dein Default.aspx (oder auf welcher Seite Sie dies verwenden möchten) und fügen Sie den folgenden Code unmittelbar nach dem ein <%@ Page %> Direktive:
<%@ Register TagPrefix="widgets" Namespace="WebApplication1" Assembly="WebApplication1" %>
Fühlen Sie sich frei, das zu ändern TagPrefix was auch immer Sie möchten, aber stellen Sie sicher, dass die Namensraum Das Attribut ist korrekt auf den Namespace gesetzt, in dem Sie den Widgetcode platziert haben, und stellt sicher, dass das Versammlung Attribut wird auf den Namen Ihrer Webanwendung gesetzt (in unserem Fall, Webanwendung1).
Wenn Sie das richtige Tag-Präfix registriert haben (und Sie müssen dies für jede Seite tun, auf der Sie das Steuerelement verwenden möchten), können Sie es verwenden. Fügen Sie den folgenden Code an einer beliebigen Stelle in Ihre Seite ein, und ändern Sie die Attribute erneut in das gewünschte Fenster:
Wenn Sie alles richtig gemacht haben, sollte eine ähnliche Seite angezeigt werden, wenn Sie Ihre Webanwendung ausführen:
Sie müssen zugeben, die Kontrolle, die wir im Moment haben, ist ziemlich rudimentär. Es muss jedoch nicht sein, also lassen Sie es uns etwas einfallen, indem Sie URLs in nette, anklickbare Links für Ihre Besucher umwandeln.
Finden Sie die foreach-Schleife im Machen() Methode und verschrottet es komplett. Ersetzen Sie es mit diesem:
// Sie müssen diese using Direktive oben in der Datei hinzufügen: using System.Text.RegularExpressions; foreach (var t in GetTweets (). Take (Tweets)) string s = Regex.Replace (HttpUtility.HtmlEncode (t), @ "[az] +: // [^ \ s] +", x => " "+ x.Value +" ", RegexOptions.Compiled | RegexOptions.IgnoreCase); writer.Write ("Es ist alles so ziemlich derselbe Code, abgesehen von dem riesigen Aufruf an Regex.Replace () in Zeile 6. Ich erkläre, was das macht.
Der erste Parameter ist die Eingabe oder die Zeichenfolge, mit der Regex arbeitet. In diesem Fall ist es nur der Tweet-Text, nachdem er durchlaufen wurde HttpUtility.HtmlEncode () So fallen wir keinem bösartigen XSS-Angriff zum Opfer. Die Eingabe wird dann mit dem zweiten Parameter abgeglichen, bei dem es sich um einen regulären Ausdruck handelt, der mit einer URL übereinstimmt.
Der dritte Parameter ist, wo es ein wenig beteiligt ist. Dies ist ein Lambda-Ausdruck, ein neues Feature in C # 3. Es ist im Grunde eine sehr kurze Methode, eine Methode wie diese zu schreiben:
public static string SomeFunction (Match x) return "" + x.Value + "";
Alles, was es tut, ist, die URL mit einem Tag, von dem alle Anführungszeichen in der URL durch die HTML-Entität ersetzt werden ", was hilft, XSS-Angriffe zu verhindern. Der vierte und letzte Parameter ist nur ein ODERein Paar Flaggen, die das Verhalten unseres Regex anpassen.
Die Ausgabe des Steuerelements nach dieser Einstellung ähnelt der Abbildung unten.
Es gibt ein großes Problem mit dem Code, den ich Ihnen oben gegeben habe, und zwar, dass die Antwort der Twitter-API nicht zwischengespeichert wird. Dies bedeutet, dass der Server jedes Mal, wenn jemand Ihre Seite lädt, eine Anfrage an die Twitter-API stellen und auf eine Antwort warten muss. Dies kann die Ladezeit Ihrer Seite drastisch verlangsamen und Sie sogar anfälliger für einen Denial of Service-Angriff machen. Glücklicherweise können wir all dies umgehen, indem wir einen Cache implementieren.
Obwohl der grundlegende Code des Steuerelements nach der Implementierung des Zwischenspeichers erhalten bleibt, gibt es zu viele kleine Änderungen an der Liste. Ich gebe Ihnen die vollständige Quelle und erkläre dann wie üblich, wie es funktioniert.
