如何在客户端 javascript 重新排序列表时获取列表顺序

Question

我有一个列表，其中的元素可以通过 JQuery 排序功能重新排序或拖出列表。当用户按下保存时，引发回发。我需要捕获列表，让 id 仍在列表中，并按顺序进入 html。我的做法是在每个ul标签中添加隐藏字段，用来存储列表项的id，像这样

<ul>
   <li>Item1 <input id="itemID" type="hidden" value="1"></li>
   <li>Item2 <input id="itemID" type="hidden" value="2"></li>
...
</ul>

为此我子类 WebControl。在 RenderContents 方法中，我按照发布的方式呈现 html。

问题是如何在回发调用中访问控件子项。

因为JavaScript改变了列表，Viewstate没用了。属性控件总是空的。无法找到强制解析 Innerhtml 甚至获取 Innerhtml 的方法。我在这里错过了什么？

更新： 澄清一下，上面发布的 html 是由 webcontrol 的子类生成的。在我命名为 MyListControl 的服务器控件代码下方：

    [ToolboxData("<{0}:ServerControl1 runat=server></{0}:ServerControl1>")]
    public class MyListControl : WebControl {

        [Bindable(true)]
        [Category("Appearance")]
        [DefaultValue("")]
        [Localizable(true)]
        public  List<String> Itens;



        protected override void RenderContents(HtmlTextWriter output)
        {

            var ul = new HtmlGenericControl("ul");
            int order = 0;
            if (Itens != null)
                foreach (var liText in Itens)
                {
                    var li = new HtmlGenericControl("li");
                    li.InnerText = liText;
                    ul.Controls.Add(li);

                    var input = new HtmlInputHidden() { ID = "Order", Value = order.ToString() };
                    li.Controls.Add(input);
                    order++;
                }
            Controls.Add(ul);
            ul.RenderControl(output);
        }
    }
Because the html is not parsed on post FindControl method can't find anything also.

Answer 1

在将运行at="server" 放置之前，您不会获得子控件或主控件。我建议您使用

之类的数据属性，而不是使用隐藏字段

<li data-id="1"></li>

要查找子控件，您需要运行在父控件上执行一个 foreach 循环。

 foreach (Control c in parentControlId.Controls)
        { //do something}

Answer 2

我尝试了错误的方法。我发现 html 没有在 post 上发回。所以没有办法根据响应重建控制树。明显的 ViewState 也没有反映 html 控件上的更改，因为它只是传输控件状态。

所以我看到的唯一选择是使用隐藏控件来存储列表顺序并发送回服务器。控件可以由 javascript 函数填充。

我在页面中添加以下内容html：

<asp:ListView runat="server" ID="lvSortableList">
    <LayoutTemplate>
        <ul id="lvSortableList" class="connectedSortable">
            <li id="itemPlaceholder" runat="server"></li>
        </ul>
    </LayoutTemplate>
    <ItemTemplate>
         <li data-giro="<%# Eval("MyID") %>"><%# Eval("field1") %></li>
    </ItemTemplate>  <!--data-id stores the item id-->
</asp:ListView>
<input type="hidden" id="impNewOrder" runat="server" clientid="impNewOrder" />

然后，为了填充控件，我创建了以下函数，它遍历列表的所有项目，获取项目 ID 并按照找到它们的顺序存储它们。

function fillFeedbackSource() {
    var IDs = [];
    $('#lvSortableList li').each(function () {       
    IDs.push($(this).data("id"));
    }); 
    $('[clientid=impNewOrder]').val(IDs); //store the ids separated by ','
};

点击保存按钮时调用函数 fillListOrder，在 post 之前。

 <asp:Button ID="btbSave" runat="server" Text="Save" OnClientClick="javascript: fillListOrder();" OnClick="btbSave_Click" Visible="false" />

服务器可以通过解析impNewOrder服务器控件的值得到新的订单。

转到 here 以获得 JQuery 可排序列表控件。

如何在客户端 javascript 重新排序列表时获取列表顺序

how to get list order when list is reordered by javascript at the client side

c#

asp.net

system.web.ui.webcontrols