ReorderList数据源绑定（拖动更新数据库）

本文链接：https://blog.youkuaiyun.com/yangreat/article/details/1893538

本文介绍了一个使用ASP.NET实现的会议议程列表拖拽排序功能，通过ReorderList控件实现了列表项的拖拽及排序更新，并详细展示了如何在服务器端处理排序变化，包括获取当前排序状态、更新数据库中的排序字段等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<cc1:ReorderList ID="ReorderList1" runat="server" AllowReorder="True" DataSourceID="SqlDataSource1" Width="540px" DragHandleAlignment="Right" DataKeyField="Id" SortOrderField="sortId"
                       PostBackOnReorder="true" OnItemReorder="ReorderList1_ItemReorder">
                       <ItemTemplate>
                          <asp:Panel ID="Panel1" runat="server" BackColor="AliceBlue" BorderStyle="Dashed"
                                       BorderWidth="1px" Height="50px" Width="560px">
                                       <br />
                                   <table style="width: 540px">
                                       <tr><td style="height: 20px; width: 40px;">  <%# (Container.DataItemIndex+1).ToString()%></td>
                                           <td style="width: 280px; height: 20px">
                                   <asp:Label ID="Label1" runat="server" Text='<%# Bind("AgendaName") %>' Font-Bold="True" ForeColor="#C04000"></asp:Label></td>
                                           <td style="width: 60px; height: 20px" colspan="2">
                                               <asp:HyperLink ID="HyperLink1" NavigateUrl='<%# "~/AgendaEdit.aspx?do="+Eval("id") %>' runat="server" CssClass="NewButton1">修改</asp:HyperLink>
                                              </td>
                                           <td style="width: 110px; height: 20px" colspan="2">
                                               <asp:HyperLink ID="HyperLink3" NavigateUrl='<%# "~/AttachmentManage.aspx?do="+Eval("id") %>' runat="server" CssClass="NewButton1">背景材料管理</asp:HyperLink>
                                              </td>
                                           <td colspan="1" style="width: 50px; height: 20px">
                                               <asp:LinkButton ID="LinkButton1" runat="server" CommandName="Delete" CssClass="NewButton1"
                                                   OnClientClick="return confirm('确定删除该会议议程吗?')">删除</asp:LinkButton></td>
                                       </tr>
                                   </table>
                                   </asp:Panel></ItemTemplate>
                       <ReorderTemplate>
                            <asp:Panel ID="Panel2" runat="server" CssClass="droptemplate" Width="560" Height="50"/>
                       </ReorderTemplate>
                       <DragHandleTemplate><div class="dragHandle"><asp:HyperLink ID="HyperLink2" runat="server" ForeColor="#A9A9A9">在此拖动</asp:HyperLink></div></DragHandleTemplate>
                   </cc1:ReorderList><br />      ( 注意:移动功能只能在IE6浏览器中使用 )
                   <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:MeetingConnectionString1 %>"
                       SelectCommand="SELECT * FROM [Agenda] WHERE ([meetingId] = @meetingId) order by sortId"
                       DeleteCommand="Delete from agenda where id=@id"
                       UpdateCommand="update agenda set agendasuggester = agendasuggester where id = 15">
                       <SelectParameters>
                           <asp:QueryStringParameter Name="meetingId" QueryStringField="do" Type="Int32" />
                       </SelectParameters>
                       <DeleteParameters>
                           <asp:Parameter Name="id" />
                       </DeleteParameters>
                   </asp:SqlDataSource>

       protected void ReorderList1_ItemReorder(object sender, AjaxControlToolkit.ReorderListItemReorderEventArgs e)
       {
           DataTable dt = meeting.GetTable("SELECT * FROM [Agenda] WHERE ([meetingId] = " + Request.QueryString["do"].ToString() + ") order by sortId");
           DataRowCollection drt = dt.Rows;
           int oldIndex = e.OldIndex;
           int newIndex = e.NewIndex;
           string SortOrderField = this.ReorderList1.SortOrderField;

int NewListOrder = (int)drt[newIndex][SortOrderField];

           if (oldIndex < newIndex)
           {
               for (int i = oldIndex + 1; i <= newIndex; i++)
               {
                   drt[i][SortOrderField] = (int)drt[i][SortOrderField] - 1;
               }
           }
           else
           {
               for (int i = oldIndex - 1; i >= newIndex; i--)
               {
                   drt[i][SortOrderField] = (int)drt[i][SortOrderField] + 1;
               }
           }
           drt[oldIndex][SortOrderField] = NewListOrder;

//meeting.UpdateChange(dt, 10);

           UpdateChange(dt, 10);

           this.ReorderList1.DataBind();
       }
          public void UpdateChange(DataTable dataTable, Int32 size)
          {
              Open();
              SqlDataAdapter sda = new SqlDataAdapter();
              sda.UpdateCommand = new SqlCommand("update agenda set sortId=@sortId where Id=@Id", cn);
              sda.UpdateCommand.Parameters.Add("@sortId", SqlDbType.Int, 4, "sortId");
              sda.UpdateCommand.Parameters.Add("@ID", SqlDbType.Int, 4, "ID");

              sda.UpdateCommand.UpdatedRowSource = UpdateRowSource.None;
              sda.UpdateBatchSize = size;
              sda.Update(dataTable);
          }