保存动态创建的 jQuery Connected Sortable Lists 的顺序
Posted
技术标签:
【中文标题】保存动态创建的 jQuery Connected Sortable Lists 的顺序【英文标题】:Save order of dynamically created jQuery Connected Sortable Lists 【发布时间】:2016-06-01 11:53:28 【问题描述】:我想要做的是有一个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
在我的 SaveLayout
方法中只包含一个 LiteralControl
,仅此而已。我尝试从Page_Load
方法中删除!Page.IsPostBack
,它只是在回发期间重新初始化中继器列表,并没有给我更改的顺序。
我尝试通过将控件的 ID 存储在视图状态中来研究有关持久化动态控件数据的几个 *** 问题,但在我的情况下似乎不起作用。或者我做的不对。
【问题讨论】:
【参考方案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 Sortable Lists 的顺序的主要内容,如果未能解决你的问题,请参考以下文章
Jquery组织Form表单提交之Form submission canceled because the form is not connected