這篇文章主要講解了“如何利用ASP.NET和AJAX解決手工拼接HTML問題”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“如何利用ASP.NET和AJAX解決手工拼接HTML問題”吧！

創(chuàng)新互聯(lián)長期為上千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺(tái)，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為寧陽企業(yè)提供專業(yè)的網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)，寧陽網(wǎng)站改版等技術(shù)服務(wù)。擁有十余年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

Sys.UI.DataView

為了解決展示數(shù)據(jù)的問題，我們需要用到一個(gè)全新的客戶端控件，那就是Sys.UI.DataView了，簡稱DataView。我們會(huì)用DataView替換掉上一篇文章中所說到的人手拼接HTML的部分，用于迭代生成一個(gè)ul中的li元素，因此看起來是把DataView當(dāng)作Repeater來用。實(shí)際上，DataView的功能類似于ListView加上DetailsView。

如果你把一個(gè)Array綁定到DataView上，它會(huì)顯示為一個(gè)ListView。與ListView的LayoutTemplate相類似的是，它也能夠定義控件展示的整體布局，并且僅僅是迭代輸出其中的一小部分。例如說，編寫一個(gè)有thead的table，并且僅僅是迭代輸出thead之后的tr。在這方面，是DataView和ListView完全一致的。***不同的是，客戶端暫時(shí)還沒有DataPager這樣的控件，所以DataView必須一次性的完整顯示整個(gè)Array的數(shù)據(jù)。

如果你把單個(gè)Object綁定到DataView上，它就會(huì)顯示為一個(gè)DetailsView。這使得你可以使用兩個(gè)DetailsView就做出經(jīng)典的Master-Details展示模式，和在服務(wù)器端分別用ListView和DetailsView做出來的一樣。當(dāng)然，你不能指望DataView能夠好像DetailsView那樣，自動(dòng)幫你分析每一個(gè)數(shù)據(jù)項(xiàng)并映射出對應(yīng)的HTML模板，因此HTML模板還是要你自己手寫的，但至少那是在HTML中編寫模板，編寫時(shí)能夠享受IDE帶來的各種好處，維護(hù)時(shí)也更容易看懂自己（或別人）原來寫下的HTML。

JavaScript語法

接下來，我們就要把DataView投入到實(shí)際應(yīng)用中去了。首先，我們說一下如何用JavaScript來實(shí)例化一個(gè)DataView。有編寫ASP.NET AJAX客戶端代碼經(jīng)驗(yàn)的人對$create應(yīng)該不會(huì)覺得陌生，因?yàn)镈ataView繼承自Sys.UI.Control，我們?nèi)匀豢梢杂?create來實(shí)例化它。不過，在此之前，我們先要把對應(yīng)的HTML編寫好：

{{ Award }}
{{ Winner }}
{{ Film }}

然后我們就可以基于itemTemplate這個(gè)HTML元素創(chuàng)建控件了：

$create(Sys.UI.DataView, {
dataSource: new Sys.Data.AdoDataSource(),
serviceUri: "WebDataService.svc",
query: "OscarWinners"
}, {}, {}, $get("itemTemplate"));

現(xiàn)在，頁面顯示出來的結(jié)果和之前我們?nèi)耸制唇親TML的版本完全一致，不過我們已經(jīng)不在需要維護(hù)嵌入在JavaScript中的HTML代碼了。

聲明性語法

如果你覺得上面的做法還不夠好，要在pageLoad()里面寫一個(gè)$create，那么聲明性語法可能正是你需要的。大家應(yīng)該記得很久很久之前，在ASP.NET AJAX還叫做Atlas的時(shí)候，就已經(jīng)有過聲明性語法的設(shè)計(jì)，那就是xml-script。不知為何，后來Microsoft放棄了這一設(shè)計(jì)，現(xiàn)在聲明性語法又回來了，而且設(shè)計(jì)得比以前的xml-script還要更好。假如不用$create的話，通過聲明性語法實(shí)例化一個(gè)DataView僅需要這樣做：

xmlns:sys="javascript:Sys"
xmlns:dataView="javascript:Sys.UI.DataView"
sys:activate="*">
sys:attach="dataView"
dataView:datasource="{{ new Sys.Data.AdoNetDataSource() }}"
dataView:serviceuri="WebDataService.svc"
dataView:query="OscarWinners">

{{ Award }}
{{ Winner }}
{{ Film }}

我們所需要更改的代碼包括：在body元素上聲明有關(guān)的xmlns，將JavaScript中的名字空間映射到HTML上，或者你可以理解為映射到XML/XHTML上。

通過sys:activate="*"這個(gè)聲明，讓ASP.NET AJAX知道它需要去解釋頁面上所有的聲明性語法，并激活對應(yīng)的組件.將原本使用$create初始化時(shí)傳遞給實(shí)例的屬性、事件、引用改為用聲明性語法，直接寫在HTML元素的定義上.經(jīng)過這三步，我們就可以將原來使用$create創(chuàng)建的組件改為使用聲明性語法創(chuàng)建了。

小結(jié)

DataView使得我們能夠使用HTML模板，來避免手工拼接HTML帶來的種種問題，同時(shí)聲明性語法讓我們能夠如同聲明服務(wù)器端控件一樣聲明客戶端組件。雖然在ASP.NET AJAX 4.0 Preview 3中這些功能仍有小bug，例如我想用聲明性語法創(chuàng)建我自己編寫的InPlaceEditoBehavior，這在初始化階段毫無問題，但卻會(huì)在頁面卸載銷毀對象之時(shí)拋出腳本錯(cuò)誤。

由于我覺得ASP.NET AJAX 4.0 Preview 4很快就要出來了，所以我也就不準(zhǔn)備去深入研究Preview 3了，等Preview 4出來了再去好好看看源代碼。

感謝各位的閱讀，以上就是“如何利用ASP.NET和AJAX解決手工拼接HTML問題”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對如何利用ASP.NET和AJAX解決手工拼接HTML問題這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！