JSON 和 Microsoft 技术
4.88/5 (178投票s)
如何使用 ASP.NET Webforms、MVC、WCF 和 WebAPI 处理 JSON
- JavaScript 对象示例 - 383 B
- JavaScript 对象数组示例 - 433 B
- 下载 JSONToJavascriptObject
- 下载 JSON_-_WebForm-noexe
- 下载 JSON_-_MVC-noexe
- 下载 WCFJSON-noexe
- 下载 WebApiJson-noexe
引言
在本文中，我们将理解 JSON 的概念，然后进行一些实验，并了解 JavaScript 如何借助 JSON 与不同的 Microsoft 技术（如 ASP.NET MVC、WCF、Web API 和 ASP.NET Web Forms）进行通信。
(撰写此类文章需要付出巨大的努力。如果本文对您有用，请发表评论并投票！)
今天我们将学到什么？
什么是 JavaScript 对象？
在 JavaScript 世界中，我们只有两样东西：变量和函数。
“变量存储数据，函数是一些要执行的特殊操作。”
变量可以是 int、string 和 float 类型，也可以是对象类型。
“JavaScript 对象只是变量，它们将变量和函数组合成一个单元，从而实现封装。”
实验 1 – 理解 JavaScript 对象
为了理解 JavaScript 对象，不需要创建一个大型的 ASP.NET MVC 或 Web Form 项目。我们可以用一个简单的 HTML 文件来完成。
步骤 1
打开 Visual Studio。点击 文件 >> 新建 >> 文件。在下一个屏幕中选择 HTML。
第二步
按如下方式创建 JavaScript 对象
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
var Customer =
{
Name: 'Anan Kumar', Address: 'USA'
};
</script>
</head>
<body>
</body>
</html>
步骤 3
使用“点 (.)”语法访问 JavaScript 对象中的属性，如下所示
alert(Customer.Name);
步骤 4
按 Ctrl+S，提供一个有意义的名称并保存文件。
步骤 5
使用您喜欢的浏览器打开 HTML 文件并测试应用程序。
输出
实验 2 – JavaScript 对象数组
数组 - 定义为相同类型的元素集合。好消息是，JavaScript 对象数组也是可能的。
步骤 1
第一步与上面相同。
第二步
下一步是创建 JavaScript 对象数组，如下所示并进行访问
var Customers =
[
{
Name: 'Anan Kumar', Address: 'USA'
},
{
Name: 'Rajav Kiran', Address: 'UK'
},
{
Name: 'Pappu Dabbawala', Address: 'USA'
}
];
alert(Customers[0].Name);
步骤 3
保存、执行并测试页面。
什么是 XML 以及为什么需要 XML？
在上图中，一个人和一条狗正在试图交流。他们能听懂对方吗？答案很简单：不能。他们都有自己传递信息的方式。一个知道的，另一个却不明白。
解决方案是什么？
唯一的解决方案是制定一些共同的标准。如果他们都能以双方都能理解的格式传递信息，问题就可以解决。
环顾四周。每次我们看到两个不同的异构系统进行通信时，都会看到一些共同的标准。
我们与朋友交流，不仅使用一种通用的已知语言（如英语），还使用正确的语法。当我们要与计算机交流时，我们会编写“程序”（我们知道如何编写程序，编译器也知道如何读取它）。
XML
XML，通常称为可扩展标记语言，是我们用于表示可以跨平台传递的数据/消息的标准。在这个互联网世界中，通信起着重要作用。尤其是两个异构系统之间的通信。
XML 只是一种标准格式，数据和消息在该格式中进行表示和传输。每个系统/技术都知道 XML 并能理解 XML。
XML 的简单示例？
假设我们有“客户信息（客户姓名、地址和年龄）”，并且我们希望将这些信息传输到互联网上，或者从一种技术传输到另一种技术。第一步是将客户信息表示为 XML 格式，如下所示：
<Customer>
<CustomerName>Russel Fernandes</CustomerName>
<CustomerAddress>New York </CustomerAddress>
<CustomreAge>56</CustomerAge>
</Customer>
如何使用 XML 表示多个客户？
<Customers>
<Customer>
<CustomerName>Russel Fernandes</CustomerName>
<CustomerAddress>New York </CustomerAddress>
<CustomreAge>56</CustomerAge>
</Customer>
<Customer>
<CustomerName>Rajesh Mishra</CustomerName>
<CustomerAddress>India</CustomerAddress>
<CustomreAge>59</CustomerAge>
</Customer>
</Customers>
XML 有哪些问题或缺点？
XML 有两个主要缺点。
|  |
什么是 JSON？
JSON，通常称为 JavaScript 对象表示法，是用于在两种不同技术之间交换数据的另一种标准。
如何用 JSON 表示数据？
这是最好的部分 - 它与 JavaScript 对象相同。
var JsonCustomerString = '{"Name": "Anan Kumar", "Address": "USA"}';
如何用 JSON 表示数据集合？
与 JavaScript 对象相比，没有新东西。
var JsonCustomerString = '[{"Name": "Anan Kumar", "Address": "USA"},
{"Name": "Rajav Kiran", "Address": "UK"},{"Name": "Pappu Dabbawala", "Address": "USA"}]';
它和 JavaScript 对象一样吗？
不，它只是一种可以表示数据的格式，而 JavaScript 对象是一个实际存储我们数据的变量。JavaScript 对象和 JSON 之间没有直接关系。JSON 被称为 JavaScript 对象表示法，是因为 JSON 的结构看起来像 JavaScript 对象。
JSON 有哪些优点？
- JSON 非常简单。它只是一个键值对。在 XML 中，正如我们之前看到的，我们最终会编写很多其他东西。与 XML 相比，JSON 更轻量级。
- 与 XML 一样，它也是平台无关的。几乎所有现代技术都能读取和理解它。
- 以 JSON 形式表示的数据可以轻松转换为 JavaScript 对象，因此 JavaScript 处理这些数据将更容易。
实验 3 – 将 JSON 字符串转换为 JavaScript 对象
步骤 1
像上面一样创建一个新的 HTML 文件。
第二步
定义两个 JSON 字符串，如下所示。
简单的 JSON 字符串
var JsonCustomerString = '{"Name": "Anan Kumar", "Address": "USA"}';
包含客户集合的 JSON 字符串
var JsonCustomerCollectionString = '[{"Name": "Anan Kumar", "Address": "USA"},
{"Name": "Rajav Kiran", "Address": "UK"},{"Name": "Pappu Dabbawala", "Address": "USA"}]';
步骤 3
在 JavaScript 中使用 JSON.parse 方法将 JSON 字符串转换为 JavaScript 对象。
var Customer = JSON.parse(JsonCustomerString);
var Customers = JSON.parse(JsonCustomerCollectionString);
步骤 4
编写以下代码来访问 JavaScript 对象中的元素。
alert(Customer.Name);
alert(Customers[0].Name);
步骤 5
保存、执行并测试页面。
注意：在实际场景中，这种 JSON 字符串将由不同的服务器端技术发出，如 ASP.NET Web Form、ASP.NET MVC、WCF、ASP.NET Web API、PHP、Java 等。
最好的部分是，一些服务器技术会自动处理转换部分。例如，当 JavaScript 对象直接从客户端传递时，它首先会自动转换为 JSON 字符串，并在服务器端接收时，会自动转换为本机类型。反之亦然。
从这里开始，一个实验将专门针对一种 Microsoft 技术，该技术将发出 JSON 字符串。从 JavaScript 使用 jQuery，我们将消耗这个 JSON 字符串，并将其作为 JavaScript 对象。
初始设置
我们有一个自定义的 C# 类，名为 Customer。
namespace JSONExamples
{
public class Customer
{
public string CustomerName { get; set; }
public string Address { get; set; }
}
}
使用 ASP.NET Web Forms
在 ASP.NET Web Forms 中，我们将使用 HTTP 处理程序。
实验 4 - GET 请求 - 将 JSON 从 ASP.NET Web Form 获取到 JavaScript 环境
步骤 1. 创建 Web 应用程序项目
点击 文件>>新建>>项目。从对话框中选择 ASP.NET Empty Web Application 项目。
步骤 2. 创建 HTTP 处理程序
右键单击创建的 Web Form 项目，然后点击 添加>>新项。选择 Generic Handler (带 ashx 扩展名)，名称为 CustomerWebForm.ashx，然后点击 确定。
步骤 3. 修改 ProcessRequest 并发出 JSON 字符串
打开新创建的 ashx 文件，并在 ProcessRequest 函数中执行以下操作：
- 创建一个
Customer类对象并为其属性赋值Customer customer = new Customer() { CustomerName="Raju Mishra", Address="UP" }; - 使用
System.Web.Script.Serialization.JavaScriptSerializer创建上述对象的 JSON 字符串。JavaScriptSerializer serializer = new JavaScriptSerializer(); string JsonCustomerString=serializer.Serialize(customer);
- 将 Response 的 Content 类型从
text/plain更改为text/json。context.Response.ContentType = "text/json";
- 将转换后的字符串写入 Output 流
context.Response.Write(JsonCustomerString);
步骤 4. 创建用于消耗 JSON 数据的客户端代码
- 向项目中添加新项。这次，它将是一个简单的 aspx 网页。
右键单击项目。点击>>添加新项。选择 Web Form，将其命名为 CustomerClient.aspx，然后点击 确定。
- 从 Nuget 包或 Jquery.com 下载 jQuery，并将其引用到页面中。
<script src="Scripts/jquery-2.1.1.js"></script>
- 在 webform 中创建一个简单的输入按钮，并为其附加 JavaScript
onclick事件，如下所示：<input type="button" name="BtnClickMe" value="ClickMe" onclick="DisplayJSON();" />
- 在
head部分创建一个script标签，并将以下脚本添加到其中：<script type="text/javascript"> function DisplayJSON() { $.getJSON("CustomerWebForm.ashx").done(function (d) { alert(d.CustomerName); }); } </script>
步骤 5. 执行并测试
按 F5 并执行应用程序。
点击“Click me”按钮并检查输出。
实验 5 - POST 请求 - 将 JSON 从 JavaScript 环境发送到 ASP.NET Web Form 环境
步骤 1. 创建 POST 请求的处理程序
在同一个项目中，再创建一个名为 CustomerPost.ashx 的处理程序。
步骤 2. 在 ProcessRequest 中获取 POST 数据
在 ProcessRequest 中编写以下代码：
string JSONCustomerString = context.Request.Form["Customer"];
JavaScriptSerializer serializer = new JavaScriptSerializer();
Customer customer=serializer.Deserialize<Customer>(JSONCustomerString);
context.Response.ContentType = "text/plain";
context.Response.Write("Customer received from client side : "+customer.CustomerName);
步骤 3. 创建用于发送 JSON 数据的客户端代码
- 在上一个演示中创建的同一个 aspx 页面中再添加一个按钮。
<input type="button" name="BtnPostMe" value="Click To Post" onclick="PostJson();" />
- 在
head部分，添加以下 JavaScript 代码：function PostJson() { var customer={CustomerName:"ClientCustomer",Address:"Cient Address"}; $.post("CustomerPost.ashx", "Customer="+JSON.stringify(customer)).done(function (d) { alert(d); }); }
步骤 4. 执行并测试应用程序
按 F5 并执行应用程序。点击“Click To Post”按钮并检查输出。
现在您知道了
- 如何在 JavaScript 和 Web Forms 之间进行通信
- 如何在两种技术之间传递数据
现在，让我们对 ASP.NET MVC 做同样的事情。
使用 ASP.NET MVC
实验 6 - GET 请求 - 将 JSON 从 ASP.NET MVC 获取到 JavaScript 环境
步骤 1. 创建 MVC4 Web 应用程序项目
点击 文件>>新建>>项目。选择 ASP.NET MVC4 Web Application。从项目模板中选择 Empty。
步骤 2. 创建 Controller 和 Action Method
- 创建一个名为
JsonTestController的Controller。 - 创建一个名为
Index的 Action Method，如下所示：public ActionResult Index() { return View(); } - 创建一个名为
JsonData的 Action Method。 - 在该 Action Method 中，创建
customer类的对象并为其属性赋值。 - 调用基类“
Controller”中提供的Json方法。Json方法将创建一个JsonResult对象，该对象会将 customer 对象序列化为 JSON。public ActionResult JsonData() { Customer customer = new Customer() { CustomerName = "Abram", Address = "Russia" }; return Json(customer ,JsonRequestBehavior.AllowGet)); }
步骤 3. 创建用于消耗 JSON 数据的客户端代码
- 右键单击 Index Action，选择 添加视图，并创建一个名为
Index的视图。
- 在上一个 Web Form 项目中执行的操作，在这里也做同样的事情。
i. 在视图中引用 jQuery
ii. 创建一个输入按钮并将其
onclick属性设置为“DisplayJSON();”iii. 在
head部分创建一个DisplayJSONJavaScript 函数，如下所示：function DisplayJSON() { $.getJSON("@Url.Content("~/JsonTest/JsonData")").done(function (d) { alert(d.CustomerName); }); }
步骤 4. 执行并测试应用程序
按 F5 并执行应用程序。执行 Index View。点击“ClickMe”按钮。
实验 7 - POST 请求 - 将 JSON 从 JavaScript 环境发送到 ASP.NET MVC 环境
步骤 1. 创建用于 POST 请求的 Action Method
在同一个 Controller 中，再创建一个 Action Method，如下所示：
public string JsonPost(Customer customer)
{
return "Customer received from client side : " + customer.CustomerName;
}
步骤 2. 创建用于发送 JSON 数据的客户端代码
- 在上一个演示中创建的同一个 aspx 页面中再添加一个按钮。
<input type="button" name="BtnPostMe" value="Click To Post" onclick="PostJson();" />
- 在
head部分，添加以下 JavaScript 代码：function PostJson() { var customer = { CustomerName: "ClientCustomer", Address: "Cient Address" }; $.post("@Url.Content("~/JsonTest/JsonPost")", customer).done(function (d) { alert(d); }); }
注意：在使用 ASP.NET MVC 时，无需显式地将 JavaScript 对象转换为 JSON 字符串，反之亦然。它会在内部处理。
查看并比较 Web Forms 和 MVC 的服务器端和客户端代码。MVC 使事情变得更简单。
步骤 3. 执行并测试应用程序
按 F5 并执行应用程序。点击“Click To Post”按钮并检查输出。
使用 WCF REST 服务
我们的下一个服务器端技术将是 WCF REST。所以，让我们开始吧。
实验 8 - GET 请求 - 将 JSON 从 WCF REST 获取到 JavaScript 环境
步骤 1. 创建 WCF 项目点击 文件>>新建>>项目。选择 WCF 和 WCF Service Application。将项目命名为 WCFJSON，然后点击 确定。 步骤 2. 移除不必要的文件从项目中移除 IService1.cs 和 Service1.svc。
|  |
步骤 3. 创建新服务
右键单击项目。点击 添加 >> 新项。选择 WCF Service。命名为 JsonTest，然后点击 确定。
这将将在项目中创建两个文件：IJsonTest.cs（我们的服务契约）和 JsonTest.svc（我们的服务）。
步骤 4. 创建操作契约
打开 IJsonTest.cs，并在其中创建一个名为 GetJSONData 的方法，如下所示：
[OperationContract]
Customer GetJsonData();
步骤 5. 实现操作契约
打开 JsonTest.svc 并按如下方式实现 GetJsonData 方法：
public Customer GetJsonData()
{
Customer customer = new Customer()
{
CustomerName = "benazir bhutto",
Address = "Pakistan"
};
return customer;
}
步骤 6. 创建 REST 端点
- 打开 web.config 文件。
- 导航到
System.ServiceModel部分。<system.serviceModel> … </system.serviceModel>
- 在该部分中，添加新的
Services标签。在Services中，添加Service标签并指向我们创建的服务。<system.serviceModel> <services> <service name="WCFJSON.JsonTest" > … </service> </services> - 在
service中，使用WebHttpBinding配置端点，如下所示：<endpoint binding="webHttpBinding" address="Rest" contract="WCFJSON.IJsonTest" behaviorConfiguration="MyRestBehavior"></endpoint>
步骤 7. 标记操作契约 WCF REST 操作
将 WebInvoke 属性添加到 GetJsonData，如下所示：
[WebInvoke(Method="GET",ResponseFormat=WebMessageFormat.Json,
BodyStyle=WebMessageBodyStyle.Bare,
UriTemplate="GetJsonTestData")]
public Customer GetJsonData()
{….
步骤 8. 创建用于消耗 JSON 数据的客户端代码
- 创建一个名为 WCFRestClient.HTML 的简单 HTML 文件，并在其中引用 jQuery。
注意：出于演示目的，我们将 HTML 文件保留在同一个 WCF 项目中。
- 与前面的实验一样，在 HTML 页面中添加一个按钮（名为“Click Me”），该按钮将调用一个名为
DisplayCustomer的 JavaScript 函数，该函数如下所示：function DisplayJSON() { $.getJSON("https://:10647/JsonTest.svc/Rest/GetJsonTestData").done(function (d) { alert(d.CustomerName); }); }
步骤 9. 执行并测试
按 F5。导航到 WcfRestClient.html。点击“Click Me”按钮。
实验 9 - POST 请求 - 将 JSON 从 JavaScript 环境发送到 WCF REST
步骤 1. 创建新的操作契约
在同一个服务契约中，创建另一个名为 PostJsonData 的操作契约，如下所示：
[OperationContract]
string PostJsonData(Customer customer);
步骤 2. 实现服务契约
public string PostJsonData(Customer customer)
{
return customer.CustomerName;
}
步骤 3. 标记操作契约 WCF REST 操作
将 WebInvoke 属性添加到已实现的操作契约。确保将方法设置为“POST”。
[WebInvoke(Method = "POST", ResponseFormat = WebMessageFormat.Json,
RequestFormat=WebMessageFormat.Json,
UriTemplate = "PostJsonTestData")]
public string PostJsonData(Customer customer)
步骤 4. 创建用于发送 JSON 数据的客户端代码
我们将利用上一个实验中创建的同一个 HTML 文件（GET WCF Demo）。
- 添加一个额外的输入按钮，并在该按钮的 onclick 事件中调用一个名为 PostJSON 的 JavaScript 函数。
- 这次，我们无法使用 jQuery 的“
$.post”方法，因为对于 WCF REST，我们必须将请求的内容类型设置为“application/json”，而“$.post”函数不支持此设置。我们将使用核心 jQuery Ajax 函数$.ajax，如下所示：
function PostJSON()
{
var Customer = { CustomerName: 'Fernandese', Address: 'Delhi' };
$.ajax({
type: "POST",
url: "https://:10647/JsonTest.svc/Rest/PostJsonTestData",
data: JSON.stringify(Customer),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data, status, jqXHR)
{
alert(data);
},
error: function (xhr)
{
alert(xhr.responseText);
}
});
}
步骤 5. 执行并测试应用程序
按 F5 并执行应用程序。
使用 ASP.NET Web API
正如我们所知，WCF REST 允许我们创建 HTTP 服务。WCF 的主要目的是支持 SOA。在 Microsoft 生态系统中，对于 HTTP 服务，我们有 ASP.NET Web API。
我们将在未来的文章中详细讨论 Web API 和 WCF REST。目前，让我们专注于 ASP.NET WebAPI 和 JavaScript 之间的通信。
实验 9 – GET 请求 – 将 JSON 从 ASP.NET WebAPI 发送到 JavaScript 环境
步骤 1. 创建 Web API 项目
打开 Visual Studio。点击 文件>>新建>>项目。选择 ASP.NET MVC4 Web Application。在模板选择对话框中，选择 WebAPI，然后点击 确定。
步骤 2. 移除所有不必要的文件
从项目中移除所有现有的 Controllers、Views 和 CSS 文件。
步骤 3. 创建 API Controller
- 右键单击 Controller，点击 添加>>Controller。
- 在 Add Controller 对话框中，将 Controller 名称输入为“
JsonController”。 - 选择“Empty API Controller”模板。
- 点击**确定**。
步骤 4. 创建 Action Method
在 JsonController 中，您会发现基类是 APIController。
在 Controller 中创建一个名为 GET 的方法，如下所示：
public Customer Get()
{
Customer customer = new Customer()
{
CustomerName="Rajesh Oja",
Address="Nepal"
};
return customer;
}
步骤 5. 创建用于消耗 JSON 数据的客户端代码
- 创建一个名为
TestingController的新 Controller。确保基类这次是Controller。它不应该是ApiController。 - 创建一个名为
Index的 Action Method，如下所示：public ActionResult Index() { return View(); } - 右键单击 Action Method 并选择添加视图。将视图名称保留为“
index”，然后点击 Ok。 - 在新建的视图中，引用 jQuery。
- 现在创建一个简单的输入按钮，并在点击该按钮时调用一个名为“
DisplayJSON”的 JavaScript 函数，该函数如下所示： - 在
View的head部分，添加一个script标签并按如下方式创建DisplayJSON函数：function DisplayJSON() { $.getJSON("@Url.Content("~/api/Json")").done(function (d) { alert(d.CustomerName); }); }
步骤 6. 执行并测试应用程序
按 F5 并执行应用程序。
实验 10 – POST 请求 – 将 JSON 从 JavaScript 环境发送到 ASP.NET WebAPI
步骤 1. 创建 POST Action
在上一步中创建的 JsonController 中，添加一个新的方法，如下所示：
public string Post(Customer customer)
{
return customer.CustomerName;
}
步骤 2. 创建用于发送 JsonData 的客户端代码。
- 在同一个 Testing 视图中，再添加一个输入按钮，称之为“Click to Post”。
- 在该按钮的 onclick 事件中，调用一个名为“PostJSON”的 JavaScript 函数。
- 在
View的head部分，在script标签内，添加“PostJSON”方法，如下所示：
function PostJSON()
{
var Customer = { CustomerName: 'Karan Kumar', Address: 'Karnataka' };
$.post("@Url.Content("~/api/Json")", Customer).done
(
function (d)
{
alert(d);
}
);
}
步骤 3. 执行并测试应用程序
最后，我们完成了大多数 Microsoft 技术的使用。
如果您想开始使用 Jquery，可以观看下面的视频。
结论
在本文中，我们学习了 JSON 及其优点，以及 JSON 如何简化 JavaScript 世界与不同 Microsoft 世界之间的通信。
希望您喜欢阅读这篇文章。您的评论、投票和建议会激励我们写更多这样的内容。