简单的WebService调用

效果

image-20211014161311874

创建一个WebService,实现接收一组数字,将其排序后,返回排序后的数字序列。
在html中输入若干数字,调用服务,展示排序后的结果。

实现

  1. 创建新项目

在 Visual Studio 中新建项目,命名为 WebServiceDemo

image-20211014161736793

  1. 添加服务

添加 -> 新建项 -> Web 服务 (ASMX),命名为 SortService.asmx

image-20211014161922790

  1. 添加 Web 窗体

添加 -> 新建项 -> Web 窗体,命名为 Sort.aspx

image-20211014162240898

  1. 编辑 SortService.asmx -> SortService.asmx.csSort.aspx

代码

SortService.asmx -> SortService.asmx.cs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;

namespace WebServiceDemo
{
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]

[System.Web.Script.Services.ScriptService]
public class SortService : System.Web.Services.WebService
{

[WebMethod]
public string Sort(string inValue)
{
var array = inValue.Split(' ');
for(int i = 0; i < array.Length; i++)
for(int j = i; j < array.Length; j++)
if (int.Parse(array[i]) > int.Parse(array[j]))
{
string temp = array[i];
array[i] = array[j];
array[j] = temp;
}

string outValue = string.Empty;
outValue = string.Join(" ", array);
return outValue;
}
}
}

Sort.aspx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Sort.aspx.cs" Inherits="WebServiceDemo.Sort" %>

<!DOCTYPE html>

<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>Sort</title>

<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">

$(function () {
$("#btnClick").click(function ()
{
var inValue = $("#inValue").val();
$.ajax({
type: "Post",
url: "/SortService.asmx/Sort",
data: "{inValue:'" + inValue + "'}",
dataType: "json",
contentType: "application/json;charset=utf-8",

success: function (result)
{
$("#outValue").val(result.d);
},

error: function (e)
{
window.alert(e.status);
}
})
})
})
</script>

</head>

<body>
<form id="form1" runat="server">
<div>
输入若干整型数值(以空格隔开):
<input type="text" id="inValue" />
<input type="button" id="btnClick" value="点击进行排序" />
<input type="text" id="outValue" />
</form>
</body>

</html>