ASP.NET Core React项目模板-如何链接到C#后端 [英] ASP.NET Core React project template - how to link to C# backend

问题描述

我正在尝试学习如何使用ASP.NET Core创建React应用程序.有用的是，他们提供了React项目模板，其中提供了一些示例，这些示例使我能够看到所有事情如何协同工作.但是，为了确保我完全理解，我想添加自己的代码.我将从"Hello World"开始以v.small开头-我只希望此内容显示在主页上.

I am trying to learn how to create React applications with ASP.NET Core. Helpfully they provide the React project template which some examples that enable me to see how everything is working together. However, in order to make sure I fully understand, I want to add my own code. I'm starting v. small with "Hello World" - I just want this displayed on the home page.

这是我的home.js文件:

Here is my home.js file:

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:

Here is my backend code that I want to be rendered on the home page: 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"?

My question is - what do I return() in Home.js to incorporate the code in HomeController.cs and display "hello world" ?

很抱歉，这个问题是否在其他地方得到了回答-我使用的是Mac，因此文件结构和Visual Studio IDE完全不同，因此我很难理解那里已有的许多教程/答案.

Apologies if this question appears to have been answered elsewhere - I use a Mac, so the file structure and Visual Studio IDE are quite different and I have struggled to understand quite a few of the tutorials/answers already out there.

推荐答案

对于客户端，您需要从客户端应用向API发出http请求.实际上，您在评论中提到的ajax请求.无论使用哪种前端库/框架，这几乎都是相同的.

For the client part, you need to make a http request from your client app to the API. The ajax request you mention in the comments, indeed. This is pretty much the same regardless of frontend library/framework you use.

有几种解决方法，但是一种简单的即用型方法(如果您定位到现代浏览器)是使用

There are several ways around this, but a simple out-of-the-box method - should you target modern browsers - is to use the 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请求的另一种方法是本地XmlHttpRequest ，或使用诸如 axios 之类的第三方库来抽象其复杂性.

Another alternative on making http requests is into the native XmlHttpRequest, or use third-party libraries like for example axios to abstract away the complexities of this.

对于服务器端的api，我假设您理解并配置为在 api/home/上可用.进行一些优化将使您的Controller示例看起来像这样:

As for the api on the server-side, I assume you understand and have configured it to be available at api/home/. A little bit of optimisation would make your Controller sample look like this:

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

这篇关于ASP.NET Core React项目模板-如何链接到C#后端的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！