C# Statische HTML Seite erstellen

[Hayda Ministral]

Hallo Welt,

als Spielerei will ich mir eine statische HTML-Seite, im wesentlichen eine Tabelle gefüllt mit aktuellen Daten, per Programm erstellen. Im ersten Wurf mache ich das in dem ich einfach die HTML-Tags als Text schreibe, Wenn ich nun aber anfangen will die Sache etwas aufzuhübschen brauche ich css, das lässt natürlich die Menge der writeLine Anweisungen explodieren.

Ok, ich habe also den Weg gefunden wie man es nicht macht. Aber wie macht man das? Hat jemand ein paar Stichworte bzw. Links zu Konzepten? Ich will natürlich auch kein riesengroßes (Code-)Fass dafür aufmachen.

 

[burglar225]

C# nutzt zumindest für Web Services Razor Pages.
Du hast jetzt zwar keinen Web Service, allerdings würde ich mal sehr schwer davon ausgehen, dass man die Library dazu auch für solche Zwecke einsetzbar ist. Daher mal in die Richtung recherchieren.
Ansonsten ist das Zauberwort an der Stelle Template Engine. Das ist genau das, was du suchst und gibt es zu Hauf.

 

[Piktogramm]

CSS gehört nach Möglichkeit in eine extra Datei oder als Block ins html-File. Wenn deine Seite statisch ist, kann das css statisch bleiben und dein C# Programm muss es gar nicht anfassen. Womit man gar nicht erst anfangen sollte ist, CSS inline zu verwenden. Selbst das Einfärben von Feldern je nach Inhalt erlaubt CSS:
https://support.awesome-table.com/h...he-style-of-each-row-depending-on-the-content

Solltest du mehr Dynamik brauchen, dann lass die Rechenarbeit für den anzeigenden Clienten und nutze clientseitig JavaScript anstatt den Server zu qählen.

Zur Menge der writeLine Aufrufe, wieso sollte das mehr werden? String zusammensetzen und nur in sinnvollen Einheiten den String schreiben. Für alles unter 10MB wäre ich versucht, nur einmal zu schreiben.

 

[Hayda Ministral]

CSS gehört nach Möglichkeit in eine extra Datei oder als Block ins html-File. Wenn deine Seite statisch ist, kann das css statisch bleiben und dein C# Programm muss es gar nicht anfassen.

DAS klingt richtig gut. Ich hatte diesen Gedanken auch schon, habe es aber nicht geschafft ein einfaches Beispiel dafür zu finden wie ich in einer statischen HTML ein externes css File einbinde. Die Beispiele die ich gefunden habe wollen das File vom Server holen, ich bin an der Übersetzung gescheitert.
Original:

<link href="style.css" type="text/css" media="screen" />

Mein Versuch: (/home/hayda/style.css ist das File)

<link href="file:///home/hayda/style.css" type="text/css"  />

Funktioniert nicht. Vermutlich ein einfacher Fehler, aber ich bin bisher nicht drauf gekommen wie es geht.

 

[BeBur]

Browser limitieren aus Sicherheitsgründen das nachladen von lokal (d.h. auf deinem Rechner) vorliegenden Daten / Dateien. Das könnte hier schon das Problem sein, wird es aber spätestens, wenn du Bilder oder andere assets laden willst. Ist glaube ich Browser abhängig. Spontanes Googlen ergibt Stichworte wie "allow-file-access-from-files" bei Chrome oder "file_unique_origin". Bin mir fast sicher, dass es da mindestens eine weitere Einstellung bei firefox gibt.

Ansonsten, wie andere schon gesagt haben: Bau dir das statische html/css mit einem html-editor und liefere dann einfach die Datei aus. HTML-Dateien 'baut' man sich nicht im Code, sondern man trennt (unter anderem) Code und Präsentation (= HTML). Andere schrieben auch schon, wenn du dynamischen Inhalt willst, dann solltest du auch mMn direkt auf eine Template Engine, ein Web-Framework o.ä. wechseln.

Jedenfalls willst du womöglich aus oben beschriebenen Gründen auch für dein kleines Projekt einen kleinen lokalen Web-Server aufsetzen, welcher dann die Seite über localhost:<port> ausliefert.

 

[r0b0t]

Wenn ich eine Webseite im Browser mit "Seite speichern unter..." auf meine lokale Platte speichere, legt der Browser eine Seite "pagename.html" und ein Unterverzeichnis "pagename-Dateien" an, in letzterem liegen dann zum Beispiel *.css Dateien. In pagename.html wird die Referenz auf href="pagename-Dateien/irgendwas.css" gesetzt. Das funktioniert.

 

[Hayda Ministral]

Ich hab's nun, dank eurer Denkanstöße.
Mein Fehler war dass ich zu kompliziert gedacht habe. Die einfache Beschreibung von @r0b0t hat den Knoten gelöst.

test.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>CSS-Test</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="minimal.css" />
  </head>
</html>
<body>
  Hello world
</body>

minimal.css:

    * {   
        box-sizing: border-box;
    }
   
    html {
      background: #cba2b3;
    }
   
    body {
      margin: 0 auto;
      padding: 1%;
      max-width: 75em;
      font-family: verdana, arial, sans-serif ;
      font-size: 0.8em;
      border: 1px solid #aaa;
      border-top: 0;
      background: #bdcab3;
    }

Beide im selben Verzeichnis abgelegt -> funktioniert

@BeBur : Ja, ein Webserver wäre da hilfreich. Ihn dafür aufzusetzen (inklusive Sicherheitskonzept, inklusive Regelung wer ihn wartet,...) hieße aber mit Kanonen auf Spatzen zu schießen.

PS: die CSS habe ich mir von selfhtml abgekupfert und gekürzt

 

[BeBur]

@BeBur : Ja, ein Webserver wäre da hilfreich. Ihn dafür aufzusetzen (inklusive Sicherheitskonzept, inklusive Regelung wer ihn wartet,...) hieße aber mit Kanonen auf Spatzen zu schießen

Da hast du mich falsch verstanden. Man setzt für die Entwicklung üblicherweise einen lokalen Webserver auf, der nur Anfragen von localhost entgegen nimmt und auf deinem eigenen Computer läuft. Dafür brauchst du dann nichts besonderes beachten ansonsten was Sicherheit und Co. angeht.

 

[GroMag]

Man setzt für die Entwicklung üblicherweise einen lokalen Webserver auf

Optimaler Weise eine VM die das Produktivsystem spiegelt.

 

[Hayda Ministral]

@Moderation: Die Frage wurde beantwortet und das Problem gelöst, es floß kein Blut und niemand wurde beleidigt. Überdies hält sich der Off-Topic Anteil bisher in Grenzen.

Bitte den Thread schließen solange es noch so bleibt :-)