c# - HTMLを文字列に書き込む

Translate

私はこのようなコードを持っています。書き込みと保守を簡単にする方法はありますか? C#.NET3.5の使用。

string header(string title)
{
    StringWriter s = new StringWriter();
    s.WriteLine("{0}","<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01//EN\" \"http://www.w3.org/TR/html4/strict.dtd\">");
    s.WriteLine("{0}", "<html>");
    s.WriteLine("<title>{0}</title>", title);
    s.WriteLine("{0}","<link rel=\"stylesheet\" type=\"text/css\" href=\"style.css\">");
    s.WriteLine("{0}", "</head>");
    s.WriteLine("{0}", "<body>");
    s.WriteLine("{0}", "");
}

私はただ書くこともできます:

s.WriteLine("{0}", @"blah blah

many
new
lines
blah UHY#$&_#$_*@Y KSDSD<>\t\t\t\t\t\tt\t\t\\\t\t\t\t\\\h\th'\h't\th
hi
done"); 

動作しますが、すべて交換する必要があります""".

This question and all comments follow the "Attribution Required."

すべての答え

lc.
Translate

あなたはおそらく使用する方が良いでしょうHtmlTextWriterまたはXMLWriter平野よりStringWriter。彼らはあなたのために逃げるのを世話するだけでなく、文書が整形式であることを確認します。

このページ使用の基本を示していますHtmlTextWriterクラス、その要点は次のとおりです。

StringWriter stringWriter = new StringWriter();

using (HtmlTextWriter writer = new HtmlTextWriter(stringWriter))
{
    writer.AddAttribute(HtmlTextWriterAttribute.Class, classValue);
    writer.RenderBeginTag(HtmlTextWriterTag.Div); // Begin #1

    writer.AddAttribute(HtmlTextWriterAttribute.Href, urlValue);
    writer.RenderBeginTag(HtmlTextWriterTag.A); // Begin #2

    writer.AddAttribute(HtmlTextWriterAttribute.Src, imageValue);
    writer.AddAttribute(HtmlTextWriterAttribute.Width, "60");
    writer.AddAttribute(HtmlTextWriterAttribute.Height, "60");
    writer.AddAttribute(HtmlTextWriterAttribute.Alt, "");

    writer.RenderBeginTag(HtmlTextWriterTag.Img); // Begin #3
    writer.RenderEndTag(); // End #3

    writer.Write(word);

    writer.RenderEndTag(); // End #2
    writer.RenderEndTag(); // End #1
}
// Return the result.
return stringWriter.ToString();
ソース
Translate

他の言語でこの問題に対処するときは、コードとHTMLを分離します。何かのようなもの:

1.)HTMLテンプレートを作成します。使用する[varname]置換/挿入されたコンテンツをマークするプレースホルダー。
2.)配列または構造/マッピング/辞書からテンプレート変数を入力します

Write( FillTemplate(myHTMLTemplate, myVariables) ) # pseudo-code
ソース
Translate

C#について質問されたことは知っていますが、.Net言語を使用する場合は、この正確な問題に対してVisualBasicを強くお勧めします。 Visual Basicには、このようなコードを記述できるXMLリテラルと呼ばれる機能があります。

Module Module1

    Sub Main()

        Dim myTitle = "Hello HTML"
        Dim myHTML = <html>
                         <head>
                             <title><%= myTitle %></title>
                         </head>
                         <body>
                             <h1>Welcome</h1>
                             <table>
                                 <tr><th>ID</th><th>Name</th></tr>
                                 <tr><td>1</td><td>CouldBeAVariable</td></tr>
                             </table>
                         </body>
                     </html>

        Console.WriteLine(myHTML)
    End Sub

End Module

これにより、古いASPスタイルの式の穴のあるストレートHTMLを記述でき、コードが非常に読みやすくなります。残念ながら、この機能はC#にはありませんが、VBで単一のモジュールを記述し、それをC#プロジェクトへの参照として追加することができます。

Visual Studioでの書き込みでは、ほとんどのXMLリテラルと式全体を適切にインデントすることもできます。 VS2010では、式の穴のインデントが改善されています。

ソース
Translate

を使用するXDocumentDOMを作成し、それを使用して書き出すXmlWriter。これにより、非常に簡潔で読みやすい表記と、適切にフォーマットされた出力が得られます。

このサンプルプログラムを見てください:

using System.Xml;
using System.Xml.Linq;

class Program {
    static void Main() {
        var xDocument = new XDocument(
            new XDocumentType("html", null, null, null),
            new XElement("html",
                new XElement("head"),
                new XElement("body",
                    new XElement("p",
                        "This paragraph contains ", new XElement("b", "bold"), " text."
                    ),
                    new XElement("p",
                        "This paragraph has just plain text."
                    )
                )
            )
        );

        var settings = new XmlWriterSettings {
            OmitXmlDeclaration = true, Indent = true, IndentChars = "\t"
        };
        using (var writer = XmlWriter.Create(@"C:\Users\wolf\Desktop\test.html", settings)) {
            xDocument.WriteTo(writer);
        }
    }
}

これにより、次の出力が生成されます。

<!DOCTYPE html >
<html>
    <head />
    <body>
        <p>This paragraph contains <b>bold</b> text.</p>
        <p>This paragraph has just plain text.</p>
    </body>
</html>
ソース
Translate

あなたが使うことができますSystem.Xml.Linqオブジェクト。それらは古いものから完全に再設計されましたSystem.XmlXMLを最初から構築するのが本当に面倒だった日々。

私が推測するDoctype以外に、次のようなことを簡単に行うことができます。

var html = new XElement("html",
    new XElement("head",
        new XElement("title", "My Page")
    ),
    new XElement("body",
        "this is some text"
    )
);
ソース
Translate
return string.Format(@"<!DOCTYPE HTML PUBLIC ""-//W3C//DTD HTML 4.01//EN""      ""http://www.w3.org/TR/html4/strict.dtd"">
<html>
<title>{0}</title>
<link rel=""stylesheet"" type=""text/css"" href=""style.css"">
</head>
<body>
", title);
ソース
Translate

最も簡単な方法は、XmlWriterオブジェクトを使用することです。これは、有効なHTMLを生成するために使用でき、厄介なエスケープシーケンスをすべて処理します。

ソース
Translate

使用できますT4テンプレートコードからHtml(または任意)を生成するため。これを参照してください:http://msdn.microsoft.com/en-us/library/ee844259.aspx

ソース
Translate

C#でXMLドキュメントを作成するのと同じようなHTMLドキュメントを作成したい場合は、MicrosoftのオープンソースライブラリであるHtmlアジリティパック.

これは、と非常によく似たAPIを持つHtmlDocumentオブジェクトを提供します。System.Xml.XmlDocumentクラス。

ソース
Translate

ASP.NETを使用して、Webページのコンテキスト外でHTMLを生成できます。これが記事ですそれはそれがどのように行われるかを示しています。

ソース
Translate

サードパーティのオープンソースライブラリを使用して、次のような強い型付きの検証済み(X)HTMLを生成できます。CityLizardフレームワークまたはシャープDOM。

更新例えば

html
    [head
        [title["Title of the page"]]
        [meta_(
            content: "text/html;charset=UTF-8",
            http_equiv: "Content-Type")
        ]
        [link_(href: "css/style.css", rel: "stylesheet", type: "text/css")]
        [script_(type: "text/javascript", src: "/JavaScript/jquery-1.4.2.min.js")]
    ]
    [body
        [div
            [h1["Test Form to Test"]]
            [form_(action: "post", id: "Form1")
                [div
                    [label["Parameter"]]
                    [input_(type: "text", value: "Enter value")]
                    [input_(type: "submit", value: "Submit!")]
                ]
            ]
            [div
                [p["Textual description of the footer"]]
                [a_(href: "http://google.com/")
                    [span["You can find us here"]]
                ]
                [div["Another nested container"]]
            ]
        ]
    ];
ソース
Translate

これは一般的な解決策ではありませんが、電子メールテンプレートを保持または維持することが目的の場合、System.Webには次のような組み込みクラスがあります。MailDefinition。このクラスは、HTMLメールを作成するためにASP.NETメンバーシップコントロールによって使用されます。

上記と同じ種類の「文字列置換」を行いますが、すべてをMailMessageにパックします。

これがMSDNの例です。

ListDictionary replacements = new ListDictionary();
replacements.Add("<%To%>",sourceTo.Text);
replacements.Add("<%From%>", md.From);
System.Net.Mail.MailMessage fileMsg;
fileMsg = md.CreateMailMessage(toAddresses, replacements, emailTemplate, this); 
return fileMsg;
ソース
Translate

ASP.net MVCにRazorが導入されたことで、C#でHTMLを作成する最良の方法は、RazorEngineを使用することです。

string templatePath = [email protected]"{Directory.GetCurrentDirectory()}\EmailTemplates"; 

IRazorLightEngine engine = EngineFactory.CreatePhysical(templatePath); 

var model = new Notification 
{ 
       Name = "Jone", 
       Title = "Test Email", 
       Content = "This is a test" 
}; 

string result = engine.Parse("template.cshtml", model); 

テンプレート:

<h2>Dear @Model.Name, you have a notification.</h2> 

<h1>@Model.Title</h1> 
<p>@Model.Content</p> 

<p>Date:@DateTime.Now</p> 

完全なサンプルについては、を参照してください。ここに

ソース
Translate

Renderメソッドと別の属性を使用して独自のクラスを作成し、それを頻繁に使用する場合の大きな混乱を回避してから、HTMLWriterまたはxmlwriterも使用できます。このロジックはasp.netページで使用され、webControlから継承して、レンダリングメソッド、サーバー側のコントロールを開発している場合に最適です。
この良い例かもしれません。

よろしく

ソース
Translate

それは本当にあなたが何をしようとしているのか、そして具体的にはあなたが本当に提供する必要のあるパフォーマンスの種類に依存します。

プロジェクトに驚くほど複雑さを加えるだけの、強く型付けされたHTML開発(完全なコントロールモデル、ASP.NET Webコントロールなど)のすばらしいソリューションを見てきました。他の状況では、それは完璧です。

C#の世界で優先される順に、

  • ASP.NETWebコントロール
  • ASP.NETプリミティブとHTMLコントロール
  • XmlWriterおよび/またはHtmlWriter
  • HTMLの相互運用性を使用してSilverlight開発を行う場合は、次のように強く入力されたものを検討してください。リンクテキスト
  • StringBuilderおよびその他のスーパープリミティブ
ソース
Translate

私はこれらのクラスを書きました。シンプルでありながら実用的です。

public class HtmlAttribute
{
    public string Name { get; set; }
    public string Value { get; set; }

    public HtmlAttribute(string name) : this(name, null) { }

    public HtmlAttribute(
        string name,
        string @value)
    {
        this.Name = name;
        this.Value = @value;
    }

    public override string ToString()
    {
        if (string.IsNullOrEmpty(this.Value))
            return this.Name;

        if (this.Value.Contains('"'))
            return string.Format("{0}='{1}'", this.Name, this.Value);

        return string.Format("{0}=\"{1}\"", this.Name, this.Value);
    }
}

public class HtmlElement
{
    protected List<HtmlAttribute> Attributes { get; set; }
    protected List<object> Childs { get; set; }
    public string Name { get; set; }
    protected HtmlElement Parent { get; set; }

    public HtmlElement() : this(null) { }

    public HtmlElement(string name, params object[] childs)
    {
        this.Name = name;
        this.Attributes = new List<HtmlAttribute>();
        this.Childs = new List<object>();

        if (childs != null && childs.Length > 0)
        {
            foreach (var c in childs)
            {
                Add(c);
            }
        }
    }

    public void Add(object o)
    {
        var a = o as HtmlAttribute;
        if (a != null)
            this.Attributes.Add(a);
        else
        {
            var h = o as HtmlElement;
            if (h != null && !string.IsNullOrEmpty(this.Name))
            {
                h.Parent = this;
                this.Childs.Add(h);
            }
            else
                this.Childs.Add(o);
        }
    }

    public override string ToString()
    {
        var result = new StringBuilder();

        if (!string.IsNullOrEmpty(this.Name))
        {
            result.Append(string.Format("<{0}", this.Name));
            if (this.Attributes.Count > 0)
            {
                result.Append(" ");
                foreach (var attr in this.Attributes)
                {
                    result.Append(attr.ToString());
                    result.Append(" ");
                }

                result = new StringBuilder(result.ToString().TrimEnd(' '));
            }

            if (this.Childs.Count == 0)
            {
                result.Append(" />");
            }
            else
            {
                result.AppendLine(">");

                foreach (var c in this.Childs)
                {
                    var cParts = c.ToString().Split('\n');

                    foreach (var p in cParts)
                    {
                        result.AppendLine(string.Format("{0}", p));
                    }
                }

                result.Append(string.Format("</{0}>", this.Name));
            }
        }
        else
        {
            foreach (var c in this.Childs)
            {
                var cParts = c.ToString().Split('\n');

                foreach (var p in cParts)
                {
                    result.AppendLine(string.Format("{0}", p));
                }
            }
        }

        var head = GetHeading(this);

        var ps = result.ToString().Split('\n');
        return string.Join("\r\n", (from p in ps select head + p.TrimEnd('\r')).ToArray());
    }

    string GetHeading(HtmlElement h)
    {
        if (h.Parent != null)
            return "    ";
        else
            return string.Empty;
    }
}
ソース
MMA
Translate

HSharpは、HTMLなどのマークアップ言語を簡単かつ迅速に分析するために使用されるライブラリです。インストール:PM> Install-Package Obisoft.HSharp

        var Document = new HDoc(DocumentOptions.BasicHTML);
        Document["html"]["body"].AddChild("div");
        Document["html"]["body"]["div"].AddChild("a", new HProp("href", "/#"));
        Document["html"]["body"]["div"].AddChild("table");
        Document["html"]["body"]["div"]["table"].AddChildren(
         new HTag("tr"),
         new HTag("tr", "SomeText"),
         new HTag("tr", new HTag("td")));
        var Result = Document.GenerateHTML();
        Console.WriteLine(Result);

および出力:

<html>
<head>
<meta charset="utf-8"></meta><title>
Example </title>
</head>
<body>
<div>
<a href="/#"></a><table>
<tr></tr><tr>
SomeText </tr>
<tr>
<td></td></tr>
</table>
</div>
</body>
</html>
ソース
Translate

C#でdomを生成するためのjqueryのようなものを探していました(解析する必要はありません)。残念ながら、軽量のソリューションを見つけることができなかったため、System.Xml.Linq.XElementから継承されたこの単純なクラスを作成しました。重要な機能は、JavaScriptでjqueryを使用するときのように演算子をチェーンできるため、より流暢に使用できることです。完全な機能はありませんが、必要なことを実行します。興味がある場合は、gitを開始できます。

public class DomElement : XElement
{
    public DomElement(string name) : base(name)
    {
    }

    public DomElement(string name, string value) : base(name, value)
    {
    }

    public DomElement Css(string style, string value)
    {
        style = style.Trim();
        value = value.Trim();
        var existingStyles = new Dictionary<string, string>();
        var xstyle = this.Attribute("style");
        if (xstyle != null)
        {
            foreach (var s in xstyle.Value.Split(';'))
            {
                var keyValue = s.Split(':');
                existingStyles.Add(keyValue[0], keyValue.Length < 2 ? null : keyValue[1]);
            }
        }

        if (existingStyles.ContainsKey(style))
        {
            existingStyles[style] = value;
        }
        else
        {
            existingStyles.Add(style, value);
        }

        var styleString = string.Join(";", existingStyles.Select(s => $"{s.Key}:{s.Value}"));
        this.SetAttributeValue("style", styleString);

        return this;
    }

    public DomElement AddClass(string cssClass)
    {
        var existingClasses = new List<string>();
        var xclass = this.Attribute("class");
        if (xclass != null)
        {
            existingClasses.AddRange(xclass.Value.Split());
        }

        var addNewClasses = cssClass.Split().Where(e => !existingClasses.Contains(e));
        existingClasses.AddRange(addNewClasses);

        this.SetAttributeValue("class", string.Join(" ", existingClasses));
        return this;
    }

    public DomElement Text(string text)
    {
        this.Value = text;
        return this;
    }

    public DomElement Append(string text)
    {
        this.Add(text);
        return this;
    }

    public DomElement Append(DomElement child)
    {
        this.Add(child);
        return this;
    }
}

サンプル:

void Main()
{
    var html = new DomElement("html")
        .Append(new DomElement("head"))
        .Append(new DomElement("body")
            .Append(new DomElement("p")
                .Append("This paragraph contains")
                .Append(new DomElement("b", "bold"))
                .Append(" text.")
                )
            .Append(new DomElement("p").Text("This paragraph has just plain text"))
            )
        ;

    html.ToString().Dump();

    var table = new DomElement("table").AddClass("table table-sm").AddClass("table-striped")
            .Append(new DomElement("thead")
                .Append(new DomElement("tr")
                    .Append(new DomElement("td").Css("padding-left", "15px").Css("color", "red").Css("color", "blue")
                        .AddClass("from-now")
                        .Append(new DomElement("div").Text("Hi there"))
                        .Append(new DomElement("div").Text("Hey there"))
                        .Append(new DomElement("div", "Yo there"))
                        )
                )
            )
        ;
    table.ToString().Dump();
}

上記のコードからの出力:

<html>
  <head />
  <body>
    <p>This paragraph contains<b>bold</b> text.</p>
    <p>This paragraph has just plain text</p>
  </body>
</html>
<table class="table table-sm table-striped">
  <thead>
    <tr>
      <td style="padding-left:15px;color:blue" class="from-now">
        <div>Hi there</div>
        <div>Hey there</div>
        <div>Yo there</div>
      </td>
    </tr>
  </thead>
</table>
ソース
Leave a Reply
You must be logged in to post a answer.
著者について