C# 结合 Javascript 测试获取天气信息

在如今的开发环境中，C# 和 JavaScript 经常被结合使用，以提供更强大的 web 应用程序。例如，我们可以利用 C# 来处理后端逻辑，同时使用 JavaScript 来处理前端的用户交互和数据展示。在本文中，我们将探讨如何使用 C# 和 JavaScript 获取天气信息的一个简单示例。

1. 概述

我们将构建一个简单的 ASP.NET Core Web 应用程序，用户可以输入城市名称，系统通过调用第三方天气 API 获取该城市的天气信息。我们使用 JavaScript 处理用户输入和更新前端显示，而使用 C# 处理与 API 的通信。

2. 准备工作

首先，需要创建一个新的 ASP.NET Core Web 应用程序。你可以使用以下命令通过 .NET CLI 创建一个新项目：

dotnet new webapp -n WeatherApp

然后进入项目目录：

cd WeatherApp

3. 添加天气 API 服务

为了获取天气信息，我们将使用 OpenWeatherMap API 作为例子。你需要在其网站上注册一个账号并获取 API 密钥。

在 Startup.cs 文件中，我们可以添加对 HTTP Client 的支持，便于调用外部 API：

public void ConfigureServices(IServiceCollection services)
{
    services.AddControllersWithViews();
    services.AddHttpClient();
}

接下来，我们可以创建一个服务类 WeatherService.cs 来封装调用 API 的逻辑。

using System.Net.Http;
using System.Text.Json;
using System.Threading.Tasks;

public class WeatherService
{
    private readonly HttpClient _httpClient;
    private const string ApiKey = "YOUR_API_KEY"; // 替换为您的 API 密钥

    public WeatherService(HttpClient httpClient)
    {
        _httpClient = httpClient;
    }

    public async Task<string> GetWeatherAsync(string cityName)
    {
        var response = await _httpClient.GetAsync($"http://api.openweathermap.org/data/2.5/weather?q={cityName}&appid={ApiKey}&units=metric");
        response.EnsureSuccessStatusCode();

        var jsonResponse = await response.Content.ReadAsStringAsync();
        return jsonResponse;
    }
}

4. 创建控制器

接下来，我们创建一个控制器 WeatherController.cs 来处理来自前端的请求。

using Microsoft.AspNetCore.Mvc;
using System.Threading.Tasks;

public class WeatherController : Controller
{
    private readonly WeatherService _weatherService;

    public WeatherController(WeatherService weatherService)
    {
        _weatherService = weatherService;
    }

    [HttpGet]
    public IActionResult Index()
    {
        return View();
    }

    [HttpPost]
    public async Task<JsonResult> GetWeather(string city)
    {
        var weatherData = await _weatherService.GetWeatherAsync(city);
        return Json(weatherData);
    }
}

5. 创建前端

接下来，我们将在 Views/Weather/Index.cshtml 中创建一个简单的表单和 JavaScript 代码来处理用户输入。

@{
    ViewData["Title"] = "天气查询";
}

<h1>天气查询</h1>

<input type="text" id="city" placeholder="输入城市名称" />
<button id="getWeather">获取天气</button>

<div id="weatherResult"></div>

@section scripts {
    <script>
        document.getElementById('getWeather').onclick = function () {
            const city = document.getElementById('city').value;
            fetch('/Weather/GetWeather', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ city })
            })
            .then(response => response.json())
            .then(data => {
                document.getElementById('weatherResult').innerHTML = JSON.stringify(data);
            })
            .catch(error => {
                console.error('Error:', error);
            });
        };
    </script>
}

6. 运行应用程序

现在，可以运行应用程序，输入城市名称并获取天气信息。只需在控制台中运行以下命令：

dotnet run

访问 http://localhost:5000/Weather，就可以看到我们的天气查询工具。

7. 结论

通过结合 C# 和 JavaScript，我们能够构建一个简单的天气信息查询工具。这个示例展示了如何使用 C# 在后台调用外部 API，并使用 JavaScript 在前端处理用户的交互。这样的组合大大提高了应用程序的灵活性和响应性。希望这个示例能够激励你在未来的项目中更多地结合使用这两种语言。