在本文中，将探讨如何使用AngularJS来创建和消费JSONASMX服务。尽管ASMX Web服务现在被视为遗留技术，但了解其与AngularJS的集成对于初学者来说仍然具有教育意义。将使用AngularJS版本1.2.16来演示如何从数据库中检索问题列表。ASMX Web服务将托管在同一个Web应用程序中。在本例中，使用了ASPX Web表单和MSAccess后端，但可以使用HTML页面代替Web表单，当然也可以任意数据库。
为了调用服务，需要使用AngularJS的$http.get()方法，该方法向服务器发送请求。然后ASMX服务以JSON格式发送响应，该响应将在AngularJS中被解析和使用。
JSON（JavaScript Object Notation）是一种轻量级、语言无关的数据交换格式。JSON是用于存储和交换文本信息的语法。JSON比XML更小、更快且更容易解析。
Web服务是两个电子设备之间通过任何网络进行通信的方法。它旨在允许使用不同技术构建的应用程序使用国际标准进行通信。
AngularJS“允许扩展应用程序的HTML词汇。由此产生的环境非常富有表现力、可读性强且开发速度快。”
示例应用程序的业务逻辑相当简单。QuestionID和QuestionText存储在Quiz.mdb中的Questions表中。当服务Web方法被调用时，服务连接到数据库，检索一个问题列表作为DataTable，使用System.Web.Script.Serialization.JavaScriptSerializer方法将DataTable转换为JSON字符串，最后，以JSON格式提供要返回的问题列表。
步骤(1) 创建一个新的Web应用程序。创建一个新的Web站点，然后创建一个新的ASMX Web服务和一个新的Web表单或新的HTML页面。
步骤(2) 创建一个简单的数据库。在这个例子中，使用了MSAccess。当然，可以使用任何数据库，只需要更改连接字符串。
以下是C#代码示例：
public DataTable GetDataTable()
{
DataTable dataTable = new DataTable();
using (OleDbConnection conn = new OleDbConnection(
"Provider=Microsoft.Jet.OLEDB.4.0; Data Source=|DataDirectory|Quiz.mdb"))
{
OleDbCommand cmd = conn.CreateCommand();
cmd.CommandText = "select * from Questions";
cmd.CommandType = CommandType.Text;
if (conn.State != ConnectionState.Open)
conn.Open();
OleDbDataReader dr = cmd.ExecuteReader(CommandBehavior.CloseConnection);
dataTable.Load(dr);
}
return dataTable;
}
一旦DataTable准备好，它必须被转换为JSON以供AngularJS使用。以下函数使用JavaScript序列化器进行转换：
public String ConvertDataTableToJsonString(DataTable dataTable)
{
System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
List> tableRows = new List>();
Dictionary row;
foreach (DataRow dr in dataTable.Rows)
{
row = new Dictionary();
foreach (DataColumn col in dataTable.Columns)
{
row.Add(col.ColumnName, dr[col]);
}
tableRows.Add(row);
}
return serializer.Serialize(tableRows);
}
步骤(4) 设置[WebMethod]。Web方法的定义使其可以被调用。同时设置Response.ContentType为JSON格式。
[WebService(Namespace = "AnyNameSpace")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService
{
[WebMethod]
[ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Json)]
public void HelloWorld()
{
JavaScriptSerializer js = new JavaScriptSerializer();
Context.Response.Clear();
Context.Response.ContentType = "application/json";
HelloWorldData data = new HelloWorldData();
data.Message = ConvertDataTableToJsonString(GetDataTable());
Context.Response.Write(js.Serialize(data.Message));
}
public class HelloWorldData
{
public String Message;
}
}
步骤(5) 测试Web服务。运行代码并点击“Invoke”。如果一切操作正确，应该看到类似的消息。
重要的是要注意，在HelloWorld()中必须使用data.Message而不是data。如果使用data而不是data.Message，不会立即得到错误，但将遇到运行时错误，因为AngularJS无法解析它。
步骤(6) 在web.config中定义配置。在webServices协议。
如果未能正确配置webServices部分，可能会导致以下错误：
步骤(7) 准备Web表单（或HTML页面）。指令ng-app用于“自动引导”AngularJS应用程序。questionsController将从$scope获取数据，该数据又从$http.get()函数获取数据，并使用JSON.parse()方法解析消息内容。
<span>consume<a href="https://bigblog123.com/aa/15201204.php" target="_blank">JSON</a>web service</span>
步骤(8) 在不同域上运行应用程序。如果在与提供Web服务的域不同的域上运行服务消费应用程序，可能会遇到“Access-Control”错误。在这种情况下，向Web.config添加以下部分将解决此问题。