热门搜索:   ASP.Net教程   前端开发   etl 工具   sql server 2008   .net 3.5   c#教程   SEO优化   visual studio 2010   ASP.Net 4.0教程   网站安全   ASP.Net MVC 入门视频教程   silverlight 教程   dhl   网站模板-dhl快递
ASP.Net教程
欢迎光临Elock Wong的博客。ASP.Net教程,为您开启WEB编程之门!从基础知识到实例教程,从PDF文档到视频教程,循序渐进地引导大家步入ASP.Net的殿堂。众多的面试题、源码资料、软件下载;近期还推出Ajax 、MVC 和CMS系统教程。相信教程的力量!


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

 

posted on 2009-09-07 20:40  ASP.Net 4.0教程  阅读(805)  评论(0编辑  收藏  举报

Loading
DHL新闻,将对中国至美国航线DHL,在春节期间DHL中文主页可以办理快递吗,DHL公益关注贫困地区青少年教育,问题DHL装备环保,发动机DHL在中国,内陆DHL网站图片举例,说明代理报关DHL等,知名快递DHL的客服,电话DHL门店
回到顶部