接着给大家介绍 Repeater 的使用  ajax 更新删除和新建行的功能.

本次的示例是上个文章示例的延续, 其中 JQueryElement 更新到了 3.1.1, 使 repeater 自身包含了对分页的控制, Repeater 控件也增加了一些属性, 其中增加了各类模板, 比如: HeaderTemplate 等.

由于篇幅的原因, 这里不再解释一些简单的内容, 比如: 引用命名空间和 js 脚本之类的.

我们来看 Repeater 控件的代码:

1 
      
        36 
       
         37 
        
          38 
         
序号
         
姓名
         
年龄
         
特长
         
操作
 39 
        
 40 
        41 
       
         42 
         43 
        
          44 
         
#:id
         
#:realname
         
#:age
         
#:skill
 45 
         
编辑删除
 46 
        
 47 
        48 
       
         49 
         50 
        
          51 
         
#:id
 52 
         
 53  54 
 55 
         
 56  57 
 58 
         
 59  60 
 61 
         
取消更新
 62 
        
 63 
        64 
       
         65 
        
          66 
         
第 @:pageindex/@:pagecount 页, @:itemcount 条
 67 
        
 68 
        69 
       
         70 
        
          71 
         
-
 72 
         
 73  74 
 75 
         
 76  77 
 78 
         
 79  80 
 81 
         
添加
 82 
        
 83 
        84 
      

相对于上次的例子, 我们去掉了页面中表示页码的隐藏值 pi, 并通过 PageSize 属性设置每页中包含的行数, 默认 PageIndex 为 1, 而且在执行获取数据的 ajax 操作时, 将传递页码和每页包含的条数给服务器端的方法, 参数名称为 pageindex 和 pagesize, 因此我们还去掉了传递给服务器端 Fill 方法的 Parameter.

先以更新行为例子, 我们使用通过 UpdateAsync-Url 和 UpdateAsync-MethodName 来设置更新行将调用页面的 Student.aspx 的 Update 方法. 既然要更新, 那么我们需要将行的信息传递给 Update 方法, 只需在行的编辑模板 EditItemTemplate 中进行相应的设置, 就可以为 Update 方法传递相应的行信息.

我们来看下 EditItemTemplate 中的内容, 你可以在 Repeater 的 EditItem 属性中设置行的编辑模板, 其效果和设置 EditItemTemplate 是一致的, 但如果设置了 EditItemTempate 那么将覆盖 EditItem 属性中的内容.

      
       
      
 
       
#:id
 
       
  
 
       
  
 
       
  
 
       
取消更新
 
      
 
     

在 EditItemTemplate 中, 有 4 个 input 元素, 其中 3 个文本框对应了 realname, age, skill 3 个字段的编辑状态, 我们看到在 input 元素的 value 属性中, 采用了 #:<字段名> 的方式绑定了字段. 还有 1 个隐藏值包含了 id 字段的值, 因为我们不希望编辑此字段但希望将 id 传递给 Update 方法. 对于希望将其值传递给 Update 方法的 input 元素上, 你可以使用 &u:<字段名> 的形式为 input 的 id 赋值, 表示此 input 元素的值将作为字段的新值传递给 Update 方法.

再来看更新按钮, 它是一个超链接, 在 onclick 事件中, 我们需要填写更新的 js 脚本, 但事实上, 简单的使用 !:<命令名> 的形式, 就可以绑定 js 脚本到事件, 这里我们填写 !:update 即可. 当然, 我们还看到了取消按钮和其绑定的 !:endedit.

在更新之前和之后, 我们检查数据的合法性和通过用户最终的结果, 可以通过 PreUpdate 和 Updated 属性来设置, 他们表示更新之前和之后的事件, 其中参数 e 的 row 属性表示更新的行, 在 PreUpdate 的事件中, 如果我们返回 false, 则将停止更新.

PreUpdate=" function(tag, e){
        if(e.row.realname == '' || e.row.age == '' || e.row.skill == ''){
            alert('请将信息填写完整');         return false;     } } " Updated=" function(tag, e){
        alert('成功更新了 ' + e.row.realname); } "

剩下的新建和删除的写法都是类似的, 删除更简单只有一个删除的按钮并绑定 !:remove js 脚本到超链接的 onclick 事件即可, 因此就不再解释.

在面是 Student.aspx 中, 我们编写 Update 方法:

因为, 我们事先添加了 StudentDS.xsd 数据集, 它会自动建立一个数据适配器, 其中包含了更新, 新建, 删除行的方法, 我们直接使用即可.

[WebMethod ( )] publicstaticobject Update ( int id, string realname, string age, string skill ) {
    bool isSuccess =true; try     {
            StudentTableAdapter adapter =new StudentTableAdapter ( );         adapter.Update ( realname, age, skill, id );     } catch     { isSuccess =false; } returnnew { __success = isSuccess, row =new { id = id, realname = realname, age = age, skill = skill } }; }

在方法的最后, 我们返回了一个匿名类型, .NET 4.0 将自动将其变为一个对应的 json 并发回给浏览器, 也就是对应了刚才 Updated 属性中的 e.row.

好了, 这次示例中的内容有点小多, 没法全部讲完, 只给大家讲其中的一些吧, 完整的代码太多也不粘贴了, 大家如果需要看可以下载示例代码.

JQueryElement 是开源共享的代码, 可以在  页面下载 dll 或者是源代码.

目前 JQueryElement 最新版本为 3.1.1, 可以在上面的地址看到新版本改动的内容.

请到 的 JQueryElement 示例下载一节下载示例代码

实际过程演示:  , 建议全屏观看.