The Will Will Web

記載著 Will 在網路世界的學習心得與技術分享

超完美組合:LinqDataSource + ListView + DataPager + jQuery

網站的前台套版,使用 ListView + 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 來處理,學會 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 來處理,整個網頁套版的動作十分的直覺。

相關連結