Xamarin.Forms Web 服务教程

开始演练本教程的前提条件为已成功完成以下教程：

生成第一个 Xamarin.Forms 应用快速入门。
StackLayout教程。
标签教程。
按钮教程。
CollectionView 教程。

在本教程中，你将了解如何执行以下操作：

使用 NuGet 包管理器将 Newtonsoft.Json 添加到 Xamarin.Forms 项目。
创建 Web 服务类。
使用 Web 服务类。

你将使用 Visual Studio 2019 或 Visual Studio for Mac 创建一个简单的应用程序，演示如何从 GitHub Web API 中检索 .NET 存储库数据。检索的数据将在 CollectionView 中显示。以下屏幕截图显示了最终的应用程序：

添加 Newtonsoft.Json

剩余 13 分钟

Visual Studio
Visual Studio for Mac

若要完成本教程，应使用 Visual Studio 2019（最新版本），且安装了“使用 .NET 的移动开发”工作负载。此外，还需要一个匹配的 Mac，用于在 iOS 上生成教程应用程序。有关安装 Xamarin 平台的信息，请参阅安装 Xamarin。有关将 Visual Studio 2019 连接到 Mac 生成主机的信息，请参阅通过“与 Mac 配对”进行 Xamarin.iOS 开发。

启动 Visual Studio，新建名为 WebServiceTutorial 的 Xamarin.Forms 空白应用。

重要

本教程中的 C# 和 XAML 片段要求将解决方案命名为 WebServiceTutorial。使用不同的名称会导致：将本教程中的代码复制到解决方案中时出现生成错误。

有关创建的 .NET Standard 库的详细信息，请参阅 Xamarin.FormsXamarin.Forms 快速入门的深入探讨中的 Xamarin.Forms 应用程序剖析。
在“解决方案资源管理器”中，选择 WebServiceTutorial 项目，然后右键单击并选择“管理 NuGet 包…”：
在“NuGet 包管理器”中，选择“浏览”选项卡，搜索“Newtonsoft.Json”NuGet 包，选择它，然后单击“安装”按钮将其添加到项目：

此包将用于将 JSON 反序列化合并到应用程序。
生成解决方案，确保没有任何错误。

创建 Web 服务类

剩余 11 分钟

REST 请求是使用 HTTP 谓词通过 HTTP 发出的，该谓词与 Web 浏览器用于检索页面和将数据发送到服务器所使用的谓词相同。在本练习中，你将创建一个使用 GET 谓词的类，以从 GitHub Web API 中检索 .NET 存储库数据。

Visual Studio
Visual Studio for Mac

在“解决方案资源管理器”的“WebServiceTutorial”项目中，向该项目添加名为 Constants 的新类。然后在“Constants.cs”中，删除所有模板代码并将其替换为以下代码：
```
namespace WebServiceTutorial
{
    public static class Constants
    {
        public const string GitHubReposEndpoint = "https://api.github.com/orgs/dotnet/repos";
    }
}
```
此代码定义一个常量，即针对其发出 Web 请求的终结点。
在“解决方案资源管理器”的“WebServicesTutorial”项目中，向该项目添加名为 Repository 的新类。然后，在“Repository.cs”中，删除所有模板代码并将其替换为以下代码：
```
using System;
using Newtonsoft.Json;

namespace WebServiceTutorial
{
    public class Repository
    {
        [JsonProperty("name")]
        public string Name { get; set; }

        [JsonProperty("description")]
        public string Description { get; set; }

        [JsonProperty("html_url")]
        public Uri GitHubHomeUrl { get; set; }

        [JsonProperty("homepage")]
        public Uri Homepage { get; set; }

        [JsonProperty("watchers")]
        public int Watchers { get; set; }
    }
}
```
此代码定义了 Repository 类，用于对从 Web 服务检索的 JSON 数据进行建模。每个属性都使用 JsonProperty 属性进行修饰，其中包含 JSON 字段名称。在将 JSON 数据反序列化为模型对象时，Newtonsoft.Json 将使用此 JSON 字段名称映射到 CLR 属性。

注意

上面的类定义已经过简化，并且没有对从 Web 服务检索到的 JSON 数据进行完全建模。

在“解决方案资源管理器”的“WebServiceTutorial”项目中，向该项目添加名为 RestService 的新类。然后，在“RestService.cs”中，删除所有模板代码并将其替换为以下代码：

using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Net.Http;
using System.Net.Http.Headers;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace WebServiceTutorial
{
    public class RestService
    {
        HttpClient _client;

        public RestService()
        {
            _client = new HttpClient();

            if (Device.RuntimePlatform == Device.UWP)
            {
                _client.DefaultRequestHeaders.Add("User-Agent", ".NET Foundation Repository Reporter");
                _client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/vnd.github.v3+json"));
            }
        }

        public async Task<List<Repository>> GetRepositoriesAsync(string uri)
        {
            List<Repository> repositories = null;
            try
            {
                HttpResponseMessage response = await _client.GetAsync(uri);
                if (response.IsSuccessStatusCode)
                {
                    string content = await response.Content.ReadAsStringAsync();
                    repositories = JsonConvert.DeserializeObject<List<Repository>>(content);
                }
            }
            catch (Exception ex)
            {
                Debug.WriteLine("\tERROR {0}", ex.Message);
            }

            return repositories;
        }
    }
}

此代码定义了一个方法 (GetRepositoriesAsync)，用于从 GitHub Web API 中检索 .NET 存储库数据。此方法使用 HttpClient.GetAsync 方法将 GET 请求发送到 uri 参数指定的 Web API。 Web API 发送存储在 HttpResponseMessage 对象中的响应。响应包括 HTTP 状态代码，该代码指示 HTTP 请求是成功还是失败。如果请求成功，则 Web API 将使用 HTTP 状态代码 200（正常）和 JSON 响应进行响应，该响应位于 HttpResponseMessage.Content 属性中。在使用 JsonConvert.DeserializeObject 方法反序列化为 List<Repository> 对象之前，将使用 HttpContent.ReadAsStringAsync 方法将此 JSON 数据读取到 string。此方法使用 JSON 字段名称和 Repository 类中定义的 CLR 属性之间的映射来执行反序列化。

注意

在 UWP 上，必须在构造函数中配置 HttpClient，以便将用户代理标头添加到所有请求和接受 GitHub JSON 响应。

生成解决方案，确保没有任何错误。

在“Solution Pad”的“WebServiceTutorial”项目中，向该项目添加名为 Constants 的新类。然后在“Constants.cs”中，删除所有模板代码并将其替换为以下代码：
```
namespace WebServiceTutorial
{
    public static class Constants
    {
        public const string GitHubReposEndpoint = "https://api.github.com/orgs/dotnet/repos";
    }
}
```
此代码定义一个常量，即针对其发出 Web 请求的终结点。
在“Solution Pad”的“WebServicesTutorial”项目中，向该项目添加名为 Repository 的新类。然后，在“Repository.cs”中，删除所有模板代码并将其替换为以下代码：
```
using System;
using Newtonsoft.Json;

namespace WebServiceTutorial
{
    public class Repository
    {
        [JsonProperty("name")]
        public string Name { get; set; }

        [JsonProperty("description")]
        public string Description { get; set; }

        [JsonProperty("html_url")]
        public Uri GitHubHomeUrl { get; set; }

        [JsonProperty("homepage")]
        public Uri Homepage { get; set; }

        [JsonProperty("watchers")]
        public int Watchers { get; set; }
    }
}
```
此代码定义了 Repository 类，用于对从 Web 服务检索的 JSON 数据进行建模。每个属性都使用 JsonProperty 属性进行修饰，其中包含 JSON 字段名称。在将 JSON 数据反序列化为模型对象时，Newtonsoft.Json 将使用此 JSON 字段名称映射到 CLR 属性。

注意

上面的类定义已经过简化，并且没有对从 Web 服务检索到的 JSON 数据进行完全建模。

在“Solution Pad”的“WebServiceTutorial”项目中，向该项目添加名为 RestService 的新类。然后，在“RestService.cs”中，删除所有模板代码并将其替换为以下代码：

using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Net.Http;
using System.Threading.Tasks;
using Newtonsoft.Json;

namespace WebServiceTutorial
{
    public class RestService
    {
        HttpClient _client;

        public RestService()
        {
            _client = new HttpClient();
        }

        public async Task<List<Repository>> GetRepositoriesAsync(string uri)
        {
            List<Repository> repositories = null;
            try
            {
                HttpResponseMessage response = await _client.GetAsync(uri);
                if (response.IsSuccessStatusCode)
                {
                    string content = await response.Content.ReadAsStringAsync();
                    repositories = JsonConvert.DeserializeObject<List<Repository>>(content);
                }
            }
            catch (Exception ex)
            {
                Debug.WriteLine("\tERROR {0}", ex.Message);
            }

            return repositories;
        }
    }
}

此代码定义了一个方法 (GetRepositoriesAsync)，用于从 GitHub Web API 中检索 .NET 存储库数据。此方法使用 HttpClient.GetAsync 方法将 GET 请求发送到 uri 参数指定的 Web API。 Web API 发送存储在 HttpResponseMessage 对象中的响应。响应包括 HTTP 状态代码，该代码指示 HTTP 请求是成功还是失败。如果请求成功，则 Web API 将使用 HTTP 状态代码 200（正常）和 JSON 响应进行响应，该响应位于 HttpResponseMessage.Content 属性中。在使用 JsonConvert.DeserializeObject 方法反序列化为 List<Repository> 对象之前，将使用 HttpContent.ReadAsStringAsync 方法将此 JSON 数据读取到 string。此方法使用 JSON 字段名称和 Repository 类中定义的 CLR 属性之间的映射来执行反序列化。

生成解决方案，确保没有任何错误。

使用 Web 服务类

剩余 5 分钟

在本练习中，你将创建使用 RestService 类的用户界面，而该类将从 GitHub Web API 中检索 .NET 存储库数据。检索的数据将按 CollectionView 显示。

Visual Studio
Visual Studio for Mac

在“解决方案资源管理器”的 WebServiceTutorial 项目中，双击 MainPage.xaml 将其打开。然后在 MainPage.xaml 中，删除所有模板代码，替换为以下代码：

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="WebServiceTutorial.MainPage">
    <StackLayout Margin="20,35,20,20">
        <Button Text="Get Repository Data"
                Clicked="OnButtonClicked" />
        <CollectionView x:Name="collectionView">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <StackLayout>
                        <Label Text="{Binding Name}"
                               FontSize="Medium" />
                        <Label Text="{Binding Description}"
                               TextColor="Silver"
                               FontSize="Small" />
                        <Label Text="{Binding GitHubHomeUrl}"
                               TextColor="Gray"
                               FontSize="Caption" />
                    </StackLayout>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </StackLayout>
</ContentPage>

此代码以声明方式定义页面的用户界面，该界面由 Button 和 CollectionView 组成。 Button 将其 Clicked 事件设置为名为 OnButtonClicked 的事件处理程序，将在下一步中创建该处理程序。 CollectionView 将 CollectionView.ItemTemplate 属性设置为 DataTemplate，该属性定义 CollectionView 中每项的外观。 DataTemplate 的子元素是 StackLayout，其中包含三个 Label 对象。 Label 对象将其 Text 属性绑定到每个 Repository 对象的 Name、Description 和 GitHubHomeUrl 属性。若要深入了解数据绑定，请参阅 Xamarin.Forms 数据绑定。

此外，CollectionView 具有使用 x:Name 属性指定的名称。该操作使代码隐藏文件能够使用分配给它的名称访问对象。

在“解决方案资源管理器”的 WebServiceTutorial 项目中，展开“MainPage.xaml”，然后双击“MainPage.xaml.cs”将其打开。然后，在“MainPage.xaml.cs”中，删除所有模板代码，替换为以下代码：
```
using System;
using System.Collections.Generic;
using Xamarin.Forms;

namespace WebServiceTutorial
{
    public partial class MainPage : ContentPage
    {
        RestService _restService;

        public MainPage()
        {
            InitializeComponent();
            _restService = new RestService();
        }

        async void OnButtonClicked(object sender, EventArgs e)
        {
            List<Repository> repositories = await _restService.GetRepositoriesAsync(Constants.GitHubReposEndpoint);
            collectionView.ItemsSource = repositories;
        }
    }
}
```
OnButtonClicked 方法（在点击 Button 时执行）调用 RestService.GetRepositoriesAsync 方法来从 GitHub Web API 中检索 .NET 存储库数据。 GetRepositoriesAsync 方法需要 string 参数，该参数表示调用的是由 Constants.GitHubReposEndpoint 字段返回的 Web API 的 URI。

检索请求的数据后，CollectionView.ItemsSource 属性设置为检索的数据。
在 Visual Studio 工具栏中，按“开始”按钮（类似“播放”按钮的三角形按钮），启动所选远程 iOS 模拟器或 Android Emulator 内的应用程序。点击 Button，从 GitHub 检索 .NET 存储库数据：

在 Visual Studio 中停止应用程序。

要详细了解如何在 Xamarin.Forms 中使用基于 REST 的 Web 服务，请参阅使用 RESTful Web 服务（指南）。

在 Solution Pad 的 WebServiceTutorial 项目中，双击 MainPage.xaml 将其打开。然后在 MainPage.xaml 中，删除所有模板代码，替换为以下代码：

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="WebServiceTutorial.MainPage">
    <StackLayout Margin="20,35,20,20">
        <Button Text="Get Repository Data"
                Clicked="OnButtonClicked" />
        <CollectionView x:Name="collectionView">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <StackLayout>
                        <Label Text="{Binding Name}"
                               FontSize="Medium" />
                        <Label Text="{Binding Description}"
                               TextColor="Silver"
                               FontSize="Small" />
                        <Label Text="{Binding GitHubHomeUrl}"
                               TextColor="Gray"
                               FontSize="Caption" />
                    </StackLayout>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </StackLayout>
</ContentPage>

此代码以声明方式定义页面的用户界面，该界面由 Button 和 CollectionView 组成。 Button 将其 Clicked 事件设置为名为 OnButtonClicked 的事件处理程序，将在下一步中创建该处理程序。 CollectionView 将 CollectionView.ItemTemplate 属性设置为 DataTemplate，该属性定义 CollectionView 中每项的外观。 DataTemplate 的子元素是 StackLayout，其中包含三个 Label 对象。 Label 对象将其 Text 属性绑定到每个 Repository 对象的 Name、Description 和 GitHubHomeUrl 属性。若要深入了解数据绑定，请参阅 Xamarin.Forms 数据绑定。

此外，CollectionView 具有使用 x:Name 属性指定的名称。该操作使代码隐藏文件能够使用分配给它的名称访问对象。

在 Solution Pad 的 WebServiceTutorial 项目中，展开“MainPage.xaml”，然后双击“MainPage.xaml.cs”将其打开。然后，在“MainPage.xaml.cs”中，删除所有模板代码，替换为以下代码：
```
using System;
using System.Collections.Generic;
using Xamarin.Forms;

namespace WebServiceTutorial
{
    public partial class MainPage : ContentPage
    {
        RestService _restService;

        public MainPage()
        {
            InitializeComponent();
            _restService = new RestService();
        }

        async void OnButtonClicked(object sender, EventArgs e)
        {
            List<Repository> repositories = await _restService.GetRepositoriesAsync(Constants.GitHubReposEndpoint);
            collectionView.ItemsSource = repositories;
        }
    }
}
```
OnButtonClicked 方法（在点击 Button 时执行）调用 RestService.GetRepositoriesAsync 方法来从 GitHub Web API 中检索 .NET 存储库数据。 GetRepositoriesAsync 方法需要 string 参数，该参数表示调用的是由 Constants.GitHubReposEndpoint 字段返回的 Web API 的 URI。

检索请求的数据后，CollectionView.ItemsSource 属性设置为检索的数据。
在 Visual Studio for Mac 工具栏中，按“开始”按钮（类似“播放”按钮的三角形按钮），启动所选 iOS 模拟器或 Android Emulator 内的应用程序。点击 Button，从 GitHub 检索 .NET 存储库数据：

在 Visual Studio for Mac 中停止应用程序。

要详细了解如何在 Xamarin.Forms 中使用基于 REST 的 Web 服务，请参阅使用 RESTful Web 服务（指南）。

恭喜！

100% 完成！

祝贺你完成了本教程的学习，在本教程中你学习了如何：

使用 NuGet 包管理器将 Newtonsoft.Json 添加到 Xamarin.Forms 项目。
创建 Web 服务类。
使用 Web 服务类。

后续步骤

本系列教程涵盖使用 Xamarin.Forms 创建移动应用程序的基础知识。若要详细了解 Xamarin.Forms 开发，请阅读关于以下功能的文章：

可使用 4 个主要控件组创建 Xamarin.Forms 应用程序的用户界面。有关详细信息，请参阅控件引用。
数据绑定将两个对象的属性链接起来，对某一属性的更改就会自动反映在另一个属性中。有关详细信息，请参阅数据绑定。
Xamarin.Forms 提供多种页面导航体验，具体取决于所使用的页面类型。有关详细信息，请参阅导航。
样式有助于减少重复的标记，并且使用样式可以更轻松地更改应用程序的外观。有关详细信息，请参阅设置 Xamarin.Forms 应用的样式。
XAML 标记扩展通过支持从文本字符串以外的源设置元素属性，扩展 XAML 的功能和灵活性。有关详细信息，请参阅 XAML 标记扩展。
数据模板让你可以在支持的视图上定义数据表示形式。有关详细信息，请参阅数据模板。
通过 Renderer 类可以在每个平台上以不同方式呈现每个页面、布局和视图，反过来又可以创建本机控件，在屏幕上排列该控件，并添加共享代码中指定的行为。开发人员可以实现自定义 Renderer 类，以自定义控件的外观和/或行为。有关详细信息，请参阅自定义呈现器。
还可以自定义每个平台上的本机控件的效果。通过子类化 PlatformEffect 类在特定于平台的项目中创建效果，并将其附加到相应的 Xamarin.Forms 控件中使用。有关详细信息，请参阅效果。
共享代码可通过 DependencyService 类访问本机功能。有关详细信息，请参阅通过 DependencyService 访问本机功能。

此外，也可阅读 Charles Petzold 撰写的使用 Xamarin.Forms 创建移动应用一书，了解有关 Xamarin.Forms 的详细信息。可获取此书的 PDF 版本或多种电子书格式的版本。

通过

添加 Newtonsoft.Json

创建 Web 服务类

使用 Web 服务类

恭喜！

后续步骤

相关链接