前面有個(gè)例子是使用jQuery的datatable插件來實(shí)現(xiàn)的能夠展開個(gè)詳細(xì)信息表的樣子。事實(shí)上.net的數(shù)據(jù)展示模式很好,如果配上jQuery的那些效果和AJAX功能是相當(dāng)?shù)貌诲e(cuò)?？吹揭粋€(gè)這樣的例子和大家分享下。這個(gè)一直是我想要做到的。

首先先展示下最終的樣子：

使用northwind的數(shù)據(jù)。點(diǎn)擊前面的加號(hào)會(huì)把其它屬于這個(gè)產(chǎn)品的詳細(xì)訂單展示出來,而每個(gè)產(chǎn)品后面都會(huì)有它的訂單個(gè)數(shù)。點(diǎn)擊’+’后的樣子:

先分析下它的實(shí)現(xiàn):

 第一個(gè)圖的顯示是個(gè)Gridview,當(dāng)點(diǎn)擊每條記錄前面的’+’時(shí)會(huì)使用jQuery的ajax功能調(diào)用一個(gè)Web Method,并傳輸一個(gè)當(dāng)前產(chǎn)品的ID進(jìn)去,然后會(huì)定義一個(gè)繼承UserControl的類,它能夠添加一個(gè)ascx文件,然后這個(gè)類里面定義一個(gè)View State的字段。

當(dāng)點(diǎn)擊每個(gè)’+’時(shí)使用jQuery把這個(gè)ascx文件顯示在當(dāng)前產(chǎn)品的下面slideshow(),那么id是如何傳的呢？ 這就用到了View State。

關(guān)于View State的介紹很多的。我也沒怎么用過。這里簡單說明下它和一個(gè)Web Control的關(guān)系:

下面給出大家代碼:

這個(gè)是產(chǎn)品的GridView。

然后是Web Method:

Control類:

CustomerOrder.ascx代碼:

整個(gè)調(diào)用Web Method的ajax代碼:

• ajax
• jquery