Question

我要做的是拥有一个asp转发器，它可以动态生成给定数量的连接jQuery可排序列表组。然后，一旦用户按下asp按钮，我想将每个列表组的顺序保存到MS SQL数据库。

无序排序列表中列表项的初始种群工作正常，并且对每个列表进行排序的工作正常。

下面是代码示例。我已经更改了变量/方法名称，省略了我觉得不需要的代码。

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只包含LiteralControl方法中的SaveLayout，而不包含任何内容。我尝试从!Page.IsPostBack方法中删除Page_Load，它只是在回发期间重新初始化转发器列表，并且不会向我提供更改的订单。

我尝试通过在视图状态下存储控件的ID来查看有关持久动态控制数据的几个stackoverflow问题，但它似乎在我的情况下不起作用。或许我做得不对。

Answer 1

通过使用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值中的字符串（我拆分）。

保存动态创建的jQuery Connected可排序列表的顺序

1 个答案: