简单的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.cs 与 Sort.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>