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

我正在学徒，我的老板给了我一个可重新订购清单的挑战。如何保存可重新订购列表的新订单？

使用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"/>

他们每个人都有一个索引号，以便列表看起来像...

我再重新排序列表

但是当我刷新页面，它再次加载原来的顺序。

我想当我移动一些东西时，我需要一个脚本来改变那个项目的索引号，因此所有其他的？

来源

2017-02-15 Fazy

阿贾克斯都可以在这里帮忙。 jquery ui有机制在重新排序完成时生成一个事件。在这种情况下，您可以编写一个ajax函数，它将发送重新排序的索引并将此数据发送到服务器。在服务器端，你必须保存它。所以在重新加载时请阅读您已保存并相应显示的订单 –

您需要将查看的已排序数据从视图回发回服务器，例如添加一个“保存”按钮。在该按钮的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 
      } 
    }

来源

2017-02-15 14:04:40 Tama

有一些因素需要考虑，对这些你能做到这一点。

您的数据的排序编号是否受到控制，是否需要分页？ 我不知道你这个页面有多少数据。如果数据仅列出一个页面，并且此页面中的数据不多。您可以使用简单的方法重新排列所有数据。

但是，如果列表中有非常多的数据，并且在分页中有某个页面，那么您需要一个复杂的方法来对这些数据重新排序。一个重要的因素是数据中的排序数字可以重复吗？如果可以重复排序，那么这种排序方法可能存在一些错误。

我创建了一个WebFrom调用Resort.aspx。此代码假定数据的排序数量是由程序自动创建的，排序编号是唯一的。

这是给你一个简单的代码以供参考，该代码的理论：

重新梳理后，发布的所有数据项的ID和页面索引由AJAX后端网址;
后端方法获取data-id和page-index，为每个日期项目计算新的sort-number;
将新的排序编号保存到数据库。

这是Resort.aspx源代码：

<%@ Page Language="C#" AutoEventWireup="true" EnableViewState="false" CodeBehind="Resort.aspx.cs" Inherits="WebApplication1.Resort" %> 
 
    
 
    <!DOCTYPE html> 
 
    
 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
 
    <head runat="server"> 
 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 
     <title></title> 
 
     <style> 
 
      .box { 
 
       border-color: rgba(0,0,0,0.6) !important; 
 
      } 
 
    
 
      .move { 
 
       cursor: move; 
 
      } 
 
    
 
      .box li:hover { 
 
       background-color: rgba(0,0,0,0.3) !important; 
 
      } 
 
    
 
      #sortable { 
 
       list-style-type: none; 
 
       margin: 10px; 
 
       width: 450px; 
 
       border: 3px dotted #fff; 
 
       padding: 10px; 
 
      } 
 
    
 
       #sortable li { 
 
        margin: 3px 3px 3px 0; 
 
        padding: 5px; 
 
        border: 1px solid rgba(0,0,0, 0.5); 
 
        background-color: rgba(255,255,255,1); 
 
        font-size: 12px; 
 
       } 
 
     </style> 
 
     <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
     <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
     <script> 
 
      $(function() { 
 
       var page = "<%=page%>"; 
 
       $('.re-sort-btn').on("click", function (ev) { 
 
        ev.preventDefault(); 
 
        var is_sortable = $("#sortable").sortable('instance'); 
 
        $("#sortable").toggleClass("box"); 
 
        $("#sortable li").toggleClass("move"); 
 
        if (!is_sortable) { 
 
         $(this).text("Finish & Save!"); 
 
         $("#sortable").sortable({ 
 
          stop: function (event, ui) { 
 
           $("#sortable").attr("data-changed", true); 
 
          } 
 
         }); 
 
         $("#sortable").disableSelection(); 
 
        } 
 
        else { 
 
         $(this).text("Re-Sort"); 
 
         $("#sortable").sortable('destroy'); 
 
    
 
         if ($("#sortable").attr("data-changed")) { 
 
          var ids = []; 
 
          $("#sortable li").each(function (index, element) { 
 
           var id = $(this).attr("data-id"); 
 
           ids.push(id); 
 
          }); 
 
          console.log(ids); 
 
          $.ajax({ 
 
           url: '?action=reorder', 
 
           type: 'POST', 
 
           async: true, 
 
           data: { 
 
            ids: ids.join(","), page: page 
 
           }, 
 
           timeout: 5000, 
 
           dataType: 'json', 
 
           success: function (data, textStatus, jqXHR) { 
 
            console.log(data); 
 
            if (data["status"] === "ok") { 
 
             var txt = []; 
 
             for (var x in data["sorts"]) { 
 
              var t = data["sorts"][x]; 
 
              for (var k in t) 
 
               txt.push(k + " : " + t[k]); 
 
             } 
 
             alert("new sort : \n" + txt.join("\n")); 
 
            } 
 
            else 
 
             alert("re sort error"); 
 
           }, 
 
           error: function (xhr, textStatus) { 
 
            console.log('error'); 
 
            console.log(xhr); 
 
            console.log(textStatus); 
 
           } 
 
          }); 
 
         } 
 
        } 
 
       }); 
 
      }); 
 
     </script> 
 
    
 
    </head> 
 
    <body> 
 
     <form id="form1" runat="server"> 
 
      <div> 
 
    
 
       <button class="re-sort-btn">Re-Sort</button> 
 
    
 
       <asp:Repeater runat="server" ID="repeater1"> 
 
        <HeaderTemplate> 
 
         <ul id="sortable"> 
 
        </HeaderTemplate> 
 
        <ItemTemplate> 
 
         <li data-id="<%# ((WebApplication1.Test)Container.DataItem).Id %>"><%# String.Format("{0}-{1} ::: old order is {2}",((WebApplication1.Test)Container.DataItem).Id, ((WebApplication1.Test)Container.DataItem).Name, ((WebApplication1.Test)Container.DataItem).Order) %> 
 
        </ItemTemplate> 
 
        <FooterTemplate></ul></FooterTemplate> 
 
       </asp:Repeater> 
 
       <%for (int i = 1; i < 10; i++) 
 
        {%> 
 
       <a href="?page=<%=i %>"><%=i %></a> 
 
       <%} %> 
 
      </div> 
 
     </form> 
 
    </body> 
 
    </html>

这是Resort.aspx.cs源代码

using System; 
using System.Collections.Generic; 
using System.Text; 

namespace WebApplication1 
{ 
    public partial class Resort : System.Web.UI.Page 
    { 
     public int page = 0; 
     //datasource, you should access it from database. 
     private List<Test> test = new List<Test>(); 
     protected void Page_Load(object sender, EventArgs e) 
     { 
      if (Request["action"] == "reorder") 
      { 
       ReOrder(); 
      } 
      else 
      { 
       page = Convert.ToInt32(Request.QueryString["page"] ?? "1"); 
       int i = 0, page_size = 20, max_page = 9; 
       while (i++ < page_size) 
        test.Add(new Test() 
        { 
         Id = (page - 1) * page_size + i, 
         Name = Guid.NewGuid().ToString("N"), 
         Order = (max_page + 1) * page_size - page * page_size - i + 1, 
        }); 

       repeater1.DataSource = test; 
       repeater1.DataBind(); 
      } 
     } 

     /// <summary> 
     /// This is reorder method, response ajax request. 
     /// If no pagination, easy more. 
     /// </summary> 
     protected void ReOrder() 
     { 
      int page = Convert.ToInt32(Request["page"] ?? "1"); 
      int page_size = 20; // the number of one page show data 
      string[] ids = (Request["ids"] ?? "").Split(new char[] { ',' }, StringSplitOptions.RemoveEmptyEntries); 
      int max_page = 9; // max page of the data list 
      int i = 0; 

      StringBuilder sb = new StringBuilder(); 
      sb.Append("{\"status\":\"ok\", \"sorts\":[ "); 
      foreach (var id in ids) 
      { 
       //below line code is calculate every data's order in now page 
       var sort_number = (max_page + 1) * page_size - page * page_size - i++; 
       sb.Append("{"); 
       sb.AppendFormat("\"{0}\":{1}", id, sort_number); 
       sb.Append("},"); 
      } 
      //save new sort-number to database 
      sb.Remove(sb.Length - 1, 1); 
      sb.Append("]}"); 
      Response.Clear(); 
      Response.AppendHeader("Content-Type", "application/json;charset=UTF-8"); 
      Response.Write(sb.ToString()); 
      Response.End(); 
     } 
    } 

    /// <summary> 
    /// test class just for demo 
    /// </summary> 
    public class Test 
    { 
     public int Id { get; set; } 
     public string Name { get; set; } 
     public int Order { get; set; } 

    } 
}

来源

2017-02-15 16:23:40

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

回答

相关问题