# 超完美組合：LinqDataSource + ListView + DataPager + jQuery

網站的前台套版，使用 [ListView](http://msdn2.microsoft.com/zh-tw/library/system.web.ui.webcontrols.listview.aspx "ListView 類別") + [LinqDataSource](http://msdn2.microsoft.com/zh-tw/library/system.web.ui.webcontrols.linqdatasource.aspx "LinqDataSource 類別") 真的是超強的啦！網頁程式碼的數量精簡到不行，大部分的情況是一點程式都不用寫的，甚至於可以用一個 LinqDataSource 套出「兩層」的 ListView。

例如以下的例子就是透過一個 LinqDataSource 直接套出兩層的 ListView，真的很漂亮。

```
<asp:LinqDataSource ID="LinqDataSource1" runat="server" ContextTypeName="MyDataContext"
  TableName="ProductCategory"
  Select="new (ID,Name,Image,ProductCategory_Child)">
</asp:LinqDataSource>
<asp:ListView ID="ListView1" runat="server" DataSourceID="LinqDataSource1" ItemPlaceholderID="item">
  <LayoutTemplate>
    <ul>
      <li runat="server" id="item"></li>
    </ul>
  </LayoutTemplate>
  <ItemTemplate>
    <li>
      <a href="ProductCatetory.aspx?id=<%#Eval("ID")%>"><%#Eval("Name")%></a>
      <asp:ListView ID="ListView2" runat="server" 
        DataSource='<%# Eval("ProductCategory_Child") %>'
        ItemPlaceholderID="item">
        <LayoutTemplate>
          <ul>
            <li runat="server" id="item"></li>
          </ul>
        </LayoutTemplate>
        <ItemTemplate>
          <li><a href="Product.aspx?id=<%#Eval("ID")%>"><%#Eval("ProductName")%></a>
        </ItemTemplate>
      </asp:ListView>
    </li>
  </ItemTemplate>
</asp:ListView>
```

但是要能透用這種方式套版有兩點要注意：

1.  必須先在 DBML ( Linq to SQL Class ) 中設定關連( Association ) 才可以使用。
    
2.  在 LinqDataSource 中必須明確的宣告 Select 屬性中的關連欄位名稱。
    

而針對一些頁面上的 UI 互動或細節的調校可以用 [jQuery](http://jquery.com/ "jQuery") 來處理，學會 jQuery 可以節省你不少時間。

例如說兩層子選單的第二層選單顯示與否，就可以透過 jQuery 來設定是否展開，完全不需要在 ASP.NET 中寫的死去活來的。

```
$(function()
{
    $('ul.item_model a').each(function(i)
    {
        if(this.href.indexOf('<%=Request.QueryString["id"]%>') > 0)
        {
            $(this).addClass("active");
            
            if($(this).parent().parent().attr('class') == 'item_model_list')
            {
                $(this).parent().parent().show();
            }
            
            if($(this).next().attr('class') == 'item_model_list')
            {
                $(this).next().show();
            }
        }
    });
});
```

如果要用分頁的話，就使用 ListView + DataPager 來處理，整個網頁套版的動作十分的直覺。

**相關連結**

-   The asp:ListView control (Part 1 - Building a Product Listing Page with Clean CSS UI)  
    [https://weblogs.asp.net/scottgu/the-asp-listview-control-part-1-building-a-product-listing-page-with-clean-css-ui](https://weblogs.asp.net/scottgu/the-asp-listview-control-part-1-building-a-product-listing-page-with-clean-css-ui)  
      
     
    
-   Using ASP.NET 3.5's ListView and DataPager Controls: Sorting Data with the ListView Control  
    http://aspnet.4guysfromrolla.com/articles/011608-1.aspx  
      
    
-   ListView and DataPager in ASP.NET 3.5  
    [https://web.archive.org/web/20130918021751/http://www.west-wind.com:80/WebLog/posts/127340.aspx](https://web.archive.org/web/20130918021751/http://www.west-wind.com:80/WebLog/posts/127340.aspx)  
      
     
    
-   Paging Through Data with the ASP.NET 3.5 ListView and DataPager Controls  
    http://aspnet.4guysfromrolla.com/articles/021308-1.aspx  
      
    
-   Building a Grouping Grid with the ASP.NET 3.5 LinqDataSource and ListView Controls ( 推薦啦 )  
    http://mattberseth.com/blog/2008/01/building\_a\_grouping\_grid\_with.html  
      
    
-   Some ASP.NET 3.5 ListView Control Examples  
    [http://blogs.msdn.com/mikeormond/archive/2008/01/23/some-asp-net-3-5-listview-control-examples.aspx](http://blogs.msdn.com/mikeormond/archive/2008/01/23/some-asp-net-3-5-listview-control-examples.aspx)  
      
    
-   ASP.NET 3.5 的 ListView 控件与 CSS Friendly  
    [http://www.cnblogs.com/cathsfz/archive/2007/08/22/864797.html](http://www.cnblogs.com/cathsfz/archive/2007/08/22/864797.html)  
      
    
-   jQuery 官方網站  
    [http://jquery.com/](http://jquery.com/)  
      
    
-   jQuery 教學 (中文的喔)  
    [http://jsgears.com/thread-63-1-1.html](http://jsgears.com/thread-63-1-1.html)