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

让 Script.aculo.us 拖放与 ASP.NET 协同工作！

TimMadeThat
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.90/5 (10投票s)

2007年9月2日

CPOL

4分钟阅读

viewsIcon

47620

downloadIcon

244

一步一步地讲解如何在 ASP.NET 中使用 Script.aculo.us 库进行拖放。

背景

既然 ASP.NET 有 Atlas、Anthem 等，我为什么要费力做这个呢？

我与许多热爱 Ruby On Rails 的设计师合作，ROR 的一个特性是集成了 script.aculo.us 库。我必须承认，一些内置的动画效果确实很棒。因此，我为 ASP.NET 构建了一些控件。我发现有无数篇关于 PHP 的文章，但关于 ASP.NET 的却寥寥无几，所以我将改变这一现状。

附带的代码非常简化，以便您理解概念；实际中可能出现许多错误以及数据库问题。我还使用了 Access 作为数据库（我非常讨厌它！），但它似乎是说明我观点的最佳方式。如果出现错误，很可能是因为您的开发计算机上的权限设置。

引言

我决定为本文使用一个简单的概念，第一个想到的就是棒球击球顺序（别问我为什么）。

想象一下，您的球队有几名球员，您想重新排序击球顺序，以便您最好的球员可以领先！这正是本教程将要做的。

使用代码

数据库

Screenshot - database.jpg

再次强调，数据库**非常**简单。我们这里只有唯一的“player_id”、“player_name”、“player_position”和“player_battingorder”。“player_battingorder”是我们将在拖放时重新排序的，“player_id”用于引用，其余的仅用于显示目的。

简单的数据访问

我假设您对 Repeater 和数据库的简单查询有所了解。如果您不了解，建议您先去查阅相关资料！这一切看起来应该都很熟悉，而且相当无聊！我们只是从“Players”表中获取所有球员，并按“player_battingorder”排序。

    Private Function GetBattingOrder()
        Dim ds As New DataTable
        Dim conn As New OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0;" &_
                      "data source=" & Server.MapPath("/Database/DB.mdb"))
        Dim adap As OleDbDataAdapter
        adap = New OleDbDataAdapter("SELECT * FROM Players " &_
                                    "ORDER BY player_battingorder ASC", conn)
        adap.Fill(ds)
        Return ds
    End Function

接下来，让我们创建一个简单的 Repeater 并在页面加载事件中绑定它。我将使用有序列表，以便我们能看到他们的击球顺序。

       <asp:Repeater ID="rptPlayers" runat="server">
            <HeaderTemplate>
                <ol>
            </HeaderTemplate>
            <ItemTemplate>
                <li><%#Eval("player_name")%> - <%#Eval("player_position")%></li> 
            </ItemTemplate>
            <FooterTemplate>
                </ol>
            </FooterTemplate>
        </asp:Repeater>

好的，如果您现在运行您的 Web 应用程序，您只会看到 DB.mdb 中的一个球员列表。我也对此不满意！让我们让它实现拖放功能。

拖放

因此，实现拖放最重要的东西是 script.aculo.us 库。您可以在这里获取，我也将其包含在上面的源代码中。将所有这些文件放入您根目录的“js”文件夹中，并将以下文本添加到 default.aspx 页面的 head 标签内。

<head runat="server">
    <title>Script.acu.lous Test</title>
    <script src="js/prototype.js" type="text/javascript"></script>
    <script src="js/effects.js" type="text/javascript"></script>
    <script src="js/dragdrop.js" type="text/javascript"></script>
</head>

现在，我将展示的其余内容在使用页面中有详细说明，但我将以一种适用于我们代码的快速方式来概括！我们需要在页面主体之前调整以下代码…

<script type="text/javascript" language="javascript">
        Sortable.create("NAME OF LIST/CONTAINER",{tag:'TAG WE ARE DRAGGING',
                        constraint:false,onUpdate:update})
        function update(){
            var options = {
                method : 'post',
                parameters : Sortable.serialize('NAME OF LIST')
            };
            new Ajax.Request('PAGE TO POST TO', options);
        }
</script>

有几点需要注意……您需要为拖放容器设置一个 ID，所以对于我们当前的标题，我们需要在 HeaderTemplate 中为 ol 设置一个 ID。

<HeaderTemplate>
   <ol id="players">
</HeaderTemplate>

您需要知道的另一件事是，在更新函数中，每个项目都需要一个唯一的 ID，以便我们重新保存顺序。它需要一个字段后跟一个下划线，如下所示：“field”_“fieldid”…所以我们的将看起来像“player_player_id”。因此，您将需要将 Repeater 的 ItemTemplate 修改为如下所示：

<ItemTemplate>
    <li id="player_<%#Eval("player_id")%>">

完成后的 Repeater 应该如下所示：

    <asp:Repeater ID="rptPlayers" runat="server">
            <HeaderTemplate>
                <ol id="players">
            </HeaderTemplate>
            <ItemTemplate>
                 <li id="player_<%#Eval("player_id")%>">

现在所有这些都完成了，让我们使用上面的值来修改我之前给您展示的 JavaScript 函数。

    <script type="text/javascript" language="javascript">
        Sortable.create("players",{tag:'li',constraint:false,onUpdate:update})
        function update(){
            var options = {
                method : 'post',
                parameters : Sortable.serialize('players')
            };
            new Ajax.Request('SaveBattingOrder.aspx', options);
        }

    </script>

所以，现在一切都完成了，您可以拖放了，但它没有保存！

之所以会发生这种情况，是因为我们从未创建要发布到的页面。如果您注意到上面的脚本，我使用了名为“SaveBattingOrder.aspx”的页面。所以，让我们创建处理重新排序的页面。您必须知道，Default.aspx 上的 JavaScript 函数以如下格式发送 player_id 列表：“2, 3, 1,4”。我们可以通过以下方式捕获它：

Dim battingorder As String() = Request.Form(0).Split(",")

所以，让我们将所有这些 ID 加载到一个数组中，然后循环遍历每个项。当我们循环遍历每个项时，让我们保存球员的击球顺序位置，并在前一个击球顺序上加一。我将快速跳过其余部分，因为其中大部分是一些简单的数据库更新代码。

Protected Sub Page_Load(ByVal sender As Object, _
                        ByVal e As System.EventArgs) Handles Me.Load
    Dim battingorder As String() = Request.Form(0).Split(",")
    Dim strsql As String = ""
    Dim intorder As Integer = 1

    Dim conn As New OleDbConnection
    conn = openConnection()
    For i As Integer = 0 To battingorder.GetUpperBound(0)
        SaveBattingOrder(conn, "UPDATE Players set player_battingorder = " &_
                       intorder & " Where player_id = " & battingorder(i))
        intorder = intorder + 1
    Next

    closeConnection(conn)
End Sub

我将在源代码中提供一些快速的数据库访问函数…但您应该知道它们如何工作，所以我不会过多解释。

我们完成了！测试一下，尽情享受吧！！

关注点

您会在 script.aculo.us 网站上注意到一些事情，您可以使用这个拖放脚本实现许多酷炫的动画。最后，我正在开发一些自定义控件来包装 script.aculo.us 脚本到 ASP.NET 控件中；如果有人想帮忙，请在下方给我留言！

完成后，我一定会把代码也发在这里。

历史

  • 2007/9/2 - 文章创建。
© . All rights reserved.