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

为什么80%的码农都做不了架构师？>>>   

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

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

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

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

经历这样的事多了，所以我就决定做一个通用的工具(也就几个类和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 );
}

 

 

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

 

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

转载于:https://my.oschina.net/howdo/blog/481255