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

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