超完美組合：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 来处理，整个网页套版的动作十分的直觉。
相关连结
The asp:ListView control (Part 1 - Building a Product Listing Page with Clean CSS UI)
http://weblogs.asp.net/scottgu/archive/2007/08/10/the-asp-listview-control-part-1-building-a-product-listing-page-with-clean-css-ui.aspx
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
http://www.west-wind.com/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
ASP.NET 3.5 的 ListView 控件与 CSS Friendly
http://www.cnblogs.com/cathsfz/archive/2007/08/22/864797.html
jQuery 官方网站
http://jquery.com/
jQuery 教学 (中文的喔)
http://jsgears.com/thread-63-1-1.html
此文章由 will 發表於 2008/3/17 上午 12:01:00