AJAXControlToolKit的ReorderList控件

 

使用ReorderList和LINQ实现的实时保存记录的页面:

 

1.       Introduction:

ASP.NET AJAX的ReorderList控件是可以实现无排序数据绑定的列表控件,从名字上就可以看出来因为它是Reorder的,也就是说能够通过和服务器端交互数据重新排序绑定的数据项。要实现重排序,用户只需简单的拖动某条记录的可拖动部位,然后放到新的位置，在拖动记录的同时会有个图示化的显示。当某条记录被拖到新的地方时,数据源会被更新。

  当ReorderList一旦绑定数据它就会像其它的数据绑定控件一样,当你设置了某一列的SortOrderField属性,那么它就会按照这一列的数据排序。ReorderList控件也可以绑定其它的IList控件(例如Arrays)。

   ReorderList控件不同于其它的ASP.NET的AJAX控件,它是个服务器端的控件。所以ReorderList控件能够通过callback或postback来实现重排序。当某条记录被删除或者是编辑时,需要通过设置PostbackOnReorder属性来实现服务器端和客户端的数据同步。

2.       Properties:

    <ajaxToolkit:ReorderList ID="ReorderList1" runat="server" 

    DataSourceID="ObjectDataSource1"

    DragHandleAlignment="Left"

    ItemInsertLocation="Beginning"

    DataKeyField="ItemID"

    SortOrderField="Priority"

    AllowReorder="true">

      <ItemTemplate>...</ItemTemplate>

      <ReorderTemplate>...</ReorderTemplate>

      <DragHandleTemplate>...</DragHandleTemplate>

      <InsertItemTemplate>...</InsertItemTemplate>

</ajaxToolkit:ReorderList>

a.       DataSourceID: 用来填充此控件的数据源。

b.       DataKeyField: 作为主键的数据字段。

c.       SortOrderField: 排序字段。

d.       ItemInsertLocation: 设定插入新的记录的位置,可以为Beginning或End。

e.       DragHandleAlignment: 设定drag handle所在的位置。可以设置为Top, Left, Bottom何Right.

f.        AllowReorder: 是否允许拖/放,默认是允许托/放的。

g.       ItemTemplate - 该标签内将定义列表中普通条目的模版。

h.       EditItemTemplate - 该标签内将定义处于编辑状态中的列表条目的模版。

i.         ReorderTemplate - 该标签内将定义拖动列表条目时列表中可投放区域的模版。

j.         InsertItemTemplate - 该标签内将定义用来添加新条目的特殊行的模版。

k.       DragHandleTemplate - 该标签内将定义列表条目中可拖放区域的模版。用户只有在该区域中拖拽才能够对该条目进行重排序。

l.         EmptyListTemplate - 该标签内将定义空列表的模版。若列表中没有任何条目，则将显示出该模版中定义的内容。

m.     PostbackOnReorder - 若设置该属性值为true，则当用户对列表中的项目进行重新排序之后，将自动引发一次整页的回送。否则将以异步回调的方式向服务器端发送请求。

3.       Example:

这里会提供两个例子,一个是全方位介绍ReorderList控件的功能,一个是使用ReorderList控件和LINQ链接SQL数据源实现重排序。

主要是先介绍一下第一个例子:

第一步:创建一个AjaxControlToolKit模板:

 

给项目几个名字叫做AjaxControlToolKit_ReorderList;

第二步:添加一个xml文件用来存放需要绑定的数据。起个名字叫做TodoItems.xml。xml数据请在后面提供的下载连接下载。

第三步:向default.aspx文件中拖入一个ReorderList控件,选择数据源为Object：

 

VS会自动添加一个ObejctDataSource。

第四步:创建一个DataSet,名字为TodoItems.xsd,

 

创建好数据集后,我们需要通过程序把xml文件的数据存储到数据集中,使用的类:

 

第五步: 配置ReorderList绑定的数据源属性,选择Business Ojbect为SessionTodoXmlDatObject::

 

按照提示配置好Select,Update,Insert和Delete方法:

 

第六步: 设置ReorderList控件的属性:

 

注意:如果需要能够实现Update记录功能,那必须设置PostBackOnReorder为’true’。微软官网给出的例子中没有使用EditItemTemplate属性,我在例子都给大家列出了如何使用.

最后一步:创建Css文件和加入项目需要的图片。然后通过下面的link使用Css样式。

   <link href="StyleSheet.css" rel="stylesheet" type="text/css" />

 

4.       SourceCode:

http://download.csdn.net/source/1457530