偷偷摘套内射激情视频,久久精品99国产国产精,中文字幕无线乱码人妻,中文在线中文a,性爽19p

利用ASP.NET和AJAX解決手工拼接HTML問(wèn)題

作者：Cat Chen
開(kāi)發(fā) 后端
ADO.NET Data Service Client Library能夠輕松訪問(wèn)到存在服務(wù)器端的數(shù)據(jù)，然而將數(shù)據(jù)展現(xiàn)出來(lái)仍需要人手拼接HTML這點(diǎn)就實(shí)在是讓人難以接受，所以我們現(xiàn)在就來(lái)看看如何利用ASP.NET AJAX Template解決這個(gè)問(wèn)題。

Sys.UI.DataView

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

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

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

JavaScript語(yǔ)法

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

<ul id="itemTemplate" class="sysTemplate">
  <li>
    <span class="award">{{ Award }}</span>
    <span class="winner">{{ Winner }}</span>
    <span class="film">{{ Film }}</span>
  </li>
</ul>

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

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

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

聲明性語(yǔ)法

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

 <body
  xmlns:sys="javascript:Sys"
  xmlns:dataView="javascript:Sys.UI.DataView"
  sys:activate="*">
  <ul id="itemTemplate" class="sysTemplate"
    sys:attach="dataView"
    dataView:datasource="{{ new Sys.Data.AdoNetDataSource() }}"
    dataView:serviceuri="WebDataService.svc"
    dataView:query="OscarWinners">
    <li>
      <span class="award">{{ Award }}</span>
      <span class="winner">{{ Winner }}</span>
      <span class="film">{{ Film }}</span>
    </li>
  </ul>
</body>

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

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

小結(jié)

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

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

原文鏈接：http://www.cnblogs.com/cathsfz/archive/2009/03/14/1411312.html

【編輯推薦】

  1. 詳解ADO.NET客戶(hù)端開(kāi)發(fā)數(shù)據(jù)驅(qū)動(dòng)的應(yīng)用程序
  2. 詳解Ajax在ASP.NET中的實(shí)現(xiàn)方式
  3. ASP.NET開(kāi)發(fā)教程
責(zé)任編輯：彭凡 來(lái)源： <a href="http://cathsfz.cnblogs.com/">cathsfz.c..
TemplateAJAXASP.NET
相關(guān)推薦

2009-07-23 10:06:29

2009-07-22 16:11:43

ASP.NET AJA

2009-07-22 16:17:39

ASP.NET AJA

2009-07-22 16:25:41

ASP.NET AJA

2009-07-24 13:41:15

ASP.NET AJA

2009-07-22 16:05:34

ASP.NET AJA

2009-07-22 15:58:52

ASP.NET AJA

2009-07-31 13:24:43

ASP.NET AJA

2009-07-29 13:50:26

UpdatePanelASP.NET

2009-07-20 10:16:13

配置ASP.NET A

2009-07-28 09:02:32

asp.net aja

2009-07-28 12:35:37

querystring

2009-07-21 17:18:26

UpdateProgrASP.NET AJA

2009-07-29 15:53:22

ASP.NET AJA

2009-07-20 13:14:25

安裝ASP.NET A

2009-07-20 17:39:36

WCF服務(wù)ASP.NET AJA

2009-08-07 16:09:25

ASP.NET AJA

2009-07-20 13:54:31

ScriptManagASP.NET AJA

2009-07-28 16:08:43

ASP.NET AJA

2009-07-27 12:22:03

ASP.NET和ASPASP.NET入門(mén)教程
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)