利用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
   
 
   
 
   
    
    
    
    );
 } 
  

  

  
   
   
   
   

 

 

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

 

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