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

时间:2016-01-21 23:25:20

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

我有一个列表,可以通过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.

2 个答案:

答案 0 :(得分:0)

在你输入runat =&#34; server&#34;之前,你不会得到子控件或主控件。我建议你使用像

这样的数据属性,而不是使用隐藏字段
<li data-id="1"></li>

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

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

答案 1 :(得分:0)

我正在尝试错误的做法。它回复给我的是html没有在帖子上发回。因此无法根据响应重建控制树。显而易见的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可排序列表控件。