利用AjaxPro2.0实现在页面直接修改数据

 　　开发中我经常遇到一些需求

    客户问我：”可不可以让我在浏览的时候，看到一些错误的数据时就直接在那修改？免得又要到指定的地方修改信息，这样麻烦又耗时。毕竟我只想修改这一个数据嘛？“

   我回答：”恩，可是可以只想很麻烦，并且数据不好控制,验证“

  然后客户就叹气，仍客气的说”那就算了“。我也支支吾吾，就这样过了。(不要砸我哦！我也想缩短开发时间，呵呵)

经历这样的事多了，所以我就决定做一个通用的工具(也就几个类和js文件)

  Js 处理 提交数据：

 

  
    

   
     
   
      

   
     var
   
      ajaxObj
   
     =
   
     YSKFX;
   
     //
   
     ajxapro注册类
   
     
//
   
     双击单元格 可以更改内容
   
     

   
      
   
     //
   
     obj 单元格对象
   
     

   
      
   
     //
   
     id 修改对象所关联的主键 更多参数可以自行增加 (此本分为条件部分)，如此刻我这里条件部分还要 参数 date
   
     

   
      
 
   
     function
   
      YouChange(obj,id,date){ 
 
 
   
     var
   
      attr
   
     =
   
     "
   
      class='inputbg' 
   
     "
   
     ; 
   
     //
   
     属性 可以连续增加
   
     

   
      
   
     //
   
     内容更改为 textbox 失去焦点触发更新事件
   
     

   
      obj.innerHTML
   
     =
   
     "
   
     <td><input id='up_ip_
   
     "
   
     +
   
     id
   
     +
   
     "
   
     ' type='input' value='
   
     "
   
     +
   
     obj.innerText
   
     +
   
     "
   
     ' onblur=\
   
     "
   
     SaveUpdate(
   
     this
   
     ,
   
     '
   
     "+id+"
   
     '
   
     ,
   
     '
   
     "+obj.innerText+"
   
     '
   
     ,
   
     '
   
     "+date+"
   
     '
   
     )\
   
     "
   
      
   
     "
   
     +
   
     attr
   
     +
   
     "
   
      /><td>
   
     "
   
     ; 
 
 }
 
 
   
     function
   
      SaveUpdate(obj,id, oldValue ,date){ 
 
   
     //
   
     如果数据已更改 提交服务器修改数据
   
     

   
      
   
     if
   
     (obj.value
   
     !=
   
     oldValue){ 
 
   
     var
   
      result
   
     =
   
     ajaxObj .UpdateField(id, obj.value,date).value; 
 
   
     if
   
     (result
   
     ==
   
     "
   
     1
   
     "
   
     )
   
     //
   
     更新成功
   
     

   
      { 
 $(
   
     "
   
     #
   
     "
   
     +
   
     obj.id).parent().html(obj.value); 
 }
   
     else
   
      
   
     if
   
     (result
   
     ==
   
     null
   
      
   
     ||
   
      result
   
     ==
   
     "
   
     0
   
     "
   
      )
 {
 alert(
   
     "
   
     更新失败
   
     "
   
     );
 }
   
     else
   
     
 {
 alert(result);
 }
 }
   
     else
   
     
 {
 $(
   
     "
   
     #
   
     "
   
     +
   
     obj.id).parent().html(obj.value);
 }
 }



  
    

在 GridView绑定数据时(其他不管是什么多可以) 对于第一个单元格内容双击进入修改状态 ，对此添加的属性 

  
    

   
     
   
     e.Row.Cells[
   
     0
   
     ].Attributes.Add(
   
     "
   
     ondblclick
   
     "
   
     , 
   
     "
   
     YouChange(this,'
   
     "
   
      
   
     +
   
      e.Row.Cells[e.Row.Cells.Count
   
     -
   
     1
   
     ].Text 
   
     +
   
      
   
     "
   
     ','
   
     "
   
      
   
     +
   
      txtSelectDate.Text.Trim() 
   
     +
   
      
   
     "
   
     ')
   
     "
   
     );
  
    

 

Ajax方法类

  
    

   
     
   
      
   
     ///
   
      
   
     <summary>
   
     
 
   
     ///
   
      更新备注信息
 
   
     ///
   
      
   
     </summary>
   
     
 
   
     ///
   
      
   
     <param name="id">
   
     账龄
   
     </param>
   
      
 
   
     ///
   
      
   
     <param name="value">
   
     新备注
   
     </param>
   
     
 
   
     ///
   
      
   
     <param name="value">
   
     账龄计算时间
   
     </param>
   
     
 
   
     ///
   
      
   
     <returns>
   
     更新结果。1表示成功，0或null表示失败，同时可以将提示信息作为结果返回
   
     </returns>
   
     

   
      [AjaxPro.AjaxMethod]
 
   
     public
   
      
   
     string
   
      UpdateField(
   
     string
   
      id, 
   
     string
   
      value, 
   
     string
   
      date)
 {
 
   
     //
   
     数据处理代码
   
     

   
      
   
     return
   
      
   
     "
   
     1
   
     "
   
     ;
 }
  
    

 

页面注册

 

 

  
    

   
     
   
     protected
   
      
   
     void
   
      Page_Load(
   
     object
   
      sender, EventArgs e)
 {
 AjaxPro.Utility.RegisterTypeForAjax(
   
     typeof
   
     (这里是AjaxMethod所在类对象), 
   
     this
   
     );
 } 
  
    

 

 

到此结束！ 好费劲哦，出现了几次排版出错！！！

 

其实这个需求的实现也不难。这只是对于初学者比较适合的一段示例 ！希望有高手指点指点！