วิธีที่ดีที่สุดในการสร้าง HTML ในรหัส C # คืออะไร [ปิด]


15

ฉันมีความเชื่อว่ามาร์กอัปควรอยู่ในสถานะมาร์กอัปและไม่อยู่ในโค้ดด้านหลัง

ฉันมาถึงสถานการณ์ที่ฉันคิดว่าเป็นที่ยอมรับในการสร้าง HTML ในโค้ดด้านหลัง ฉันต้องการได้รับฉันทามติว่าแนวทางปฏิบัติที่ดีที่สุดควรเป็นอย่างไร

เมื่อใดจึงจะสามารถสร้าง html ในโค้ดด้านหลังได้ วิธีที่ดีที่สุดในการสร้าง html นี้คืออะไร (ตัวอย่าง: สตริง, StringBuilder, HTMLWriter เป็นต้น)


ลองใช้เทมเพลตและตัวยึดตำแหน่งที่คุณจะคายมาร์กอัพ html นี้
Yusubov

5
ตัวเลือกอื่น: สร้าง XML ตามโมเดลข้อมูลของคุณแล้วใช้ XSLT เพื่อเปลี่ยน XML เป็น HTML
FrustratedWithFormsDesigner

เพิ่งมาถึงการแจ้งเตือนของฉันในวันนี้ C # / XAML สำหรับ HTML5 ดูมีแนวโน้มและอาจเหมาะสมกับสถานการณ์ของคุณ cshtml5.com
softveda

ปัญหาเกี่ยวกับเส้นทาง XSLT อยู่ในการแปล หากคุณต้องการสองภาษาคุณจำเป็นต้องมีสไตล์ชีท XSLT สองภาษาและจัดให้ขนานกัน นั่นคือนรก ดีกว่าแค่เขียน HTML ลงในไฟล์ข้อความจาก C # ใช้ String.Format และ $ ".. {variable} ... " พร้อมกับ WPFLocalization หรือไม่
Erik

คำตอบ:


12

ใช้สิ่งที่ชอบมีดโกนไม่สามารถใช้ได้ที่นี่หรือไม่ เพราะถ้าคุณทำรุ่น html มาก ๆ โดยใช้วิวเอ็นจิ้นจะทำให้ง่ายขึ้นมาก มันถูกสร้างขึ้นเพื่อใช้ภายนอก ASP.NET

อย่างไรก็ตามบางครั้งนั่นไม่ใช่สิ่งที่คุณต้องการ คุณได้พิจารณาใช้คลาสTagBuilderซึ่งเป็นส่วนหนึ่งของ. net (mvc) หรือไม่? นอกจากนี้ยังมีHtmlWriterใน System.Web.UI (สำหรับแบบฟอร์มบนเว็บ) ฉันจะแนะนำหนึ่งของเหล่านี้ถ้าคุณกำลังทำหรือControlsHtml Helpers


3
+1 หากคุณต้องการสร้างเทมเพลตภายในแอปมีดโกนคือหนทางที่จะไป ตรวจสอบ razorengine @ nuget.org/packages/RazorEngineหากคุณต้องการตัวเลือกที่ยอดเยี่ยมสำหรับการติดตั้งมีดโกนภายในแอพที่ไม่ใช่ -asp.net
ไวแอตต์บาร์เน็ตต์

1
ฉันมีข้อกำหนดที่คล้ายกันซึ่งฉันต้องสร้าง html (โหลดขึ้นมา) ในไลบรารีคลาส ฉันต้องการใช้มีดโกนนี้ แต่พยายามที่จะเข้าใจวิธีการรักษาไฟล์ cshtml ใน dll มันจะรวมเข้าด้วยกันได้อย่างไร?
Yashvit

คุณสามารถส่งผ่านสตริงstackoverflow.com/questions/3628895/…ก็ได้
Daniel Little

14

ฉันจะใช้Html Agility Packเพื่อประกอบ HTML แล้วเขียนมันลงในไฟล์ข้อความ

จำนวนมากของชั่วโมงคนเดินเข้าไปในการทำ Html Agility แพ็คที่แข็งแกร่งและHTML ที่สอดคล้องกับ HTML ง่าย

ฉันคิดว่ามันรวมแอปพลิเคชันตัวอย่างที่สร้าง HTML

จากหน้าแรก:

ตัวอย่างการใช้งาน:

การแก้ไขหน้าหรือการสร้าง คุณสามารถแก้ไขหน้าเว็บในแบบที่คุณต้องการแก้ไข DOM เพิ่มโหนดคัดลอกโหนดและ ... คุณตั้งชื่อมัน


5

ฉันจะใช้htmltagsเพื่อสร้าง HTML

ตัวอย่าง:

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

จากนั้นCSQueryถ้าฉันต้องการแยก HTML

ตัวอย่าง:

dom.Select("div > span")
    .Eq(1)
    .Text("Change the text content of the 2nd span child of each div");

2

แน่นอนว่ามีไลบรารี่เช่น HTML Agility Pack ที่สามารถช่วยคุณได้ในความพยายามเหล่านี้

หากคุณไม่ต้องการใช้ห้องสมุดที่มีอยู่แล้วและต้องการรหัสที่เรียบง่ายสกปรกและสกปรกฉันชอบความคิดที่จะขจัดพฤติกรรมบางอย่างตามที่ระบุไว้ในคำตอบก่อนหน้านี้ ฉันยังชอบความคิดในการใช้ StringBuilder พื้นฐานเมื่อเทียบกับสตริงด้วยเหตุผลสองประการ:

  1. สตริงมีประสิทธิภาพน้อยกว่าตัวสร้างสตริง
  2. StringBuilder เป็นโครงสร้างข้อมูลที่จัดทำดัชนีได้

หากฉันไม่ต้องการเอ็นจิ้น HTML ที่ออกแบบอย่างหนาแน่นฉันจะสร้างส่วนต่อประสานที่เรียบง่ายและใช้งานง่าย

AddLineBreak();
AddSimpleTag(string tagName);
AddSimpleTagAt(string tagName, string content, int index);
Output();

1
โครงสร้างข้อมูลที่จัดทำดัชนีได้นั้นน่าสนใจ แต่ฉันไม่ต้องกังวลเกี่ยวกับประสิทธิภาพมากเกินไป : codinghorror.com/blog/2009/01/…
Jim G.

1
ฉันได้รับความหนักหน่วงของ Strings มาสองสามครั้งโดยเฉพาะอย่างยิ่งสายใหญ่จริงๆ StringBuilders มีหน่วยความจำมีประสิทธิภาพมากขึ้นและโปรเซสเซอร์มีประสิทธิภาพเมื่อพวกเขาใหญ่ ดังนั้นในการดำเนินการเช่นนี้ที่ HTML สามารถมีขนาดใหญ่มากฉันจะเริ่มต้นด้วย StringBuilder หากมีการรับประกันว่า HTML จะไม่ใหญ่มากสตริงจะเพียงพออย่างแน่นอน
ทิมซี

1
ถ้า HTML มีขนาดใหญ่มากฉันก็จะแนะนำ HTML Agility Pack แน่นอน [ฉันแนะนำ HTML Agility Pack สองนาทีก่อนที่คุณจะทำ :)]
จิม G.

1

หากคุณใช้สตริงเพียงอย่าลืมหลีกเลี่ยงอักขระ HTML ที่สงวนไว้ทั้งหมดในข้อมูลเอาต์พุตของคุณ

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

ฉันแนะนำให้ใช้คลาสหรือไลบรารีที่รับรู้ HTML แทนการทำงานกับสตริงโดยตรง HTMLWriter ดูเหมือนเป็นการเริ่มต้นที่ดีทีเดียว


ขอบคุณสำหรับข้อมูลเชิงลึกนี้ สำหรับใครก็ตามที่สามารถอ่านได้นี่คือสิ่งที่ฉันใช้เพื่อส่งผ่านค่าของ DataTable ในเทมเพลตรายการ กุญแจสำคัญคือ (ตามที่ Mike Clark แนะนำ) ให้ระวัง HTML: <asp: ปุ่ม ID = "btnEdit" CssClass = "btnmaatwerksmall" runat = "เซิร์ฟเวอร์" Text = "Wijzig" OnClientClick = '<% # String.Format ("OpenChildInEnterprise (& apos; {0} & apos;, & apos; {1} & apos;, & apos; {2} & apos;); ", Eval (" Cursus "), Eval (" Omschrijving "), Eval (" Opmerking ")) > '/>
real_yggdrasil

-1

เกือบสองปีหลังจากโพสต์ต้นฉบับ - นี่คือทางออกที่ได้ผลดีสำหรับฉัน ในเอกสารเป้าหมายฉันวางสิ่งต่อไปนี้:

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

ฟังก์ชั่นที่ถูกเรียกมีลักษณะเช่นนี้:

    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;      
    }

และผลลัพธ์ที่ได้ในเบราว์เซอร์ก็เป็นไปตามที่คาดไว้:
จำนวนคือ: 0
จำนวนคือ: 1
จำนวนคือ: 2
จำนวนคือ: 3
จำนวนคือ: 4

เมื่อฉันไปดูซอร์สฉันพบสิ่งต่อไปนี้:

<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>

1
ฉันจะชี้ให้เห็นว่าวิธีการแก้ปัญหาของคุณมีหลายประเด็นเดียวกันกับ 'เนื้อหา' เป็นสตริงที่ไม่เปลี่ยนรูปตามที่อธิบายไว้ในโพสต์ให้คะแนนต่ำในคำถามนี้

-1

ลุกเป็นไฟ!

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;

ฉันจะ prob ลง downvote นี้ แต่ในฐานะนักออกแบบอดีตที่ต้องบิด HTML ในรหัสก่อนที่ฉันจะรู้มากเกี่ยวกับ. NET รหัสข้างต้นเป็นวิธีที่เข้าใจง่ายกว่าวิธีการสร้าง HTML นามธรรม หากคุณคิดว่านักออกแบบอาจต้องปรับแต่ง HTML ของคุณให้ใช้สตริงแบบนี้

สิ่งที่ฉันเห็น devs จำนวนมากพลาดเมื่อพวกเขาเขียน HTML ในรหัสคือใน HTML อนุญาตให้ใช้เครื่องหมายคำพูดเดี่ยวหรือคู่สำหรับแอตทริบิวต์ ดังนั้นแทนที่จะหลบเลี่ยงเครื่องหมายคำพูดทั้งหมดในโค้ด (ซึ่งดูแปลกประหลาดเหมือนนรกกับผู้ที่ไม่ได้เริ่มต้น) เพียงแค่ใช้เครื่องหมายคำพูดเดี่ยวสำหรับคำพูด html ภายในสตริงของคุณ


ละเอียด. สิ่งที่คุณเกลียดชัง concatenating สตริงเป็นตัวแทนของฉัน crampin ต่อไปนี้เป็นวิธี 'เหมาะสม' ในการทำเช่นนี้โดยไม่มีการต่อสตริง แต่ฉันแสดงความเห็นว่าหน้าปกติใด ๆ ที่มีตารางปกติจะไม่นำเสนอปัญหาด้านประสิทธิภาพใด ๆ

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();

3
-1 การใช้ + เพื่อเชื่อมสตริงเข้าด้วยกันเป็นสิ่งที่แย่ที่สุดที่คุณสามารถทำได้
Daniel Little

ดำเนินการต่อ: ดูstackoverflow.com/questions/3102806/…
Daniel Little

สำหรับผู้เริ่มใช้+=ภายในวงด้วยวิธีนี้ไม่ได้ปรับขนาดเลย; เนื่องจากสตริงไม่เปลี่ยนรูปคุณกำลังสร้างสตริงใหม่ทุกครั้งที่คุณทำ ใช้StringBuilderแทน
Robert Harvey

3
เหตุใดผู้ที่เขียนรหัสที่น่ากลัวจึงต้องแบ่งปันรหัสที่น่ากลัวกับคนอื่น ๆ
Ramhound

3
@ แรมฮาวด์If you think a designer might ever have to tweak your HTML, use simple strings like this.เข้าใจยากไหม? คำจำกัดความของประชาชนบางคนเกี่ยวกับโค้ดที่น่ากลัวคือสิ่งที่ซื้อประสิทธิภาพเป็นมิลลิวินาทีโดยเสียเวลาเพียงไม่กี่วินาทีในการทำความเข้าใจ เห็นได้ชัดว่าเมื่อคุณคาดหวังว่าโค้ดของคุณจะถูกดูหรือดูแลโดยตัวหารร่วมที่ต่ำที่สุดของแต่ละคดีคุณสามารถทำให้การเขียนโค้ดที่ง่ายต่อการเข้าใจหรือปรับแต่งนั้นดีกว่าโค้ดที่ดีที่สุด
maple_shaft
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.