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

【问题标题】：how to get list order when list is reordered by javascript at the client side当列表在客户端由javascript重新排序时如何获取列表顺序
【发布时间】：2016-04-28 10:36:18
【问题描述】：

我有一个列表，其中的元素可以通过 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 没用。属性 Controls 总是为空。找不到强制解析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.

【问题讨论】：

请参阅"Should questions include “tags” in their titles?"，其中的共识是“不，他们不应该”！

标签： c# asp.net system.web.ui.webcontrols

【解决方案1】：

在您输入 runat="server" 之前，您不会获得子控件或主控件。我建议您不要使用隐藏字段，而是使用像

这样的数据属性

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

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

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

【讨论】：

我更新了帖子以澄清一些不太清楚的方面。服务器控件生成的张贴的html，所以这里不能使用runat="server"标签。只要与服务器标签一起使用，控件本身就已经在服务器上运行。添加 data-id 的想法看起来不错。

【解决方案2】：

我尝试了错误的方法。我回来了，html 没有在邮件中发回。所以没有办法根据响应重建控制树。 Obvious 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，在发布之前。

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

服务器可以通过解析impNewOrder服务器控件的值来获取新订单。

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

【讨论】：