技术开发 频道

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

  检索数据

  ListBox的点击事件调用的函数必须调用GetCustomer Web Service。因为我们在ScriptManager中指定了服务,所以可通过名称调用GetCustomer服务,为ListBox发送当前值。调用该服务的时候,还要发送两个函数的名称,一个是Web Service返回时被调用的函数——CustomerRetrieved,另一个是Web Service返回错误值时被调用的函数——GenericFailure。在绑定到要素点击事件中的函数中,变量指向该ListBox。绑定ListBox点击事件以及调用Web Service的代码应该是这样:

  $("#").bind("click", function(e) { NorthwindCRM.NorthwindCustomers.GetCustomer(this.value, CustomerRetrieved, GenericFailure);});

  我们不需要使用ScriptManager的函数调用Web Service;jQuery包含可调用Web Service的Post函数。它相当于对GetCustomer方法的调用,可以处理可能被返回的XML文档,其代码如下:

  $.post("NorthwindCustomers.asmx/GetCustomer", false, function(xml) { CustomerRetrieved(xml); }, "string");

  就个人而言,笔者觉得 ScriptManager功能更易于使用。不过,如果你使用的是ScriptManager和jQuery,就意味着要将这两种代码结合起来应用于页面,其代码量肯定多一些。如果不使用ScriptManager来支持其他Ajax功能,而且又没有将ScriptManager放置到主页面,那么它就会出现在每个页面中,因此有必要放弃ScriptManager,转而使用jQuery的Post函数

  更新页面

  在CustomerRetrieved函数中,笔者想对显示数据的页面要素进行检索,然后用Customer对象上的属性值对其进行更新。这样就引出jQuery的另一个性能:寻找所有匹配要素的选择器。jQuery函数旨在处理所有被选择器检索过的控件。以此前例子为例,用自己提供的ID属性绑定所有要素的点击事件。

  要想为选择器检索的所有要素设置值属性,可以把数据发送到jQuery的val函数。在这个例子中,就查找了CustomerTextBox,并将其值属性设置为Customer对象的ContactName属性:

function CustomerRetrieved(cust)    
{          
   $(
'#<%=Me.CustomerNameTextBox.ClientId%>').val(cust.ContactName);    
}

  不过,并非所有控件都生成一个带有值属性的要素。例如,Label控件生成的Span要素就是在标签内带有Label文本:

<span id="ctl00_MainPlaceHolder_CompanyIdLabel">
ALFKI
</span>

  在有Span要素的情况下,笔者不想更新值属性,而想更新其文本属性,它的文本属性相当于DOM的innerText属性。况且,jQuery具备一个Text函数,该函数可以设置所有被检索要素的内部文档。此示例查找的是CompanyLabel控件,并将其内部文档设置成客户对象的CompanyName属性:

$('#<%=Me.CompanyIdLabel.ClientId%>').text( cust.CompanyName );
0
相关文章