ASP.net एचटीएमएल प्रस्तुत करना अच्छी तरह से (सुंदर बनाएं)

Question

जब मैं अपने नियंत्रण ASP.net में वे इस तरह बाहर आ उत्पन्न:

<div id="ctl00_mainContent_ApprovalSelectPanel" class="discussWrapper"> 

     <span class="cbox highlighted"><input id="ctl00_mainContent_ctl00" type="checkbox" name="ctl00$mainContent$ctl00" checked="checked" value="70" /><label for="ctl00_mainContent_ctl00">Buyer1</label></span><span class="cbox"><input id="ctl00_mainContent_ctl01" type="checkbox" name="ctl00$mainContent$ctl01" value="75" /><label for="ctl00_mainContent_ctl01">Buyer2</label></span><span class="cbox"><input id="ctl00_mainContent_ctl02" type="checkbox" name="ctl00$mainContent$ctl02" value="280" /><label for="ctl00_mainContent_ctl02">Client3</label></span><span class="cbox"><input id="ctl00_mainContent_ctl03" type="checkbox" name="ctl00$mainContent$ctl03" value="281" /><label for="ctl00_mainContent_ctl03">Client4</label></span><span class="cbox"><input id="ctl00_mainContent_ctl04" type="checkbox" name="ctl00$mainContent$ctl04" value="283" /><label for="ctl00_mainContent_ctl04">Client2</label></span><span class="cbox"><input id="ctl00_mainContent_ctl05" type="checkbox" name="ctl00$mainContent$ctl05" value="289" /><label for="ctl00_mainContent_ctl05">Client1</label></span><span class="cbox"><input id="ctl00_mainContent_ctl06" type="checkbox" name="ctl00$mainContent$ctl06" value="346" /><label for="ctl00_mainContent_ctl06">artworker1</label></span><span class="cbox"><input id="ctl00_mainContent_ctl07" type="checkbox" name="ctl00$mainContent$ctl07" value="362" /><label for="ctl00_mainContent_ctl07">buyer3</label></span><span class="cbox"><input id="ctl00_mainContent_ctl08" type="checkbox" name="ctl00$mainContent$ctl08" value="367" /><label for="ctl00_mainContent_ctl08">meeeee</label></span><span class="cbox"><input id="ctl00_mainContent_ctl09" type="checkbox" name="ctl00$mainContent$ctl09" value="368" /><label for="ctl00_mainContent_ctl09">stake</label></span> 

    </div> 

सुंदर बदसूरत और कड़ी को समझने के लिए जब आप स्रोत देखते। यह आम तौर पर एक समस्या नहीं है, लेकिन मेरी साइट विज़िटर संसाधनों और ट्यूटोरियल की पेशकश कर रही है जहां स्रोत को देखकर अनुभव का हिस्सा है।

क्या इन नियंत्रणों को अच्छी तरह से प्रस्तुत करने का कोई तरीका है? ठीक से इंडेंट, बेहतर आईडी और नाम इत्यादि?

Answer 1

.NET 4.0 में आप ClientIDMode को 4 विकल्प ऑटोआईड, स्टेटिक, अनुमानित और इनहेरिट में से एक में सेट कर सकते हैं। आप शायद स्टेटिक की तलाश में हैं क्योंकि इससे यह सुनिश्चित होगा कि आपके नियंत्रण पृष्ठ को उन आईडी के साथ प्रस्तुत करते हैं जिन्हें आपने उन्हें सौंपा है।

आप जोड़कर आवेदन स्तर पर सेट कर सकते हैं:

<pages clientIDMode="Static"> 

अपने web.config करने के लिए

वहाँ इन परिवर्तनों यहाँ बारे में अधिक जानकारी है: http://beyondrelational.com/blogs/hima/archive/2010/07/16/all-about-client-id-mode-in-asp-net-4.aspx

Answer 2

हो रही सुंदर उत्पादन जा रहा है एक निकट असंभवता होने के लिए, क्योंकि नियंत्रण प्रदान करते समय पार्सर में संदर्भ की कोई अवधारणा नहीं होती है। कई नियंत्रण एक से अधिक HTML तत्व प्रस्तुत करते हैं, और उन्हें ऐसा करने के लिए उनके संदर्भ को जानने की आवश्यकता होगी ... साथ ही साथ यह जानने में सक्षम होना चाहिए कि किस प्रकार की स्वरूपण वांछित थी (उदाहरण के लिए सूची नियंत्रण के लिए, जब कोई नई लाइन शुरू होती है, कब फिर से इंडेंट करने के लिए)।

इसके अलावा, मार्कअप में सभी तत्व वास्तव में प्रस्तुत नहीं किए जाते हैं, और आपके मार्कअप का लेआउट हमेशा आउटपुट के लेआउट से सीधे संबंधित नहीं होता है। उदाहरण के लिए:

<asp:PlaceHolder runat="server" /> 
    <asp:Panel runat="server" /> 
     <asp:DropDownList runat="server" /> 
    </asp:Panel /> 
</asp:PlaceHolder /> 

Placeholder प्रदान की गई है, ताकि उत्पादन या नहीं में एक मांगपत्र का कारण होता है? DropDownList एकाधिक HTML नियंत्रण प्रदान करता है, और इसे प्रस्तुत करने के वांछित तरीके को निर्धारित करने के लिए कोई रास्ता नहीं है: क्या इसे पहले नियंत्रण के समान स्तर पर इंडेंट करना चाहिए? क्या इसे अंतर-तत्व अंतर के साथ प्रस्तुत करना चाहिए? एक व्यावहारिक दृष्टिकोण से, क्लाइंट को भेजे जाने वाले डेटा की मात्रा को कम करने के लिए किसी भी अंतर के साथ प्रस्तुत करना अधिक सक्षम नहीं है (जो कि अधिकांश नियंत्रण करता है)।

अंत में, सरल मामलों में भी, जब आप किसी ब्राउज़र से "स्रोत देखें" वास्तविक प्रतिनिधित्व ब्राउज़र के बीच अलग होंगे। वे सभी स्पेसिंग, लाइन ब्रेक, इंडेंटेशन को किसी भी तरह से चुनने के लिए चुन सकते हैं, क्योंकि अंतर-तत्व अंतर किसी भी तरह से प्रतिपादन को प्रभावित नहीं करता है।

यदि आप अपनी वेबसाइट पर "पहले/बाद" उदाहरण दिखा रहे हैं तो आपको वास्तव में प्रेजेंटेशन के आउटपुट को मैन्युअल रूप से प्रारूपित करने के अलावा बहुत अधिक विकल्प नहीं है, यदि यह वही है जो आप चाहते हैं। अगर लोग स्रोत को भी देखना चाहते हैं, तो यह ठीक है, लेकिन स्रोत को लगातार आपके मार्कअप के रूप में उतना अच्छा दिखाना बहुत चुनौतीपूर्ण होगा।

यह वास्तव में आप के लिए महत्वपूर्ण था, तो आप उत्पादन धारा को बीच में रोकने सकता है और ग्राहक को भेजने से पहले उसे पुन: प्रारूपित, लेकिन यह सीधे asp.net का प्रतिपादन इंजन से नहीं होगा। ऐसा करने के उदाहरण के लिए, Google "asp.net प्रतिक्रिया फ़िल्टर" - here's one. मुझे यकीन है कि HTML को प्रारूपित करना मुश्किल नहीं है जो आप इस अवधारणा पर लागू कर सकते हैं।

Answer 3

एएसपी.नेट वेबफॉर्म एचटीएमएल प्रतिपादन और नियंत्रण मार्कअप को .NET 4 में सुधार किया गया है।0 और इससे एचटीएमएल तत्वों की नियंत्रण आईडी और संरचना में मदद मिलेगी (जैसा कि आपके प्रश्न में Rob Stone's answer में उल्लिखित है)। हालांकि, इंडेंट्स और लाइन ब्रेक अभी भी आपकी जरूरतों के लिए वांछनीय से कम हो सकते हैं।

तो HTML स्रोत सही मायने में आपके आवेदन के लिए उपयोगकर्ता अनुभव का हिस्सा है, आप एक HttpModuleReleaseRequestState घटना से जुड़ी लिखने पर विचार हो सकता है। यह दृष्टिकोण आपके एचटीएमएल स्रोत के वास्तविक लाइन ब्रेक और इंडेंटेशन को संबोधित करेगा। avoid re-inventing the wheel आप प्रतिक्रिया पर अपने कस्टम फ़िल्टर के हिस्से के रूप में .NET port of HTML Tidy या .NET Wrapper for HTML Tidy का उपयोग कर सकते हैं।

this blog में एक HttpModule में कस्टम फ़िल्टर कैसे लिख सकता है इसका एक अच्छा उदाहरण है। कोड है कि मैं सबसे अधिक उपयोगी पाया की धारा इस प्रकार है (कुछ संपादित लेकिन आप ब्लॉग से ही पूरी समझ प्राप्त कर सकते हैं) के रूप में है:

public class CustomModule : IHttpModule 
{ 
    public void Init(HttpApplication context) 
    { 
    context.ReleaseRequestState += new EventHandler(context_ReleaseRequestState); 
    } 

    private void context_ReleaseRequestState(object sender, EventArgs e) 
    { 
    HttpResponse response = HttpContext.Current.Response; 
    if (string.Compare(response.ContentType,"text/html",true) == 0) 
    { 
     response.Filter = new CustomFilter(response.Filter,response.ContentEncoding); 
    } 
    } 
} 

और अपने CustomFilter वर्ग के अंदर ...

public override void Write(byte[] buffer, int offset, int count) 
{ 
    sb = new StringBuilder(count + 1024); 
    sb.Append(enc.GetString(buffer,offset,count)); 

    // <---- Run the sb content through HTML Tidy here ----> 

    byte[] buff = enc.GetBytes(sb.ToString()); 
    s.Write(buff,0,buff.Length); 
    } 
} 

Answer 4

यहां पार्टी के लिए देर हो गई, लेकिन मुझे एक जैसी समस्या का सामना करना पड़ा। हम कुछ जटिल जटिल जावास्क्रिप्ट उत्पन्न कर रहे थे जो कि मार्कअप के बाकी हिस्सों के साथ झुका हुआ सभी के साथ उचित रूप से डीबग करने के लिए बहुत उलझन में था। तो मैं इस कक्षा के साथ आया था।

public class HtmlPrettyControl : HtmlGenericControl 
{ 
    public bool Indent { get; set; } 

    public HtmlPrettyControl(string tag) : this(tag, true) { } 

    public HtmlPrettyControl(string tag, bool indent) : base(tag) 
    { 
     Indent = indent; 
    } 

    protected override void Render(HtmlTextWriter writer) 
    { 
     // Here you can check if you are running against a production environment 
     // and just do base.Render to prevent extra code execution and space in 
     // your response to the client 

     if (Indent) 
     { 
      RenderBeginTag(writer); 
      writer.WriteLine(); 
      writer.Indent++; 
      base.RenderChildren(writer); 
      writer.WriteLine(); 
      writer.Indent--; 
      RenderEndTag(writer); 
     } 
     else 
     { 
      base.Render(writer); 
     } 
     writer.WriteLine(); 
    } 
} 

प्रयोग उदाहरण:

<div> 
    <label>I'm sorry, Dave.</label> 
<div> 

हम एक समान का उपयोग नियंत्रण होता है जो साधारण HTML टैग्स नहीं हैं के लिए विधि ओवरराइड प्रस्तुत (एक अलग आधार वर्ग में:

var myDiv = new HtmlPrettyControl("div"); 
var myLabel = new HtmlPrettyControl("label", false); 
myLabel.InnerText = "I'm sorry, Dave."; 
myDiv.Controls.Add(myLabel) 

मार्कअप उत्पन्न करता है/विरासत श्रृंखला)। केवल नकारात्मक पक्ष यह है कि writerRender विधि को पास किया गया है, यह आपके एसीएक्स के वर्तमान इंडेंटेशन स्तर के बारे में सूचित नहीं होता है कि आपका नियंत्रण (यदि कोई है) पर रहता है। इसलिए जब नियंत्रण और उसके बच्चों का पदानुक्रम अच्छी तरह से इंडेंट और टूटा हुआ है, तो वे आपके एसीएक्स या एएसपीएक्स लेआउट फाइलों पर चारों ओर मार्कअप से कुल प्रवाह को तोड़ने, 0 के इंडेंटेशन स्तर पर रीसेट कर देंगे।