jquery - 如何保存可重新订购列表的新订单？

Question

我在学徒期，我的老板给我一个挑战，让我可以重新订购 list 。

我使用 Jquery UI 添加了拖放功能，并添加了一个标签来显示每个项目的索引。

问题是我似乎无法将新订单保存回数据库。

这是中继器...

<asp:Repeater ID="RepeaterWorkOrder" runat="server" OnLoad="Repeater1_PreRender" DataSourceID="sqlwork">
   <HeaderTemplate>                  
      <ul id="headingRow" style="list-style-type:none; font-weight:bold;">
         <li>
            <div class="row">
               <div class="col-xs-3">Name</div>
               <div class="col-xs-3">Address</div>
               <div class="col-xs-2">Service</div>
               <div class="col-xs-1">Van</div>
               <div class="col-xs-1">Remaining Visits</div>
               <div class="col-xs-2">Order of Work</div>
            </div>
         </li>
      </ul>
      <ul id="sortable">
   </HeaderTemplate>
   <ItemTemplate>
      <li class="ui-state-default" style="list-style-type:none; margin-top: 10px;" >
         <div class="row">                                                                                                            
            <div class="col-xs-3"><asp:Label ID="Label1" runat="server" Text='<%# DataBinder.Eval(Container, "ItemIndex") %>' Visible="true"/> - <asp:Label ID="LabelWorkSheetId" runat="server" Text='<%# Eval ("WorkItemId") %>' Visible="true"></asp:Label> <asp:Label ID="LabelFirstNameEdit" runat="server" Text='<%# Eval ("FirstName") %>'></asp:Label>&nbsp;<asp:Label ID="LabelSurnameEdit" runat="server" Text='<%# Eval ("Surname") %>'></asp:Label></div>
            <div class="col-xs-3"><asp:Label ID="LabelAddressLine1Edit" runat="server" Text='<%# Eval ("AddressLine1") %>'></asp:Label>, <asp:Label ID="LabelTownEdit" runat="server" Text='<%# Eval ("Town") %>'></asp:Label>, <asp:Label ID="LabelPostCodeEdit" runat="server" Text='<%# Eval ("PostCode") %>'></asp:Label></div>
            <div class="col-xs-2"><asp:Label ID="LabelServiceEdit" runat="server" Text='<%# Eval ("Service") %>'></asp:Label></div>
            <div class="col-xs-1"><asp:Label ID="LabelVanEdit" runat="server" Text='<%# Eval ("VanRegistration") %>'></asp:Label></div>                                                
            <div class="col-xs-1"><asp:Label ID="LabelRemainingVisits" runat="server" Text='<%# Eval ("RemainingVisits") %>'></asp:Label></div>
            <div class="col-xs-2"><asp:TextBox ID="TextBoxOrder" runat="server" Text='<%# Eval ("DayWorkOrder") %>' Width="100px"></asp:TextBox></div>
        </div>
     </li>
   </ItemTemplate>
   <FooterTemplate>
      </ul>
   </FooterTemplate>
</asp:Repeater>

这是 Jquery UI 脚本

<script>
    function BindControlEvents() {
        $( "#sortable" ).sortable();
        $( "#sortable" ).disableSelection(); 
    };

    $(document).ready(function () {
        BindControlEvents();
    });

    var prm = Sys.WebForms.PageRequestManager.getInstance();

    prm.add_endRequest(function () {
       BindControlEvents();
    });
</script> 

当我加载网页时，我会得到一个项目列表和使用情况；

<asp:Label ID="Label1" runat="server" Text='<%# DataBinder.Eval(Container, "ItemIndex") %>' Visible="true"/>

它们每个都有一个索引号，所以列表看起来像...

1

2

3

然后我将列表重新排序为

2

1

3

但是当我刷新页面时，它会再次加载原始订单。

我想当我移动某些东西时，我需要有一个脚本来更改该项目的索引号，从而更改所有其他项目？

Answer 1

您需要将已排序的数据从 View 发回服务器，例如通过添加“保存”按钮。在该按钮的 onClick 事件中，您应该从转发器获取项目并将重新订购的项目保存回数据库，因此当页面再次加载时，您的转发器将填充排序数据。下面是一些可用于从中继器检索数据的代码:

 foreach (RepeaterItem item in RepeaterWorkOrder.Items){
            if (item.ItemType == ListItemType.Item || item.ItemType == ListItemType.AlternatingItem){
                // Here you can get values from each repeater item
            }
    }