ASP.NET Core React 项目模板 - 如何链接到 C# 后端

Question

我正在尝试学习如何使用 ASP.NET Core 创建 React 应用程序。很有帮助的是，他们提供了 React 项目模板，其中一些示例使我能够了解一切是如何协同工作的。但是，为了确保我完全理解，我想添加我自己的代码。我从“Hello World”开始 v. small - 我只想在主页上显示它。

这是我的 home.js 文件：

import React, { Component } from 'react';

export class Home extends Component {
static displayName = Home.name;

   constructor(props) {
      super(props);
      this.state = { message: "" };

        fetch('Home/Index')
           .then(res => res.json())
           .then((result) => {
           this.setState({ message: result.message });
         });
    }

        render () {
         return (
           <div>
             <h1>Message:{this.state.message}</h1>
           </div> 
        );
    }
}

这是我希望在主页上呈现的后端代码： HomeController.cs：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;


namespace TestingReactDotNet.Controllers
{
    public class HomeController : Controller
    {
        // GET: /<controller>/
        public string Index()
        {
            return "Hello World";
        }
    }
}

我的问题是 - 我在 Home.js 中 return() 将代码合并到 HomeController.cs 并显示 "hello world" 是什么？

抱歉，如果这个问题似乎已在其他地方得到解答 - 我使用的是 Mac，因此文件结构和 Visual Studio IDE 完全不同，我很难理解已经存在的许多教程/答案。

Answer 1

对于客户端部分，您需要从客户端应用程序向 API 发出 http 请求。确实，您在 cmets 中提到的 ajax 请求。无论您使用何种前端库/框架，这几乎都是一样的。

有几种方法可以解决这个问题，但一个简单的开箱即用方法 - 如果您以现代浏览器为目标 - 是使用native Fetch API：

import React, { Component } from 'react';

export class Home extends Component {
  constructor (props) {
    super(props);
    this.state = { message: '' };

    fetch('api/home/')
      .then(response => response.json())
      .then(data => {
        this.setState({ 
            message: data 
        });
      });
  }

  render () {
    return (
        <h1>{this.state.message}</h1>
    );
  }
}

发出 http 请求的另一种方法是进入 native XmlHttpRequest，或使用第三方库（例如 axios）来抽象出这种复杂性。

至于服务器端的 api，我假设您了解并已将其配置为在 api/home/ 上可用。稍加优化将使您的控制器示例如下所示：

[Route("api/[controller]")]
public class HomeController : Controller
{
    [HttpGet]
    public async Task<IActionResult> Index()
    {
        var response = "Hello World";
        return Ok(response);
    }
}