保存動態創建的jQuery連接排序列表的順序

我想要做的是有一個動態生成給定數量的連接jQuery可排序列表組的asp中繼器。然後，我想要將每個列表組的順序保存到MS SQL數據庫中，一旦用戶按下一個asp按鈕。保存動態創建的jQuery連接排序列表的順序

無序可排序列表的列表項的初始種羣可以正常工作，並且對每個列表進行排序的能力都可以正常工作。

代碼示例如下。我更改了變量/方法名稱，省略了代碼，我覺得這個問題沒有必要。

HTML/ASP：

<asp:Repeater ID="MyRepeater" runat="server" OnItemDataBound="MyRepeater_ItemDataBound"> 
    <ItemTemplate> 
     <div class="col-md-6"> 
       <strong>Column 1</strong> 
       <br /> 
       <ul id="Sortable1" class="sortable" runat="server"></ul> 
     </div> 
     <div class="col-md-6"> 
       <strong>Column 2</strong> 
       <br /> 
       <ul id="Sortable2" class="sortable" runat="server"></ul> 
     </div> 
    </ItemTemplate> 
</asp:Repeater> 

<div class="row"> 
    <div class="col-md-3"> 
     <asp:Button runat="server" ID="SaveButton" Text="Save Layout" OnClick="SaveButton_Click" CssClass="btn btn-primary" /> 
    </div> 
</div>

C＃代碼背後：

protected void Page_Load(object sender, EventArgs e) 
{ 
    if(!IsPostBack) 
    { 
      List<MyObject> myObjects = GetMyObjectsFromDB(); 
      MyRepeater.DataSource = myObjects; 
      MyRepeater.DataBind(); 
    } 
} 

protected void MyRepeater_ItemDataBound(object sender, RepeaterItemEventArgs e) 
{ 
    if (e.Item.ItemType == ListItemType.Item) 
    { 
     HtmlGenericControl ul1 = (HtmlGenericControl)e.Item.FindControl("Sortable1"); 
     HtmlGenericControl ul2 = (HtmlGenericControl)e.Item.FindControl("Sortable2"); 

     // script block that'll be added to every group of sortable lists to allow for the connected sorting functionality 
     string scriptBlock = 
      @"<script type=""text/javascript""> 
        $(function() { 
         $(""#" + ul1.ClientID + @""").sortable({ 
          connectWith: ""#" + ul2.ClientID + @""" 
         }).disableSelection(); 
        }); 

        $(function() { 
         $(""#" + ul2.ClientID + @""").sortable({ 
          connectWith: ""#" + ul1.ClientID + @""" 
         }).disableSelection(); 
        }); 
      </script>"; 

     Page.ClientScript.RegisterStartupScript(this.GetType(), ul1.ClientID + ul2.ClientID, scriptBlock); 

     List<MyOtherObject> myObjectsForEachListGroup = GetMyListObjectsFromDB((int)DataBinder.Eval(e.Item.DataItem, "GroupId")); 

     AddListItemsToSortables(ul1, ul2, myObjectsForEachListGroup); 
    } 

} 

private void AddListItemsToSortables(HtmlGenericControl ul1, HtmlGenericControl ul2, List<MyOtherObject> myObjectsForEachListGroup) 
{ 
    for (int i = 0; i < myObjectsForEachListGroup.Count; i++) 
    { 
     HtmlGenericControl li = new HtmlGenericControl("li"); 
     li.Attributes.Add("id", myObjectsForEachListGroup[i].Id.ToString()); 
     li.Attributes.Add("class", "ui-state-default"); 
     li.Attributes.Add("runat", "server"); 
     li.InnerText = myObjectsForEachListGroup[i].Name; 

     if (i % 2 == 0) 
     { 
      ul1.Controls.Add(li); 
     } 
     else 
     { 
      ul2.Controls.Add(li); 
     } 
    } 
} 


private void SaveOrder() 
{ 
    foreach (RepeaterItem rptItem in MyRepeater.Items) 
    { 
     HtmlGenericControl ul1 = (HtmlGenericControl)rptItem.FindControl("Sortable1"); 
     HtmlGenericControl ul2 = (HtmlGenericControl)rptItem.FindControl("Sortable2"); 

     int i = 0; 

     foreach (HtmlGenericControl li in ul1.Controls) 
     { 
      // save the row and column for the given object in the DB 
      UpdateMyObjectPosition(Convert.ToInt32(li.ClientID), i, 0); 
      i++; 
     } 

     i = 0; 

     foreach (HtmlGenericControl li in ul2.Controls) 
     { 
      // save the row and column for the given object in the DB 
      UpdateMyObjectPosition(Convert.ToInt32(li.ClientID), i, 1); 
      i++; 
     } 
    } 
}

我遇到的問題是，每個<li>元素不會在回發期間持續。 ul1.Controls和ul2.Controls只在我的SaveLayout方法中包含LiteralControl，沒有別的。我嘗試從Page_Load方法中刪除!Page.IsPostBack，它只是在回發期間重新初始化中繼器列表，並沒有給我改變的順序。

我試圖通過存儲控件的ID在視圖狀態，但它似乎並沒有在我的情況下工作，看着有關持久性動態控制數據幾個stackoverflow問題。或者，也許我沒有做對。

來源

2016-02-19 AzNjoE

通過使用JavaScript和ASP HiddenField這將讓列表的順序解決我的問題：

function GetOrder() { 
    var order1 = $("#<%= Sortable1.ClientID %>").sortable('toArray').toString(); 
    var order2 = $("#<%= Sortable2.ClientID %>").sortable('toArray').toString(); 

    document.getElementById("<%= DynamicFieldData.ClientID %>").value = order1 + " " + order2; 
}

按鈕：

<asp:Button runat="server" ID="SaveButton" Text="Save Layout" OnClick="SaveButton_Click" OnClientClick="GetOrder()" CssClass="btn btn-primary" />

哪裏DynamicFieldData是在這裏您可以存儲HiddenField列表中每個項目的ID的數組。然後，您可以在代碼隱藏中將HiddenField中的值提取出來，並按照您的需要使用它。

我還不得不在我的代碼隱藏中修改SaveOrder（）方法，現在循環處理HiddenField值中的字符串（我將它分割）。

來源

2016-02-20 16:54:59 AzNjoE

保存動態創建的jQuery連接排序列表的順序

回答

相關問題