Question

我正在学习如何使用ASP.NET Core创建React应用程序。作为一个新手，我从一开始就开始尝试在首页上显示“ Hello World”。我已经使用Visual Studio的默认React.js项目模板来入门。路由设置为默认。这是我的文件：

Home.js：

import React, { Component } from 'react';

export class Home extends Component {

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

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

    }

  render () {
      return (

            <h1>{this.state.message}</h1>

    );
  }
}

HomeController.cs：

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


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

问题在于，解析为Json的HTTP响应不是正确的响应。我已将console.logging出来以便尝试调试，看来response.json())正在检索模板应用程序随附的默认public/index.html文件中的所有文本。有谁知道为什么会这样吗？

如果我错过了一些显而易见的东西，我深表歉意-我使用的是Mac，因此文件结构和Visual Studio IDE完全不同，并且我很难理解那里已有的许多教程/答案。

Answer 1

要使用您的Message()函数，必须使HttpGet到达'api/Home'而不是'api/Home/Message'。

如果您希望端点为'api/Home/Message'，则必须像这样为Message()函数指定路由：

// api/Home/Message
[HttpGet, Route("Message")]
public async Task<IActionResult> Message()

Answer 2

类Controller用于MVC，它会生成完整的网页。

对于Web API，您需要扩展ControllerBase。而且您应该直接返回值/对象：

[Route("api/[controller]")]
[ApiController]
public class HomeController :  ControllerBase
{
    [HttpGet, Route("message")]
    public async Task<string> Message()
    {
        var response = "Hello World";
        return response;
    }
}

.NET Core React项目中的MVC路由未启动我的控制器

2 个答案: