技术开发 频道

用jQuery、ASP.NET与Ajax实现CRUD网页

  更新服务器端数据

  页面上的HTML按钮可以用来调用DoUpdate函数,该函数会把数据发回给UpdateCustomer Web Service。虽然我们可以使用jQuery的bind函数将事件处理器附加到按钮的点击事件中,但是我们只会设置按钮的单击属性,和标准JavaScript客户端代码一样,用来调用DoUpdate函数:

<input id="UpdateButton" type="button" value="Update"         onclick="return DoUpdate()" />

  在DoUpdate函数中,代码生成了NorthwindCustomer对象的实例,并从页面要素对其属性进行设置。该函数的开始部分如下:

  function DoUpdate() {

  var cust
= new NorthwindCustomer();

  cust.CompanyName
= $('#').text();

  cust.ContactName
= $('#').val();

  为了再次调用UpdateCustomer Web Service方法,笔者使用ScriptManager函数——并发送该方法所需的Customer对象。和之前一样,如果方法运行完整,就发送函数名称来调用;如果出错就发送方法调用。其代码如下:

  NorthwindCRM.NorthwindCustomers.UpdateCustomer( cust, CustomerUpdated, GenericFailure);

  为了扩展该页面,使其支持插入和删除操作。可以要求其他按钮,客户端代码和Web Services。

  验证数据

  ASP.NET验证控件可自动生成客户端代码,而且客户端代码可以选择性地添加到CustomerValidator。最有效的方法是从DoUpdate事件处调用该代码,如果其中一个验证器失效,就跳过更新。好在ASP.NET页面为该页面添加了一个ValidatorValidate的函数,发送客户端验证器的时候,它可以调用控件的客户端代码。如果验证失败,会显示控件的ErrorMessage,且验证器的isvalid属性会被设置为False。

  使用客户端验证代码的第一步是找到页面的验证控件。必须将每个验证器发送到ValidateValidator函数,然后检查器isvalid属性。如果有任何验证器失效,该函数必须进行标注以防止进程继续。

  虽然jQuery拥有大量函数,以及大量插件,但笔者不清楚具体哪个函数可以做什么。幸好,如果jQuery具备一个你需要的函数,你就可以使用它的每个函数。每个函数都以你自己函数执行一次。在这些函数中,关键词将指示当前要素。

  在客户端,Validator控件和Span要素一样呈现出来。下列代码中的选择器被放置在DoUpdate函数中,它首先用Validator结尾的ID属性找出所有Span要素。然后,该代码调用了ValidatorValidate方法用于每个验证器,并检查了isvalid属性,还设置了一个isValid标记。最后,如果验证器失效,代码会跳过更新:

  var isValid = true;

  $(
"span[id$='Validator']").each(function() {

  ValidatorValidate(
this);

  
if (!this.isvalid) { isValid = false }; });

  
if (isValid) {

  ..update code..

  管理页面外观

  虽然本文的重心放在典型的CRUD操作上,但是研发jQuery的目的主要是支持CSS控制。

  在DoUpdate函数中,如果操作成功,UpdateCustomer Web Service会返回字符串"OK",反之则返回出错信息。当Web Service方法将信息发送到页面标签的时候,CustomerUpdated函数会被调用:

  function CustomerUpdated(msg) {

  
if (msg == "OK") {

  $(
'#').text("Update successful");

  }

  
else {

  $(
'#').text(msg); }

  }

  不过,错误信息应该是被高亮度显示出来。该代码将CSS类属性设置为高亮度显示:

  else {

  $(
'#').text(msg);

  $(
'#').addClass("ErrorStyle");

  }

  本文结合了Ajax,Web Service,服务器端编程以及jQuery多种技术。目的是创建响应更快,运行更快速的商业应用,从而减少服务器的负荷,减少网络流量。

  (凡署名“IT168”的稿件均为本站原创,请在转载时注明出处及作者。非上述媒体稿件均系转载,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。转载者自负版权等法律责任。)

0
相关文章