再注文可能リストの新しい注文を保存するにはどうしたらいいですか？

Question

私は見習いをしています。私の上司は、リストを再注文可能にするという挑戦をしました。

Jquery UIの使用Iveにはドラッグ＆ドロップ機能が追加され、各項目のインデックスを示すラベルが追加されました。

問題は、新しいオーダーをデータベースに保存することができないということです。

はここ

<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> 

...リピーターだと、これは私がWebページをロードすると、私はアイテムのリストを取得し、使用して

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

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

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

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

のjQuery UIスクリプトです。

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

リストは、私はその後、

にリストを並べ替える...のような

を表示されますので、彼らはそれぞれのインデックス番号を持っています2

が、私はページを更新するとき、それは再び元の順序をロードします。

何かを動かすと、そのアイテムのインデックス番号を変更するスクリプトが必要になると思います。

Answer 1

「保存」ボタンを追加するなどして、ソートしたデータをビューからサーバーにポストバックする必要があります。そのボタンの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 
      } 
    } 

Answer 2

いくつかの要因がありますが、これらの上には、それを行うことができ、考える必要があります。

データのソート番号は制御されていますか？ページネーションが必要ですか？ このページのデータ量はわかりません。データが1ページ分だけリストされ、このページに多くのデータがない場合。簡単な方法ですべてのデータを並べ替えることができます。

リストに非常に多くのデータがあり、ページネーションにページがある場合は、これらのデータを並べ替えるための複雑なメソッドが必要です。重要な要素は、データのソート番号が繰り返されることですか？ sort-numberを繰り返すことができる場合、おそらくこの並べ替え方法にいくつかのバグがあります。

私はWebFromを呼び出すResort.aspxを作成します。このコードでは、データのソート番号はプログラムによって自動作成され、ソート番号はソートです。

これは、参照のためのあなたのための簡単なコード、このコードの理論である：

1. 再ソートした後、AJAXにより、バックエンドのURLにすべてのデータ項目のIDとページインデックスを投稿;

2. バックエンドメソッドget data-idおよびpage-indexを使用して、各日付項目の新しいソート番号を計算します。

3. 新しいソート番号をデータベースに保存します。

これは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>

これはAjaxはここに助けることができる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; } 

    } 
}