Einführung in ASP.NET Webseiten – Anzeigen von Daten

von Tom FitzMacken

In diesem Lernprogramm erfahren Sie, wie Sie eine Datenbank in WebMatrix erstellen und wie Sie Datenbankdaten auf einer Seite anzeigen, wenn Sie ASP.NET Webseiten (Razor) verwenden. Es wird davon ausgegangen, dass Sie die Reihe über einführung in ASP.NET Web Pages Programming abgeschlossen haben.

Was Sie lernen:

• Verwenden von WebMatrix-Tools zum Erstellen einer Datenbank und Datenbanktabellen
• Verwenden von WebMatrix-Tools zum Hinzufügen von Daten zu einer Datenbank
• So zeigen Sie Daten aus der Datenbank auf einer Seite an.
• Ausführen von SQL-Befehlen in ASP.NET Webseiten
• So passen Sie das WebGrid Hilfsprogramm an, um die Datenanzeige zu ändern und Paging und Sortierung hinzuzufügen.

Behandelte Features/Technologien:

• WebMatrix-Datenbanktools.
• WebGrid Helfer.

Was Sie erstellen werden

Im vorherigen Lernprogramm wurden Sie mit ASP.NET Webseiten (CSHTML-Dateien ), den Grundlagen der Razor-Syntax und den Helfern eingeführt. In diesem Lernprogramm beginnen Sie mit dem Erstellen der tatsächlichen Webanwendung, die Sie für den Rest der Reihe verwenden. Die App ist eine einfache Filmanwendung, mit der Sie Informationen zu Filmen anzeigen, hinzufügen, ändern und löschen können.

Wenn Sie mit diesem Tutorial fertig sind, können Sie einen Filmeintrag anzeigen, der aussieht wie diese Seite:

Zunächst müssen Sie jedoch eine Datenbank erstellen.

Eine sehr kurze Einführung in Datenbanken

Dieses Lernprogramm enthält nur die kürzeste Einführung in Datenbanken. Wenn Sie über Datenbankerfahrung verfügen, können Sie diesen kurzen Abschnitt überspringen.

Eine Datenbank enthält eine oder mehrere Tabellen, die Informationen enthalten, z. B. Tabellen für Kunden, Bestellungen und Lieferanten oder für Schüler, Lehrer, Klassen und Noten. Strukturell ist eine Datenbanktabelle wie eine Kalkulationstabelle. Stellen Sie sich ein typisches Adressbuch vor. Für jeden Eintrag im Adressbuch (d. h. für jede Person) gibt es mehrere Informationen wie Vorname, Nachname, Adresse, E-Mail-Adresse und Telefonnummer.

(Zeilen werden manchmal als Datensätze bezeichnet, und Spalten werden manchmal als Felder bezeichnet.)

Bei den meisten Datenbanktabellen muss die Tabelle über eine Spalte verfügen, die einen eindeutigen Wert enthält, z. B. eine Kundennummer, eine Kontonummer usw. Dieser Wert wird als Primärschlüssel der Tabelle bezeichnet, und Sie verwenden ihn, um jede Zeile in der Tabelle zu identifizieren. Im Beispiel ist die ID-Spalte der Primärschlüssel für das im vorherigen Beispiel gezeigte Adressbuch.

Ein Großteil der Arbeit, die Sie in Webanwendungen ausführen, besteht darin, Informationen aus der Datenbank zu lesen und auf einer Seite anzuzeigen. Sie sammeln häufig Auch Informationen von Benutzern und fügen sie einer Datenbank hinzu, oder Sie ändern Datensätze, die sich bereits in der Datenbank befinden. (Wir behandeln alle diese Vorgänge im Verlauf dieses Lernprogramms.)

Datenbankarbeit kann enorm komplex sein und kann spezielle Kenntnisse erfordern. Für diese Lektion müssen Sie jedoch nur grundlegende Konzepte verstehen, die im Verlauf alle erläutert werden.

Erstellen einer Datenbank

WebMatrix enthält Tools, die das Erstellen einer Datenbank und das Erstellen von Tabellen in der Datenbank vereinfachen. (Die Struktur einer Datenbank wird als Schema der Datenbank bezeichnet.) Für diesen Lernprogrammsatz erstellen Sie eine Datenbank, die nur eine Tabelle enthält – Filme.

Öffnen Sie WebMatrix, falls noch nicht geschehen, und öffnen Sie die WebPagesMovies-Website, die Sie im vorherigen Lernprogramm erstellt haben.

Klicken Sie im linken Bereich auf den Datenbankarbeitsbereich .

Das Menüband ändert sich, um datenbankbezogene Aufgaben anzuzeigen. Klicken Sie im Menüband auf "Neue Datenbank".

WebMatrix erstellt eine SQL Server CE-Datenbank (eine SDF-Datei ), die denselben Namen wie Ihre Website hat – WebPagesMovies.sdf. (Sie werden dies hier nicht tun, aber Sie können die Datei in alles umbenennen, was Ihnen gefällt, sofern sie über eine SDF-Erweiterung verfügt.)

Erstellen einer Tabelle

Klicken Sie im Menüband auf "Neue Tabelle". WebMatrix öffnet den Tabellen-Designer auf einer neuen Registerkarte. (Wenn die Option "Neue Tabelle" nicht verfügbar ist, stellen Sie sicher, dass die neue Datenbank in der Strukturansicht auf der linken Seite ausgewählt ist.)

Geben Sie oben im Textfeld (in dem das Wasserzeichen "Tabellenname eingeben" steht) "Filme" ein.

Im Bereich unterhalb des Tabellennamens definieren Sie einzelne Spalten. Für die Tabelle "Filme " in diesem Lernprogramm erstellen Sie nur einige Spalten: ID, Titel, Genre und Jahr.

Geben Sie im Feld "Name " "ID" ein. Wenn Sie hier einen Wert eingeben, werden alle Steuerelemente für die neue Spalte aktiviert.

Wechseln Sie zur Liste " Datentyp ", und wählen Sie "int" aus. Dieser Wert gibt an, dass die ID-Spalte ganzzahlige Daten (Zahlen) enthält.

Drücken Sie die TAB-TASTE, um das Feld "Standardwert" zu überspringen (d. h. lassen Sie es leer). Drücken Sie die TAB-TASTE, um das Kontrollkästchen "Primärschlüssel" auszuwählen. Mit dieser Option wird der Datenbank mitgeteilt, dass die ID-Spalte die Daten enthält, die einzelne Zeilen identifizieren. (Dies heißt, jede Zeile hat einen eindeutigen Wert in der ID-Spalte, mit der Sie diese Zeile suchen können.)

Wählen Sie die Option "Ist Identität" aus. Mit dieser Option wird der Datenbank mitgeteilt, dass für jede neue Zeile automatisch die nächste sequenzielle Zahl generiert werden soll. (Die Is Identity-Option funktioniert nur, wenn Sie auch die Option "Primärschlüssel ist" ausgewählt haben.)

Klicken Sie in die nächste Rasterzeile, oder drücken Sie zweimal die TAB-TASTE, um die aktuelle Zeile abzuschließen. Mit beiden Gesten wird die aktuelle Zeile gespeichert, und die nächste wird gestartet. Beachten Sie, dass in der Spalte "Standardwert " jetzt "Null" angezeigt wird. (Null ist gewissermaßen der Standardwert für den Standardwert.)

Wenn Sie die neue ID-Spalte definiert haben, sieht der Designer wie in der folgenden Abbildung aus:

Klicken Sie zum Erstellen der nächsten Spalte in das Feld in der Spalte "Name ". Geben Sie "Titel" für die Spalte ein, und wählen Sie dann "nvarchar " für den Datentypwert aus. Der "var"-Teil von nvarchar teilt der Datenbank mit, dass die Daten für diese Spalte eine Zeichenfolge sind, deren Größe von Datensatz zu Datensatz variieren kann. (Das Präfix "n" stellt "national" dar, was angibt, dass das Feld Zeichendaten für ein beliebiges Alphabet- oder Schreibsystem enthalten kann, d. h., das Feld enthält Unicode-Daten.)

Wenn Sie "nvarchar" auswählen, wird ein weiteres Feld angezeigt, in dem Sie die maximale Länge für das Feld eingeben können. Geben Sie "50" ein, wobei davon ausgegangen wird, dass kein Filmtitel, mit dem Sie in diesem Lernprogramm arbeiten, länger als 50 Zeichen sind.

Überspringen Sie den Standardwert , und deaktivieren Sie die Option "Null zulassen ". Sie möchten nicht, dass in der Datenbank Filme eingegeben werden können, die keinen Titel haben.

Wenn Sie fertig sind und zur nächsten Zeile wechseln, sieht der Designer wie in der folgenden Abbildung aus:

Wiederholen Sie diese Schritte, um eine Spalte mit dem Namen "Genre" zu erstellen, mit Ausnahme der Länge, die nur auf 30 festgelegt ist.

Erstellen Sie eine weitere Spalte mit dem Namen "Jahr". Wählen Sie für den Datentyp nchar (nicht nvarchar) aus, und legen Sie die Länge auf 4 fest. Für das Jahr verwenden Sie eine vierstellige Zahl wie "1995" oder "2010", sodass Sie keine Spalte mit variabler Größe benötigen.

So sieht das fertige Design aus:

Drücken Sie STRG+S, oder klicken Sie auf der Symbolleiste für den Schnellzugriff auf die Schaltfläche " Speichern ". Schließen Sie den Datenbank-Designer, indem Sie die Registerkarte schließen.

Hinzufügen einiger Beispieldaten

Später in dieser Lernprogrammreihe erstellen Sie eine Seite, auf der Sie neue Filme in ein Formular eingeben können. Jetzt können Sie jedoch einige Beispieldaten hinzufügen, die Sie dann auf einer Seite anzeigen können.

Beachten Sie im Datenbankarbeitsbereich in WebMatrix, dass eine Struktur vorhanden ist, in der die zuvor erstellte SDF-Datei angezeigt wird. Öffnen Sie den Knoten für die neue SDF-Datei , und öffnen Sie dann den Knoten "Tabellen ".

Klicken Sie mit der rechten Maustaste auf den Knoten "Filme ", und wählen Sie dann "Daten" aus. WebMatrix öffnet ein Raster, in dem Sie Daten für die Tabelle "Filme " eingeben können:

Klicken Sie auf die Spalte "Titel ", und geben Sie "When Harry Met Sally" ein. Wechseln Sie zur Spalte "Genre " (Sie können die TAB-TASTE verwenden), und geben Sie "Romantische Komödie" ein. Wechseln Sie zur Spalte "Jahr ", und geben Sie "1989" ein:

Drücken Sie die EINGABETASTE, und WebMatrix speichert den neuen Film. Beachten Sie, dass die ID-Spalte ausgefüllt wurde.

Geben Sie einen anderen Film ein (z. B. "Mit Wind gegangen", "Drama", "1939"). Die ID-Spalte wird erneut ausgefüllt:

Geben Sie einen dritten Film ein (z. B. "Ghostbusters", "Comedy"). Lassen Sie als Experiment die Spalte "Jahr " leer, und drücken Sie dann die EINGABETASTE. Da Sie die Option "Null zulassen " nicht ausgewählt haben, zeigt die Datenbank einen Fehler an:

Klicken Sie auf "OK ", um zurückzugeben und den Eintrag zu korrigieren (das Jahr für "Ghostbusters" ist 1984), und drücken Sie dann die EINGABETASTE.

Wählen Sie mehrere Filme aus, bis Sie etwa 8 Filme haben. (Wenn Sie 8 eingeben, ist es einfacher, später mit paging zu arbeiten. Aber wenn das zu viele ist, geben Sie jetzt nur ein paar ein.) Die tatsächlichen Daten spielen keine Rolle.

Wenn Sie alle Filme ohne Fehler eingegeben haben, sind die ID-Werte sequenziell. Wenn Sie versucht haben, einen unvollständigen Filmdatensatz zu speichern, sind die ID-Nummern möglicherweise nicht sequenziell. Wenn ja, ist das in Ordnung. Die Zahlen haben keine inhärente Bedeutung, und das einzige, was wichtig ist, ist, dass sie in der Tabelle "Filme " einzigartig sind.

Schließen Sie die Registerkarte, die den Datenbank-Designer enthält.

Jetzt können Sie die Anzeige dieser Daten auf einer Webseite aktivieren.

Anzeigen von Daten auf einer Seite mithilfe des WebGrid-Hilfsprogramms

Um Daten auf einer Seite anzuzeigen, verwenden Sie das WebGrid Hilfsprogramm. Dieses Hilfsprogramm erzeugt eine Anzeige in einem Raster oder einer Tabelle (Zeilen und Spalten). Wie Sie sehen, können Sie das Raster mit Formatierung und anderen Features verfeinern.

Um das Raster auszuführen, müssen Sie einige Codezeilen schreiben. Diese wenigen Zeilen dienen als Muster für fast alle Datenzugriffe, die Sie in diesem Lernprogramm ausführen.

Klicken Sie im linken Bereich in WebMatrix auf den Arbeitsbereich "Dateien ".

Die von Ihnen erstellte neue Datenbank befindet sich im Ordner App_Data . Wenn der Ordner noch nicht vorhanden war, hat WebMatrix ihn für ihre neue Datenbank erstellt. (Möglicherweise ist der Ordner vorhanden, wenn Sie zuvor Hilfsprogramme installiert haben.)

Wählen Sie in der Strukturansicht den Stamm der Website aus. Sie müssen den Stamm der Website auswählen; andernfalls wird die neue Datei möglicherweise dem ordner App_Data hinzugefügt.

Klicken Sie im Menüband auf "Neu". Wählen Sie im Feld "Dateityp auswählen" die Option "CSHTML" aus.

Benennen Sie im Feld "Name " die neue Seite "Movies.cshtml":

Klicken Sie auf die Schaltfläche OK . WebMatrix öffnet eine neue Datei mit einigen Grundelementen darin. Zunächst schreiben Sie Code, um die Daten aus der Datenbank abzurufen. Anschließend fügen Sie der Seite Markup hinzu, um die Daten tatsächlich anzuzeigen.

Schreiben des Datenabfragecodes

Geben Sie oben auf der Seite zwischen den Zeichen @{ und } den folgenden Code ein. (Stellen Sie sicher, dass Sie diesen Code zwischen den öffnenden und schließenden geschweiften Klammern eingeben.)

var db = Database.Open("WebPagesMovies");
var selectedData = db.Query("SELECT * FROM Movies");
var grid = new WebGrid(source: selectedData);

Die erste Zeile öffnet die Datenbank, die Sie zuvor erstellt haben. Dies ist immer der erste Schritt, bevor Sie etwas mit der Datenbank ausführen. Sie weisen den Database.Open Methodennamen der zu öffnenden Datenbank an. Beachten Sie, dass Sie .sdf nicht in den Namen einschließen. Die Open Methode geht davon aus, dass sie nach einer SDF-Datei (d. h. WebPagesMovies.sdf) sucht und dass sich die SDF-Datei im ordner App_Data befindet. (Weiter oben haben wir festgestellt, dass der ordner App_Data reserviert ist. Dieses Szenario ist eine der Stellen, an denen ASP.NET Annahmen zu diesem Namen treffen.)

Wenn die Datenbank geöffnet wird, wird ein Verweis darauf in die Variable mit dem Namen dbeingefügt. (Dies könnte beliebig benannt werden.) Die db-Variable ist das Mittel, mit dem Sie schließlich mit der Datenbank interagieren.

Die zweite Zeile ruft die Datenbankdaten tatsächlich mithilfe der Query Methode ab. Beachten Sie, wie dieser Code funktioniert: Die db Variable weist einen Verweis auf die geöffnete Datenbank auf, und Sie rufen die Query Methode mithilfe der db Variablen (db.Query) auf.

Die Abfrage selbst ist eine SQL-Anweisung Select . (Ein wenig Hintergrund zu SQL finden Sie weiter unten in der Erläuterung.) Identifiziert in der Anweisung Movies die abzufragende Tabelle. Das * Zeichen gibt an, dass die Abfrage alle Spalten aus der Tabelle zurückgeben soll. (Sie können spalten auch einzeln auflisten, getrennt durch Kommas.)

Die Ergebnisse der Abfrage( falls vorhanden) werden zurückgegeben und in der selectedData Variablen verfügbar gemacht. Auch hier könnte die Variable einen Namen haben.

Schließlich teilt die dritte Zeile ASP.NET mit, dass Sie eine Instanz des WebGrid Hilfsprogramms verwenden möchten. Sie erstellen (instanziieren) das Hilfsobjekt mithilfe des new Schlüsselworts und übergeben es über die selectedData Variable an die Abfrageergebnisse. Das neue WebGrid Objekt zusammen mit den Ergebnissen der Datenbankabfrage wird in der grid Variablen verfügbar gemacht. Sie benötigen dieses Ergebnis in einem Moment, um die Daten auf der Seite tatsächlich anzuzeigen.

In dieser Phase wurde die Datenbank geöffnet, Sie haben die gewünschten Daten erhalten, und Sie haben den WebGrid Helfer mit diesen Daten vorbereitet. Als Nächstes erstellen Sie das Markup auf der Seite.

Hinzufügen von Markup zum Anzeigen der Daten

Setzen Sie im <head>-Element den Inhalt des <title>-Elements auf "Movies".

<head>
    <meta charset="utf-8" />
    <title>Movies</title>
</head>

Fügen Sie Folgendes im <body>-Element der Seite hinzu:

<h1>Movies</h1>
<div>
    @grid.GetHtml()
</div>

Das ist alles. Die grid Variable ist der Wert, den Sie beim Erstellen des WebGrid Objekts zuvor im Code erstellt haben.

Klicken Sie in der WebMatrix-Strukturansicht mit der rechten Maustaste auf die Seite, und wählen Sie "Im Browser starten" aus. Sie werden etwas wie diese Seite sehen:

Klicken Sie auf einen Spaltenüberschriftenlink, um nach dieser Spalte zu sortieren. Das Klicken auf eine Überschrift ist ein Feature, das in das WebGrid-Hilfsprogramm integriert ist.

Die GetHtml Methode generiert, wie der Name sagt, Markup, das die Daten anzeigt. Standardmäßig generiert die GetHtml Methode ein HTML-Element <table> . (Wenn Sie möchten, können Sie das Rendering überprüfen, indem Sie sich die Quelle der Seite im Browser ansehen.)

Ändern des Erscheinungsbilds des Rasters

Die Verwendung des WebGrid Helfers, wie gerade geschehen, ist einfach, aber die resultierende Anzeige ist schlicht. Das WebGrid Hilfsprogramm verfügt über alle Arten von Optionen, mit denen Sie steuern können, wie die Daten angezeigt werden. Es gibt viel zu viele, um in diesem Lernprogramm zu erkunden, aber dieser Abschnitt gibt Ihnen eine Vorstellung von einigen dieser Optionen. Einige zusätzliche Optionen werden in späteren Lernprogrammen dieser Reihe behandelt.

Angeben einzelner anzuzeigender Spalten

Zunächst können Sie angeben, dass nur bestimmte Spalten angezeigt werden sollen. Wie Sie sehen, zeigt das Raster standardmäßig alle vier Spalten aus der Tabelle "Filme " an.

Ersetzen Sie in der Datei "Movies.cshtml " das @grid.GetHtml() soeben hinzugefügte Markup durch Folgendes:

@grid.GetHtml(
    columns: grid.Columns(
        grid.Column("Title"),
        grid.Column("Genre"),
        grid.Column("Year")
    )
)

Um dem Hilfsprogramm mitzuteilen, welche Spalten angezeigt werden sollen, fügen Sie einen columns Parameter für die GetHtml Methode ein und übergeben eine Sammlung von Spalten. In der Sammlung geben Sie jede einzuschließende Spalte an. Sie geben eine einzelne Spalte an, die angezeigt werden soll, indem Sie ein grid.Column Objekt einschließen und den Namen der gewünschten Datenspalte übergeben. (Diese Spalten müssen in die SQL-Abfrageergebnisse eingeschlossen werden. Der WebGrid Hilfsprogramm kann keine Spalten anzeigen, die nicht von der Abfrage zurückgegeben wurden.)

Starten Sie die Seite "Movies.cshtml" im Browser erneut, und dieses Mal wird eine Anzeige wie die folgende angezeigt (beachten Sie, dass keine ID-Spalte angezeigt wird):

Ändern des Erscheinungsbilds des Rasters

Es gibt mehrere weitere Optionen zum Anzeigen von Spalten, von denen einige in späteren Tutorials in dieser Reihe untersucht werden. In diesem Abschnitt erfahren Sie, wie Sie das Raster als Ganzes formatieren können.

Fügen Sie im <head> Abschnitt der Seite, unmittelbar vor dem schließenden </head>-Tag, das folgende <style>-Element hinzu:

<style type="text/css">
  .grid { margin: 4px; border-collapse: collapse; width: 600px; }
  .grid th, .grid td { border: 1px solid #C0C0C0; padding: 5px; }
  .head { background-color: #E8E8E8; font-weight: bold; color: #FFF; }
  .alt { background-color: #E8E8E8; color: #000; }
</style>

Dieses CSS-Markup definiert Klassen namens grid, headusw. Sie können diese Formatvorlagendefinitionen auch in eine separate .css Datei einfügen und diese mit der Seite verknüpfen. (In der Tat tun Sie dies später in diesem Lernprogramm.) Um die Dinge für dieses Lernprogramm einfach zu machen, befinden sie sich auf derselben Seite, auf der die Daten angezeigt werden.

Jetzt können Sie das WebGrid Hilfsprogramm verwenden, um diese Stilklassen zu nutzen. Das Hilfsprogramm verfügt für genau diesen Zweck über eine Reihe von Eigenschaften (z. B. tableStyle) – Sie weisen ihnen einen CSS-Klassennamen zu, und dieser Klassenname wird als Teil des Markups gerendert, das vom Hilfsprogramm gerendert wird.

Ändern Sie das grid.GetHtml Markup so, dass es jetzt wie dieser Code aussieht:

@grid.GetHtml(
    tableStyle: "grid",
    headerStyle: "head",
    alternatingRowStyle: "alt",
    columns: grid.Columns(
        grid.Column("Title"),
        grid.Column("Genre"),
        grid.Column("Year")
    )
)

Neu ist hier, dass Sie die Parameter tableStyle, headerStyle und alternatingRowStyle der Methode GetHtml hinzugefügt haben. Diese Parameter wurden auf die Namen der CSS-Formatvorlagen festgelegt, die Sie vor einem Moment hinzugefügt haben.

Führen Sie die Seite aus, und dieses Mal wird ein Raster angezeigt, das viel weniger einfach aussieht als zuvor:

Um zu sehen, was die GetHtml Methode generiert hat, können Sie sich die Quelle der Seite im Browser ansehen. Wir werden hier nicht ins Detail gehen, aber der wichtige Punkt ist, dass Sie durch Angeben von Parametern wie tableStyle dem Raster erlauben, HTML-Tags wie die folgenden zu generieren:

<table class="grid">

Das <table> Tag hat ein class Attribut hinzugefügt, das auf eine der CSS-Regeln verweist, die Sie zuvor hinzugefügt haben. Dieser Code zeigt Ihnen das grundlegende Muster – mit verschiedenen Parametern für die GetHtml Methode können Sie auf CSS-Klassen verweisen, die die Methode dann zusammen mit dem Markup generiert. Was Sie mit den CSS-Klassen tun, liegt bei Ihnen.

Hinzufügen von Paging

Als letzte Aufgabe in diesem Tutorial fügen Sie eine Seitennummerierung zu dem Raster hinzu. Im Moment ist es kein Problem, alle Ihre Filme gleichzeitig anzuzeigen. Aber wenn Sie Hunderte von Filmen hinzugefügt haben, würde die Seitenanzeige lang werden.

Ändern Sie im Seitencode die Zeile, die das WebGrid Objekt erstellt, in den folgenden Code:

var grid = new WebGrid(source: selectedData, rowsPerPage: 3);

Der einzige Unterschied von vorher besteht darin, dass Sie einen rowsPerPage Parameter hinzugefügt haben, der auf 3 festgelegt ist.

Laden Sie die Seite. Im Raster werden jeweils drei Zeilen sowie Navigationslinks angezeigt, mit denen Sie die Filme in Ihrer Datenbank durchblättern können:

Nächster Schritt

Im nächsten Lernprogramm erfahren Sie, wie Sie Razor- und C#-Code verwenden, um Benutzereingaben in einem Formular zu erhalten. Sie fügen der Seite "Filme" ein Suchfeld hinzu, damit Sie Filme nach Titel oder Genre finden können.

Vollständige Liste für die Filmseite

@{
    var db = Database.Open("WebPagesMovies");
    var selectedData = db.Query("SELECT * FROM Movies");
    var grid = new WebGrid(source: selectedData, rowsPerPage: 3);
}

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Movies</title>
        <style type="text/css">
          .grid { margin: 4px; border-collapse: collapse; width: 600px; }
          .grid th, .grid td { border: 1px solid #C0C0C0; padding: 5px; }
          .head { background-color: #E8E8E8; font-weight: bold; color: #FFF; }
          .alt { background-color: #E8E8E8; color: #000; }
        </style>
    </head>
    <body>
        <h1>Movies</h1>
        <div>
            @grid.GetHtml(
                tableStyle: "grid",
                headerStyle: "head",
                alternatingRowStyle: "alt",
                columns: grid.Columns(
                    grid.Column("Title"),
                    grid.Column("Genre"),
                    grid.Column("Year")
                )
            )
        </div>
    </body>
</html>

Zusätzliche Ressourcen

• Einführung in ASP.NET Webprogrammierung mithilfe der Razor-Syntax