asp.net ajax喜欢重新排序列表

时间:2011-09-17 13:05:03

标签: asp.net ajax reorderlist

我正在尝试创建一个可拖动的列表来更改某些图片在产品页面中显示的顺序。我不能在产品编辑页面(我添加图片及其描述的同一个地方)这样做。因此,在创建时我没有在数据库中插入任何内容,并且由于AJAX工具包重新排序列表仅适用于数据源,因此我将列表指定为重新排序列表的源并调用databind方法。在重新排序列表的项目模板中,我有一个文本框来编辑图片描述和一个显示照片的图像。我可以拖动项目并重新排序列表,但是当我单击保存时,我无法在文本框中获取更新的文本,并且图片上的订单属性不会更新。我已经尝试手动获取重新排序列表中的项目,但它们始终为null,即使列表显示DataItem为空的20个项目。我启用了viewstate并且也没有帮助。

这是我的代码:

<ajaxToolkit:ReorderList ID="rdlPhotos" runat="server" SortOrderField="PhotoOrder" AllowReorder="true" PostBackOnReorder="true" ClientIDMode="AutoID" EnableViewState="true" ViewStateMode="Enabled">
            <ItemTemplate>
                <div>
                <%--<eva:PhotoView ID="iPV" runat="server" Photo='<%# Container.DataItem %>' />--%>
                    <asp:Image ID="imgPhoto" runat="server" ImageUrl='<%# string.Format("http://eva-atelier.net/sparkle{0}", Eval("Path").ToString().Substring(1)) %>' Width="150" Height="150" />
                    <div class="formGrid">
                        <label class="formLabel">Title</label>
                        <asp:TextBox ID="txtTitle" runat="server" Text='<%#Bind("FileTitle") %>' />
                        <br />
                        <label class="formLabel">Description</label>
                        <asp:TextBox ID="txtDescription" runat="server" Text='<%#Bind("FileDescription") %>' />
                        <br />
                    </div>
                    <p>
                        <asp:Button ID="btnRemove" runat="server" Text="Remover" />
                    </p>
                </div>
            </ItemTemplate>
            <ReorderTemplate>
                <asp:Panel ID="pnlReorder" runat="server" />
            </ReorderTemplate>
            <DragHandleTemplate>
                <div style="width:20px;height:20px;background-color:Red"></div>
            </DragHandleTemplate>
        </ajaxToolkit:ReorderList>

低于C#代码:

private void AddPhotosView()
        {
            if (_currentProduct.Photos != null && _currentProduct.Photos.Count > 0)
            {
                rdlPhotos.DataSource = _currentProduct.Photos;
                rdlPhotos.DataBind();
            }
        }

我是Asp.net的新手我来自WPF的大背景,如果我提出基本问题,很抱歉:)

由于

1 个答案:

答案 0 :(得分:3)

要更新ReorderList项目的顺序,请为其OnItemReorder事件添加处理程序。在这种情况下,您的处理程序可能如下所示:

protected void ReorderHandler(object sender, ReorderListItemReorderEventArgs  e)
{
    var movedPhoto = _currentProduct.Photos[e.OldIndex];
    _currentProduct.Photos.RemoveAt(e.OldIndex);
    _currentProduct.Photos.Insert(e.NewIndex, movedPhoto);
    _currentProduct.Photos.Save();
}

要更新单FileTitle的{​​{1}}和FileDescription,可以轻松使用ReorderList的Photo事件和每个{{OnUpdateCommand属性的按钮1}}。 并且要一次更新所有CommandName="Update",只需以下一种方式迭代Photo

Photos

请记住rdlPhotos.Items这里是初始顺序。为了确定哪些protected void SaveAllHandler(object sender, EventArgs e) { foreach (var riItem in rdlPhotos.Items) { var id = ((HiddenField)riItem.FindControl("itemID")).Value; var title = ((TextBox)riItem.FindControl("txtTitle")).Text; var description = ((TextBox)riItem.FindControl("txtDescription")).Text; UpdatePhoto(id, title, description); } } 应该更新,请使用rdlPhotos.Items添加隐藏字段 - 将价值添加到Photo的{​​{1}},如下所示:

Photo.ID