ASP.NET控制項開發之“代碼緊湊原則”

來源:互聯網
上載者:User
asp.net|控制項|控制項開發    我們知道製作一個控制項,一般比只實現同樣功能的模組要複雜,因為我們需要考慮更多的異常和適應性,才能達到我們整合和複用代碼的效果。而當我們開發一個ASP.NET控制項時,不管我們的控制項有多麼複雜的功能和UI表現,我們最終在用戶端瀏覽器裡得到的都只是HTML代碼和指令碼的組合。

    而就是這些控制項產生的HTML代碼,它們的格式是不是就可以隨意處理呢。那麼不能隨意又是什麼意思?難道我們必須要保證HTML代碼的排版,並保持HTML良好的層次縮排什麼的嗎?這裡剛剛相反,我們因該盡量去掉和控制項HTML代碼沒有關係的任何東西,包括"無用的"空格和斷行符號。為什麼要強調無用的呢?我們知道瀏覽器在處理HTML原始碼時,對於其中連續的空格和斷行符號,都是按一個空格來處理並顯示的。所以,似乎我們並不用在意ASP.NET控制項在Render時,HTML代碼前後或中間多出的無用空格或斷行符號。那麼我們來看一下下面這個樣本: <img id="analysisChart" src="ChartPic_000007.jpeg?B9FA64E7-2020-4430-AAF4-B20A51794909" usemap="#usemap_analysisChart">
<map id="usemap_analysisChart">
    <area>...<area>
</map>
'www.knowsky.com
    上面這個代碼片斷是Dundas Web Controls中的Web Chart控制項輸出的HTML代碼。這個帶有hot area的Chart圖片在使用時似乎沒有什麼問題,如果就是普通的單獨使用這個Chart,確實是沒有問題。可是當我們把Dundas Chart組合到自訂的WebControl中時,它這種帶有換行和縮排的HTML代碼就帶來問題了。由於布局的需要,我需要把這個Chart放入一個表格之中,並讓表格顯示一個像素的border緊密包圍Chart。本來這個Chart的外觀就只是一個圖片而已,這樣的組合似乎應該沒有任何問題,可實際情況是那個Chart的圖片始終不能撐滿外面的表格(如下圖),而在圖片底部和表格底邊上總是有3-4個像素的間隙。而這個間隙就是由於<img />和<map>之間有空格和換行(雖然IE只當它是一個空格)造成的。
    

Chart Image

    由於Dundas Web Chart是發布的已經編譯好的dll,所以要刪除它輸出的HTML中無用的空格和斷行符號就變的比較麻煩了。我們只能從它的Render流中把HTML代碼取出,然後手動的去掉tags之間的空格和斷行符號,再輸出到新控制項的輸出資料流中去。這樣的方法雖然可以解決一部分問題,可是如果遇到內部控制項過於複雜,這時不管在正確性還是效率上就都是額外的負擔。

    所以從上面的問題我們看出,當我們製作一個ASP.NET控制項時,因該讓最後呈現的HTML代碼遵循"代碼緊湊原則",以提高控制項的適應性。在這樣的原則下先前那個樣本就應該這樣:
<img id="analysisChart" src="ChartPic_000007.jpeg?B9FA64E7-2020-4430-AAF4-B20A51794909" usemap="#usemap_analysisChart"><map id="usemap_analysisChart"><area>...<area></map>
    這樣一來Chart圖片就和包圍它的表格邊框緊密挨在一起了。



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。