asp.net阿贾克斯像重排列表 [英] asp.net ajax like reorder list

问题描述

我试图创建一个可拖动列表来改变一些图片显示在产品页面的顺序。我wan't是能够做到这一点，在产品的编辑页面（同一个地方，我添加了图片及其说明）。因此，在创建的时候我什么都没有插入到数据库中，并且由于AJAX工具包reorderlist只适用于数据源，我指定列表作为reorderlist的来源和调用数据绑定方法。在重新排序列表中的项目模板，我有一个文本框来编辑图片描述和显示照片的IMG。不过，我可以拖动该项目，并将列表被重新排序，当我点击保存我不能在文本框中的更新文字和图片上的顺序属性没有更新。我试着手动凑了reorderlist的项目，但他们总是空，即使列表显示20项DataItem的是空的。我已经启用视图状态，并没有帮助。

I'm trying to create a draggable list to change the order some pictures are displayed in a product page. I wan't to be able to do this in the product edit page (same place where I add the pics and their description). So, when creating I have nothing inserted on the database and since the AJAX toolkit reorderlist only works with a datasource I was specifying the list as the source of the reorderlist and calling the databind method. In the item template of the reorder list I have a textbox to edit the pic description and a img that displays the photo. I can drag the items and the list gets reordered, however when I click save I can't get the updated text on the textbox and the order property on the picture doesn't get updated. I've tried manually getting the items in the reorderlist but they're always null even though the list shows 20 items the DataItem is empty. I've enabled viewstate and didn't help either.

下面是我的code：

<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＃code：

And below the C# code:

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

我是新来的Asp.net我来自一个大的WPF背景，对不起，如果我在做基本的问题：）

I'm new to Asp.net I come from a large WPF background, sorry if I'm making basic question :)

感谢

推荐答案

有关更新顺序R​​eorderList项添加您的处理程序，它的 OnItemReorder 事件。在这种情况下，你的处理器可能是这样的：

For updating order of ReorderList items add your handler for it's OnItemReorder event. In this case your handler may looks like this:

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 和 FileDescription 的单个图片它很容易使用 OnUpdateCommand 事件ReorderList，并与属性的按钮的CommandName =更新每个图片。

For updating FileTitle and FileDescription of single Photo it is easy to use OnUpdateCommand event of ReorderList and a button with attribute CommandName="Update" for each Photo. And for updating all Photos at once just iterate through rdlPhotos.Items in next manner:

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.ID - 值添加隐藏字段设置为 ReorderList 的 ItemTemplate中是这样的：

Remember that rdlPhotos.Items here are in initial order. And for identifying which Photo should be updated add hidden field with Photo.ID-value to ReorderList's ItemTemplate like this:

<asp:HiddenField runat="server" ID="itemID" Value='<%# Eval("ID") %>' />

这篇关于asp.net阿贾克斯像重排列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！