網站的前台套版，使用 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>但是要能透用這種方式套版有兩點要注意：
-
必須先在 DBML ( Linq to SQL Class ) 中設定關連( Association ) 才可以使用。
-
在 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 來處理，整個網頁套版的動作十分的直覺。
相關連結