Jaki jest najlepszy sposób tworzenia HTML w kodzie C #? [Zamknięte]

15

Uważam, że znaczniki powinny pozostać narzutami, a nie kodem z tyłu.

Doszedłem do sytuacji, w której myślę, że dopuszczalne jest budowanie kodu HTML w kodzie z tyłu. Chciałbym mieć konsensus co do tego, jakie najlepsze praktyki są lub powinny być.

Kiedy dopuszczalne jest budowanie kodu HTML w kodzie z tyłu? Jaka jest najlepsza metoda utworzenia tego HTML? (przykład: Strings, StringBuilder, HTMLWriter itp.)

Rodney
źródło
spróbuj użyć szablonów i symboli zastępczych, w których wyplujesz te znaczniki HTML.
Jusubow
5
Inna opcja: utwórz XML na podstawie modelu danych, a następnie użyj XSLT, aby przekształcić XML w HTML.
FrustratedWithFormsDesigner
Właśnie do mnie dotarło dzisiaj C # / XAML dla HTML5, wygląda obiecująco i może pasować do twojego scenariusza. cshtml5.com
softveda
problem z trasą XSLT dotyczy lokalizacji. Jeśli potrzebujesz dwóch języków, potrzebujesz dwóch arkuszy stylów XSLT i utrzymuj je równolegle. To jest piekło Lepiej po prostu napisz HTML do pliku tekstowego z C #. używać String.Format i $ „.. {zmienna} ...” razem z WPFLocalization?
Erik

Odpowiedzi:

12

Czy używanie czegoś takiego jak Razor nie ma tutaj zastosowania? Ponieważ jeśli generujesz dużo html przy użyciu silnika widoku, możesz to znacznie ułatwić. Został również zbudowany do użytku poza ASP.NET.

Czasami jednak nie jest to potrzebne. Czy rozważałeś użycie klasy TagBuilder, która jest częścią .net (mvc)? Istnieje również HtmlWriter w System.Web.UI (dla formularzy internetowych). Polecam jeden z nich, jeśli robisz Controlslub Html Helpers.

Daniel Little
źródło
3
+1, jeśli potrzebujesz szablonów w maszynce do golenia, jest to najlepsza droga. Sprawdź razorengine @ nuget.org/packages/RazorEngine, jeśli potrzebujesz świetnej opcji do montażu maszynki do golenia w aplikacji innej niż net.net.
Wyatt Barnett
1
Mam podobny wymóg, w którym muszę wygenerować HTML (ładuje go) w bibliotece klas. Chcę użyć do tego maszynki, ale staram się zrozumieć, jak utrzymywać pliki cshtml w bibliotece dll. Jak może się łączyć?
Yashvit,
Możesz po prostu przekazać dowolny ciąg stackoverflow.com/questions/3628895/…
Daniel Little
14

Chciałbym użyć Html Agility Pack do złożenia HTML, a następnie zapisać go do pliku tekstowego.

Wiele roboczogodzin poświęcono na uczynienie pakietu HTML Agility Pack solidnym i zgodnym z HTML-em.

Myślę, że zawiera nawet przykładową aplikację, która generuje HTML.

Ze strony głównej:

Przykładowe aplikacje:

Ustalanie lub generowanie strony. Możesz naprawić stronę tak, jak chcesz, zmodyfikować DOM, dodać węzły, skopiować węzły, no cóż ... nazwij go.

Jim G.
źródło
5

Użyłbym htmltags do tworzenia HTML.

Przykład:

var tag = new HtmlTag("span")
    .Text("Hello & Goodbye")
    .AddClass("important")
    .Attr("title", "Greetings")

A potem CSQuery, jeśli chcę parsować HTML

Przykład:

dom.Select("div > span")
    .Eq(1)
    .Text("Change the text content of the 2nd span child of each div");
jgauffin
źródło
2

Istnieją oczywiście biblioteki, takie jak HTML Agility Pack, które mogą pomóc w tych staraniach.

Jeśli naprawdę nie chcesz korzystać z istniejącej biblioteki i chcesz prostego, nieczytelnego kodu, podoba mi się pomysł wyodrębnienia niektórych zachowań, jak podano w poprzedniej odpowiedzi. Podoba mi się również pomysł użycia leżącego u podstaw StringBuilder, w przeciwieństwie do ciągu z kilku powodów:

  1. Ciągi są mniej wydajne niż narzędzie do tworzenia ciągów
  2. StringBuilder to indeksowana struktura danych,

Gdybym nie potrzebował silnie zaprojektowanego silnika HTML, zbudowałbym prosty, intuicyjny interfejs

AddLineBreak();
AddSimpleTag(string tagName);
AddSimpleTagAt(string tagName, string content, int index);
Output();
Tim C.
źródło
1
Indeksowana struktura danych jest przekonująca, ale nie martwiłbym się zbytnio wydajnością: codinghorror.com/blog/2009/01/…
Jim G.,
1
Parę razy zetknąłem się z ciężarem strun, szczególnie NAPRAWDĘ dużych strun. StringBuilders są bardziej wydajne pod względem pamięci i procesora, gdy stają się duże. Tak więc w takiej implementacji, w której HTML może stać się naprawdę duży, zacznę od StringBuilder. Gdyby istniała gwarancja, że ​​HTML nie będzie zbyt duży, łańcuch z pewnością byłby odpowiedni.
Tim C
1
Cóż, jeśli HTML może stać się naprawdę duży, to z pewnością poleciłbym HTML Agility Pack. [Właściwie poleciłem HTML Agility Pack dwie minuty przed tobą. :)]
Jim G.,
1

Jeśli ostatecznie użyjesz tylko ciągów znaków, nie zapomnij uciec wszystkich znaków zastrzeżonych HTML w danych wyjściowych.

&    &
>    >
<    &lt;
"    &quot;
'    &apos;

Zalecam jednak użycie klasy lub biblioteki obsługującej HTML zamiast bezpośredniej pracy z łańcuchami. HTMLWriter wygląda na całkiem dobry początek.

Mike Clark
źródło
Dziękuję za ten wgląd. Dla każdego, kto może to przeczytać, to jest to, czego używam do przekazywania wartości danych w szablonie elementu. Kluczem jest (jak sugeruje Mike Clark) znajomość HTML: <asp: Button ID = "btnEdit" CssClass = "btnmaatwerksmall" runat = "server" Text = "Wijzig" OnClientClick = '<% # String.Format („OpenChildInEnterprise („{0}”, „{1}”, „{2}„); ”, Eval („ Cursus ”), Eval („ Omschrijving ”), Eval („ Opmerking ”))% > '/>
real_yggdrasil
-1

Prawie dwa lata po opublikowaniu pierwszego postu - oto rozwiązanie, które dobrze mi się sprawdziło. W dokumencie docelowym umieszczam:

<table>    
    <%:theHtmlTableMomToldYouAbout() %>    //# Where I want my rows of table data to go
</table>

wywoływana funkcja wygląda następująco:

    public HtmlString theHtmlTableMomToldYouAbout()
    {
        string content = "";
        HtmlString theEnvelopePlease = null;

        for (int i = 0; i < 5; i++)
        {
            content = content + "<tr><td>The Number Is: " + i + "</td></tr>";
        }
        theEnvelopePlease = new HtmlString(content);
        return theEnvelopePlease;      
    }


Wynik w przeglądarce jest zgodny z oczekiwaniami: Liczba to: 0
Liczba to: 1
Liczba to: 2
Liczba to: 3
Liczba to: 4

Kiedy idę do źródła, znajduję:

<table>
    <tr><td>The Number Is: 0</td></tr>
    <tr><td>The Number Is: 1</td></tr>
    <tr><td>The Number Is: 2</td></tr>
    <tr><td>The Number Is: 3</td></tr>
    <tr><td>The Number Is: 4</td></tr>
</table>
WebFixItMan
źródło
1
Zwrócę uwagę, że twoje rozwiązanie ma wiele takich samych problemów z tym, że „treść” jest niezmiennym ciągiem, jak te opisane w punktach o niskiej punktacji na to pytanie.
-1

PŁOMIENIE NA!

var html = "";
html += "<table class='colorful'>";
foreach(var item in collection) {
     html += "<tr>";
     html += "<td class='boldCell'>" + item.PropWhatever + "</td>";
     // more cells here as needed
     html += "</tr>";
}
html += "</table>";
placeholder1.InnerHtml = html;

Prawdopodobnie zostanę za to zlekceważony, ale jako były projektant, który musiał poprawić HTML w kodzie, zanim naprawdę wiedziałem dużo o .NET, powyższy kod był znacznie łatwiejszy do zrozumienia niż metody abstrakcyjnego tworzenia HTML. Jeśli uważasz, że projektant może kiedykolwiek potrzebować poprawić kod HTML, użyj prostych ciągów takich jak ten.

Coś, co widzę, że wielu deweloperów tęskni za pisaniem HTML w kodzie, polega na tym, że w HTML dozwolone są pojedyncze lub podwójne cudzysłowy dla atrybutów. Zamiast więc uciekać od wszystkich cytatów w kodzie (które dla niezainicjowanych wyglądają dziwacznie jak diabli), po prostu użyj pojedynczych cudzysłowów dla cudzysłowów HTML w swoich ciągach.


W PORZĄDKU. Ci wszyscy, którzy cię nienawidzą, łączą cię ze mną. Oto „właściwy” sposób na zrobienie tego bez łączenia łańcuchów, ale podtrzymuję moją opinię, że każda normalna strona z normalnymi tabelami nie przedstawi żadnych problemów z wydajnością poza jakąś śmieszną skalą podobną do Google:

var sb = new System.Text.StringBuilder();
sb.Append("<table class='colorful'>");
foreach (var item in collection)
{
     sb.Append("<tr>");
     sb.Append("<td class='boldCell'>" + item.PropWhatever + "</td>");
     // more cells here as needed
     sb.Append("</tr>");
}
sb.Append("</table>");
placeholder1.InnerHtml = sb.ToString();
Graham
źródło
3
-1 użycie + do łączenia łańcuchów w pętlach jest najgorszą rzeczą, jaką możesz zrobić.
Daniel Little
ciąg dalszy: patrz stackoverflow.com/questions/3102806/…
Daniel Little
Cóż, na początek, użycie +=wewnątrz pętli w ten sposób wcale się nie skaluje; ponieważ ciągi są niezmienne, za każdym razem tworzysz zupełnie nowy ciąg. StringBuilderZamiast tego użyj .
Robert Harvey
3
Dlaczego ludzie, którzy piszą okropny kod, muszą udostępniać swój okropny kod innym osobom.
Ramhound,
3
@Ramhound Co If you think a designer might ever have to tweak your HTML, use simple strings like this.trudno jest zrozumieć? Definicja okropnego kodu niektórych ludzi to taka, która kupuje milisekundy wydajności, a jej pełne zrozumienie zajmuje wiele sekund. Oczywiście, gdy spodziewasz się, że Twój kod będzie przeglądany lub utrzymywany przez najniższy wspólny mianownik jednostki, z pewnością można stwierdzić, że pisanie kodu, który jest łatwiejszy do zrozumienia lub poprawienia, jest zawsze lepszy niż najczystszy lub najlepiej działający kod.
wałek klonowy