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

男娘i 2021-11-01 15:36 135阅读 0赞

**超完美組合：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">

<ul>

</ul>

</LayoutTemplate>

<li>

<asp:ListView ID="ListView2" runat="server"

DataSource='<%\# Eval("ProductCategory\_Child") %>'

ItemPlaceholderID="item">

<ul>

</ul>

</LayoutTemplate>

</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 来处理，整个网页套版的动作十分的直觉。

**相关连结**

![\*][PicExportError]       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][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]

![\*][PicExportError]       Using ASP.NET 3.5's ListView and DataPager Controls: Sorting Data with the ListView Control   
[http://aspnet.4guysfromrolla.com/articles/011608-1.aspx][http_aspnet.4guysfromrolla.com_articles_011608-1.aspx]

![\*][PicExportError]       ListView and DataPager in ASP.NET 3.5  
[http://www.west-wind.com/WebLog/posts/127340.aspx][http_www.west-wind.com_WebLog_posts_127340.aspx]

![\*][PicExportError]       Paging Through Data with the ASP.NET 3.5 ListView and DataPager Controls  
[http://aspnet.4guysfromrolla.com/articles/021308-1.aspx][http_aspnet.4guysfromrolla.com_articles_021308-1.aspx]

![\*][PicExportError]       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][http_mattberseth.com_blog_2008_01_building_a_grouping_grid_with.html]

![\*][PicExportError]       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]

![\*][PicExportError]       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]

![\*][PicExportError]       jQuery 官方网站  
[http://jquery.com/][jQuery]

![\*][PicExportError]       jQuery 教学 (中文的喔)  
[http://jsgears.com/thread-63-1-1.html][http_jsgears.com_thread-63-1-1.html]

此文章由 will 發表於 2008/3/17 上午 12:01:00

转载于:https://www.cnblogs.com/elock/archive/2009/09/07/1562106.html

[ListView]: http://msdn2.microsoft.com/zh-tw/library/system.web.ui.webcontrols.listview.aspx
[LinqDataSource]: http://msdn2.microsoft.com/zh-tw/library/system.web.ui.webcontrols.linqdatasource.aspx
[jQuery]: http://jquery.com/
[PicExportError]: /images/20211101/37d15f4baa184431951d48d39b900788.png
[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]: 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
[http_aspnet.4guysfromrolla.com_articles_011608-1.aspx]: http://aspnet.4guysfromrolla.com/articles/011608-1.aspx
[http_www.west-wind.com_WebLog_posts_127340.aspx]: http://www.west-wind.com/WebLog/posts/127340.aspx
[http_aspnet.4guysfromrolla.com_articles_021308-1.aspx]: http://aspnet.4guysfromrolla.com/articles/021308-1.aspx
[http_mattberseth.com_blog_2008_01_building_a_grouping_grid_with.html]: http://mattberseth.com/blog/2008/01/building_a_grouping_grid_with.html
[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
[http_www.cnblogs.com_cathsfz_archive_2007_08_22_864797.html]: http://www.cnblogs.com/cathsfz/archive/2007/08/22/864797.html
[http_jsgears.com_thread-63-1-1.html]: http://jsgears.com/thread-63-1-1.html