ASP.NET核心React项目模板-如何链接到C#后端
ASP.NET核心React项目模板-如何链接到C#后端
提问于 2019-08-15 19:03:12
我正在尝试学习如何使用ASP.NET核心创建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是完全不同的，我已经努力理解了相当多的教程/答案。
回答 1
Stack Overflow用户
发布于 2019-08-15 19:51:32
对于客户端部分，您需要从客户端应用程序向API发出http请求。你在评论中提到的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/home/上可用。稍加优化，您的Controller示例将如下所示：
[Route("api/[controller]")]
public class HomeController : Controller
{
[HttpGet]
public async Task<IActionResult> Index()
{
var response = "Hello World";
return Ok(response);
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57514839
复制相关文章
相似问题
腾讯云开发者
