将泛型列表转换为 JSON 字符串并在 JavaScript 中处理
4.56/5 (10投票s)
如何将泛型列表转换为 JSON 字符串并在 JavaScript 中处理。
引言
我们都知道 JSON（JavaScript 对象表示法）对于在客户端使用 JavaScript 操作字符串非常有用，并且在各种浏览器上的性能都很好。在本文中，我将描述如何借助 JavaScript Serializer 类轻松地将 C# 泛型列表转换为 JSON 字符串，以及如何通过调用带有 JavaScript 的 ASP.NET ScriptManager 的 Web 服务将此字符串获取到 JavaScript 中。我将在 JavaScript 中操作该字符串以生成自定义 HTML。
背景
我将开发一个简单的 ASP.NET Web 应用程序，其中包含 Web 服务和 Web 页面，该页面将包含 JavaScript 代码，以在客户端使用 JSON 生成自定义 HTML。
开始吧
要创建自定义类型的泛型 List，我们需要一个包含一些属性的 Info 类。 我创建了包含名为 UserId 和 UserName 属性的 UserInfo 类。 下面是该类的代码
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace Experiment
{
public class UserInfo
{
public int UserId { get; set; }
public string UserName { get; set; }
}
}
就像我们对该类所做的那样，让我们创建一个 Web 服务，它将创建上述类的泛型 List，然后我们将使用 for 循环为 List 创建一些数据。 在使用数据创建泛型 List 后，我们将使用 JavaScriptSerializer 类来序列化 List 并将其转换为 JSON 字符串。 这是该代码
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
namespace Experiment.WebService
{
/// <summary>
/// Summary description for WsApplicationUser
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// To allow this Web Service to be called from script,
// using ASP.NET AJAX, uncomment the following line.
[System.Web.Script.Services.ScriptService]
public class WsApplicationUser : System.Web.Services.WebService
{
[WebMethod]
public string GetUserList()
{
List<UserInfo> userList = new List<UserInfo>();
for (int i = 1; i <= 5; i++)
{
UserInfo userInfo = new UserInfo();
userInfo.UserId = i;
userInfo.UserName =
string.Format("{0}{1}", "J", i.ToString());
userList.Add(userInfo);
}
System.Web.Script.Serialization.JavaScriptSerializer jSearializer =
new System.Web.Script.Serialization.JavaScriptSerializer();
return jSearializer.Serialize(userList);
}
}
}
注意：在这里，我们必须具有 System.Web.Script.Services.ScriptService 属性才能从 JavaScript 调用 Web 服务。
现在，正如我们对 Web 服务所做的那样，让我们创建 HTML 部分来使用 JavaScript 生成的自定义 HTML。 首先，我们需要添加对 Web 服务的服务引用，我们需要通过 JavaScript 在客户端使用该服务。 我们还将创建一个 div 'divUserList'，其中将包含通过 JavaScript 生成的自定义 HTML。 因此，WebForm 中的 HTML 代码将如下所示
<form id="form1" runat="server">
<asp:ScriptManager ID="myScirptManger" runat="Server">
<Services>
<asp:ServiceReference
Path="~/WebService/WsApplicationUser.asmx" />
</Services>
</asp:ScriptManager>
<div id="divUserList">
</div>
</form>
既然我们已经创建了 Web 服务类，让我们创建一个 JavaScript 函数 'GetUserList'，它将从 JavaScript 调用 Web 服务，如下所示
function GetUserList()
{
Experiment.WebService.WsApplicationUser.GetUserList(
ReuqestCompleteCallback, RequestFailedCallback);
}
正如你所看到的，在上面的代码中，我已经在 JavaScript 中实现了两个回调函数：ReuqestCompleteCallback 和 RequestFailedCallback。 在这里，ReuqestCompleteCallback 函数将包含用于将 JSON 字符串转换为自定义 HTML 的代码，RequestFailedCallback 函数将包含用于处理 Web 服务和其他错误（如果发生任何错误）的代码。 下面是代码
function ReuqestCompleteCallback(result)
{
result = eval(result);
CreateUserListTable(result);
}
function RequestFailedCallback(error)
{
var stackTrace = error.get_stackTrace();
var message = error.get_message();
var statusCode = error.get_statusCode();
var exceptionType = error.get_exceptionType();
var timedout = error.get_timedOut();
// Display the error.
var divResult = document.getElementById("divUserList");
divResult.innerHTML = "Stack Trace: " + stackTrace + "<br/>" +
"Service Error: " + message + "<br/>" +
"Status Code: " + statusCode + "<br/>" +
"Exception Type: " + exceptionType + "<br/>" +
"Timedout: " + timedout;
}
function CreateUserListTable(userList)
{
var tablestring = '<table ><tr><td>UsreID" +
"</td><td>UserName</td></tr>';
for (var i = 0, len = userList.length; i < len; ++i)
{
tablestring=tablestring + "<tr>";
tablestring=tablestring + "<td>" +
userList[i].UserId + "</td>";
tablestring=tablestring + "<td>" +
userList[i].UserName + "</td>";
tablestring=tablestring + "</tr>";
}
tablestring = tablestring + "</table>";
var divResult = document.getElementById("divUserList");
divResult.innerHTML = tablestring;
}
以上代码的工作方式
正如你所看到的，在上面的代码中，ReuqestCompleteCallback 将使用 JavaScript EVal 函数解析字符串，该函数会将 JSON 字符串转换为可枚举的形式。 之后，它会将该结果变量传递给另一个名为 CreateUserListTable 的函数，该函数通过使用 for 循环迭代来创建 HTML 表字符串。 然后，它会将该表字符串放在容器 div 的内部 HTML 中。
同样，如果发生任何错误，RequestFailedCallback 将处理 Web 服务错误，并将所有错误信息打印在 div 的内部 HTML 中。
现在我们需要在页面上调用 GetUserList 函数。 我们必须添加如下所示的 JavaScript 代码
window.onload=GetUserList();
就是这样。 让我们运行此应用程序，下面是预期的输出。 很容易。
结论
正如你所看到的，借助 JSON，将 C# 泛型列表转换为自定义 HTML 非常容易。 这是一个非常基本的示例。 你可以扩展此示例，并且可以创建具有分页、排序和其他功能的 JavaScript 客户端网格。 可能性是无限的。 希望你喜欢我的努力。