65.9K
CodeProject 正在变化。 阅读更多。
Home

ASP.NET 3.5 新功能实践应用示例

Mike Borozdin
starIconstarIconstarIcon
emptyStarIcon
starIcon
emptyStarIcon

3.38/5 (16投票s)

2008年7月22日

CPOL

5分钟阅读

viewsIcon

69769

downloadIcon

372

关于使用 LINQ、ListView、LinqDataSource、DataPager、ASP.NET AJAX 的教程


引言

本教程不涵盖新功能和控件的理论基础，而是侧重于新功能的使用实践。本教程涵盖以下功能：

  • LINQ（语言集成查询）用于数据操作
  • ListView 控件用于呈现数据
  • LinqDataSource 用于绑定数据
  • DataPager 用于分页
  • ASP.NET AJAX 用于消除不必要的页面重新加载

要求

  • Visual Studio 2008
  • SQL Server

项目

我们的项目非常简单，就是一个留言簿，但它非常适合演示 ASP.NET 3.5 和 .NET 3.5 的酷炫功能。

guestbook.png

所以，请打开 Visual Studio 并创建一个新的 C# 网站。

数据库设计

我们需要创建一个数据库来存储评论。我们将创建一个只有一张表的数据库，用于保存作者发布的评论。我们可以在不离开 Visual Studio 的情况下，在服务器资源管理器中创建它。

tableCommentsDesign1.png

别忘了将 Id 字段设置为标识符。

我们还应该填充数据库，以便有一些数据可供显示，只需执行这些查询即可。

INSERT INTO Comments
(Author, Text)
VALUES('John', 'ASP.NET 3.5 rocks!');

INSERT INTO Comments
(Author, Text)
VALUES('Mary', 'ASP.NET 3.5 is so cool!');

LINQ

接下来，我们需要创建一个 LINQ To SQL 类，用于数据操作（检索和插入）。我们打开 网站 -> 添加新项 并选择 LINQ To SQL 类。

addNewItem.png

然后我们打开 服务器资源管理器 并将我们的表拖放到工作区。

linqToSqlDesign.png

现在我们只需保存此文件并继续，我们可以查看生成的代码，它位于 App_Code\Comments.dbml\Comments.designer.cs 。

LinqDataSource

好了，是时候创建包含所有内容的 webform 了。实际上，它已经由 Visual Studio 创建了，我们只需要在其中添加一些内容。
我们将从数据源开始，打开工具箱，展开数据部分，找到 LinqDataSource。

toolbox.png

将其拖到 webform 上。您将获得以下代码：

<asp:LinqDataSource ID="LinqDataSource1" runat="server">
</asp:LinqDataSource>

给它一个更合适的名字，比如 dsComments。现在切换到 设计视图，单击刚刚添加的 LinqDataSource 并选择 配置数据源。

configureDataSource.png

选择唯一可用的数据上下文对象，然后单击“下一步”。

chooseDataContext.png

然后，通过单击 Order By 按钮，将所有内容保留为默认值。并选择 Id 和 降序。

orderBy.png

单击“确定”并完成，切换到“源视图”并查看我们获得的代码。

<asp:LinqDataSource ID="dsComments" runat="server"
    ContextTypeName="CommentsDataContext" EnableInsert="True" OrderBy="Id desc"
    TableName="Comments">
</asp:LinqDataSource>

可以说非常简单。

ListView

是时候添加 ListView 控件了。这是一个新的数据绑定控件，它使您能够完全控制渲染的 HTML 代码。它也位于工具箱的数据部分。将其拖放并重命名为 lvComments，别忘了为其分配数据源。您应该会得到以下代码：

<asp:ListView ID="lvComments" runat="server" DataSourceID="dsComments">
</asp:ListView>


然后，我们需要添加 <LayoutTemplate>，它将是根模板。

<asp:ListView ID="lvComments" runat="server" DataSourceID="dsComments">
    <LayoutTemplate>
        <h1>ASP.NET Guestbook</h1>
        <div id="itemPlaceholder" runat="server"></div>
    </LayoutTemplate>
</asp:ListView>

请注意，我们有一个带有 id="itemPlaceholder" runat="server" 的 div 标签。它们表示 ListView 内容将放置在该 div 的位置，itemPlaceholder 是内容占位符的默认 ID。

要显示我们的数据，我们应该添加 <ItemTemplate> 元素并在其中放置一些内容。

<ItemTemplate>
    <div>
        <b><%# Eval("Author") %></b> says<br />
        <%# Eval("Text") %>
    </div>
</ItemTemplate>


如果您使用过其他数据绑定控件，这很简单，没有什么新的。让我们添加分隔符元素来分隔帖子。

<ItemSeparatorTemplate>
    <hr />
</ItemSeparatorTemplate>


编译网站，您应该会看到一个非常简单的网页，其中只有我们在最开始添加的两条评论，来自 Mary 和 John。这很酷，但是如何启用用户发布评论呢？这也可以通过使用 LinqDataSource 和 ListView 来完成。

首先，向 LinqDataSource 添加 EnableInsert="True" 属性。其次，我们需要向 ListView 添加 insert item template。

<InsertItemTemplate>
    Name:<br />
    <asp:TextBox ID="txtBox" runat="server" Text='<%# Bind("Author") %>' /><br />
    Text:<br />
    <asp:TextBox ID="txtText" runat="server" Text='<%# Bind("Text") %>'
        TextMode="MultiLine" /><br />
    <asp:Button runat="server" CommandName="Insert" Text="Post" /><br />
</InsertItemTemplate>


请注意两点——输入控件中的数据绑定以及按钮中的 CommandName 属性。如果您现在编译网站，将看不到帖子表单，因为您应该先定义它的位置。要做到这一点，请向 ListView 属性添加 InsertItemPosition="FirstItem"，您也可以将其设置为 LastItem。

现在编译项目并尝试发布一些评论。它正在工作，这很好。

DataPager

是时候添加分页并查看另一个新控件的实际应用了。它叫做 DataPager。将以下代码添加到 ListView 的 LayoutTemlate 中。

<asp:DataPager runat="server" PagedControlID="lvComments" PageSize="5">
    <Fields>
        <asp:NumericPagerField />
    </Fields>
</asp:DataPager>

我猜这是不言而喻的，PagedControlID 定义了我们要分页的控件，PageSize 设置了每页的条目数。<asp:NumericPagerField /> 表示我们想要一个页码列表。编译并尝试在浏览器中运行它。

我想您注意到它的 URL 中有一个丑陋的 postback。您可以通过向 DataPager 添加 QueryStringField 属性并当然要设置其值来轻松摆脱它 ;-)。

<asp:DataPager runat="server" PagedControlID="lvComments" PageSize="5" 
                    QueryStringField="page">

现在看起来好多了，您可以将留言簿第 10 页的链接发送给朋友了。

ASP.NET AJAX

在最后阶段，让我们添加一些 AJAX，这样在每次发布评论时页面就不会重新加载。


Visual Studio 2008 内置了 ASP.NET AJAX 库，非常易于使用。
打开工具箱，展开 AJAX 扩展并将其 ScriptManager 拖到页面上。ScriptManager 是一个控件，它加载 ASP.NET AJAX 所需的所有 JavaScript 库。如果您忘记添加 ScriptManager，将会收到错误。


所以，我们不希望在发布评论时更新整个页面，我们只想更新我们的 ListView，因此我们将 ListView 包裹在 UpdatePanel 中。

<asp:UpdatePanel runat="server">
    <ContentTemplate>
        <% List View code %>
    </ContentTemplate>
</asp:UpdatePanel>

关注点

ASP.NET 中有很多很棒的功能可以帮助您使应用程序比 ASP.NET 2.0 快得多。我们已经构建了一个留言簿而无需编写一行 C# 代码。当然，本教程无意涵盖 ASP.NET 3.5 的所有功能，它也没有涵盖基础知识，但您可以在 MSDN 和 ww.asp.net 上找到它们。

© . All rights reserved.