65.9K
CodeProject 正在变化。 阅读更多。
Home

JavaScript 对象传递给期望类型为 Object 的 .NET WebMethod

Daithi44
starIconstarIconstarIconstarIconemptyStarIcon

4.00/5 (3投票s)

2010年2月20日

CPOL

4分钟阅读

viewsIcon

32194

downloadIcon

418

本文介绍如何将 JavaScript 对象传递给一个期望 Object 类型参数的 .NET Web 服务。

引言

本文介绍如何将 JavaScript 对象传递给一个期望 Object 类型参数的 .NET Web 服务。JSON 是一种非常强大且轻量级的数据传输方式，用于与 Web 服务进行数据交换。然而，如果需要向 Web 服务传递大量参数，构建 JSON 字符串可能会很麻烦，而让 WebMethod 接受匹配数量的参数同样令人头疼。本文展示了如何构建和传递一个名为“Customer”的 JavaScript 对象，并将其传递给一个期望“Customer”类型对象的 .NET Web 服务 WebMethod。

背景

我构建的示例使用了 YUI 库中的三个基本组件：Connection Manager、Event 和 JSON。这些文件的链接指向外部的 .js 文件，因此一旦连接到互联网，示例代码应该就能正常工作。我之所以选择 YUI（Yahoo 的 JavaScript 库），而不是 AJAX.NET，是因为我正在编写一个 ASP.NET 页面。YUI 是一个出色的 JavaScript 库，汇聚了顶尖的前端工程师。简单来说，我不使用 ASP.NET 控件或 AJAX.NET，我使用普通的输入框等元素和 DOM。我还使用了 document.getElementById，而不是 YUI 或我自己更简洁的版本，因为它节省了输入，但在这里是为了清晰地说明我正在做什么。

虽然本示例中的 default.aspx 页面可以使用 default.html 页面替换，但 Web 服务可以通过在 ASPX 页面中创建的 Session 变量进行保护，然后通过在声明 WebMethod 时添加 <WebMethod(EnableSession:=True)> 来访问。我通常会使用项目中引用的第二个 Web 服务，并从网站的 Web 服务调用第二个 Web 服务，因为这个 Web 引用过的 Web 服务在客户端的 JavaScript 代码中是不可见的，因此不会被暴露。不过，本文不是关于这个的。

发生了什么

当您启动附加的项目时，将加载默认页面。该页面有一个 onload 事件，该事件会调用 WebMethod ‘./WebService.asmx/GetProfileData’。在此 WebMethod 中，我们创建一个 Customer 对象，然后使用 JSONHelper 类（此处引用 此文章）的 ToJSON 函数，并从 Customer 对象返回一个 JSON 字符串。此 JSON 在客户端被处理，并填充相关的文本框。

Screen_shot.png

通过“修改”按钮，用户可以选择保存修改。点击“保存”按钮会触发一个事件，该事件根据文本框中的值创建一个 JavaScript 对象。然后将该对象序列化为字符串，并作为 customer 对象发送到 UpdateProfileData。

Using the Code

在项目中，我们在 Customer.vb 中定义了一个 customer 类。

onload 事件调用 GetProfileData WebMethod 来获取客户详细信息。此调用的 successHandler 在将值加载到相关文本框之前会显示一个提示框。

更新 WebMethod UpdateProfileData 期望两个参数：一个是 string 类型，另一个是 Customer.vb 中定义的 Customer 类型对象。

<WebMethod(EnableSession:=True)> _
  	Public Function UpdateProfileData(ByVal anotherParameter As String, _
	ByVal objCNameAddress As Customer) As String

customer 对象包含多个属性：TitleID、First Name、Last Name、Address 详细信息、一个布尔值表示该 Customer 是否为公司等。

有两种方法可以将此类数据发送到 WebMethod：

  1. 我们可以像这样连接参数的 JSON 字符串
    makeRequest.getDetails('./WebService.asmx/UpdateProfileData', Callback, _
	'{"anotherParameter":"something", FirstName:"'+FirstName+'", _
	LastName:"'+ LastName +'", Address1:"'+ Address1 +'", Address2:"'+ _
	Address12+'", Address3:"'+ Address3+'"}');

    我们的 WebMethod 将如下所示：

    WebMethod(EnableSession:=True)> _
      Public Function UpdateProfileData(ByVal anotherParameter As String, _
      ByVal FirstName As String, ByVal LastName As String, ByVal Address1 As String, _
      ByVal Address2 As String, ByVal Address3 As String) As String

    您可以看到这有多么困难，构建并确保语法正确是多么不方便。

  2. 或者使用最初定义的 UpdateProfileData。
    'UpdateProfileData as fully defined
<WebMethod(EnableSession:=True)> _
	Public Function UpdateProfileData(ByVal anotherParameter As String, _
	ByVal objCNameAddress As Customer) As String
	'This customer object could be passed on to 
	'somewhere else of use, but we'll just return a stringified version 
		Dim JSONify As New JSONHelper
		Return JSONify.ToJSON(objCNameAddress)
	End Function

在保存事件中，我们创建 JavaScript 对象，将其序列化为字符串，然后将其传递给我们的 Web 服务。

创建 JavaScript 对象并将其发送到 WebMethod。由于我们的 WebMethod 期望两个参数，我们传递第一个 String 类型参数和第二个 Object 类型参数。

var obj = {};
obj.Address1 = document.getElementById("Address1").value;
obj.Address2 = document.getElementById("Address2").value;
obj.Address3 = document.getElementById("Address3").value;
obj.City = document.getElementById("City").value;
obj.CompanyName = "Company Name"; 	//Hard code some variables as we just display subset 
				//on the browser.
obj.ContactName = "Contact Name";
obj.County = document.getElementById("County").value;;
obj.CustomerOwner = "Customer Owner";
obj.DOB = "DOB";
obj.EmailAddress = document.getElementById("EmailAddress").value;
obj.FirstName = document.getElementById("FirstName").value;
obj.IsCompany = false;
obj.LastName = document.getElementById("LastName").value;
obj.PhoneDay = document.getElementById("PhoneDay").value;
obj.PostalCode = document.getElementById("PostalCode").value;
obj.TitleID =3;
var jsonStr = YAHOO.lang.JSON.stringify(obj); 
objCNameAddress = '{"anotherParameter":"somevalue",objCNameAddress:'+ jsonStr +'}';
makeRequest.getDetails('./WebService.asmx/UpdateProfileData', 
	updateContactDetailsCallback, objCNameAddress);

UpdateProfileData 的回调 successHandler 与 onload 事件的回调相同，因此我们再次看到一个提示框。如果我们进行了任何修改，这些修改将在这里显示，然后响应将再次填充相关的文本框。

我没有深入讲解 web.config 的编辑，但要允许使用 .asmx 和 JSON 序列化，有许多地方需要设置。不过，在本文的 示例代码 中，所有设置都已完成，以便运行。

历史

  • 2010年2月20日：初始发布
  • 2010 年 2 月 24 日：文章更新
© . All rights reserved.