在 .NET 后端函数中使用 React 状态作为参数

Posted 2023-02-27

【中文标题】在 .NET 后端函数中使用 React 状态作为参数

【英文标题】：Using React state as a parameter in .NET backend function

【发布时间】：2020-01-03 03:08:03

【问题描述】：

我正在探索使用前端的 React 和后端的 .NET 编写单页应用程序（而且我对这两者都很陌生，所以如果问题看起来很简单，请致歉！）。我正在使用 Visual Studio for Mac。

为了简单起见，我的后端代码所做的只是返回“你好，（人名）”，例如“你好，鲍勃”。但是，我希望这个人的名字是用户在网页上的 React 表单中输入的任何内容。

.NET 控制器：

namespace TestingReactDotNet.Controllers

    [Route("api/[controller]")]
    public class DisplayNameController : Controller
    
        [HttpGet, Route("Greeting")]
        public string Greeting(string name)
        
            var greeting = "Hello" + name;
            return greeting;
        
    

反应文件（DisplayName.js）：

import React,  Component  from "react";

export class DisplayName extends Component 
    state = 
        name: "",
        greeting: ""
    ;

    updateInput(key, value) 
    this.setState(
      [key]: value
    );
    

    calculate()
        fetch("api/DisplayName/Greeting")
            .then(response => response.text())
            .then(data => 
                this.setState( greeting: data );
            );
           <h1>this.state.greeting</h1>
  



  render() 
    return (
      <center>
        <div className="App">
          <div>
            Type a word...
            <br />
            <input
              type="text"
              placeholder="Type word here ..."
              value=this.state.name
               onChange=e => this.updateInput("name", e.target.value)
               />
               <button onClick=() => this.calculate()>Submit</button>
              <br />
          </div>
        </div>
      </center>
    );
  

我的问题是：

如何让前端和后端在此处相互通信，以便用户在表单中输入的任何名称，DisplayName 方法都可以使用来返回随后显示在页面上的字符串？

我很欣赏单独使用 React 可能更容易做到这一点，但我真的在努力确保我可以同时使用 React 和 .NET，因此非常感谢任何建议。

谢谢:)

【问题讨论】：

听起来您缺少的是如何使用 javascript fetch API 发送请求正文，以及如何在您的 .NET API 中接受请求正文。对于带有正文的fetch，请参阅此示例googlechrome.github.io/samples/fetch-api/fetch-post.html。对于 .NET 端，您可能希望创建一个与请求正文具有相同结构的类，并将其作为端点的参数，而不仅仅是字符串。

【参考方案1】：

您的代码非常棒。但是只有一个问题：当你从服务器得到结果时，你什么都不做！

看看你的calculate()方法：

calculate()
        fetch("api/DisplayName/Greeting")
            .then(response => response.text())
            .then(data => 
                this.setState( greeting: data );
            );
           <h1>this.state.greeting</h1>
  

最后一行是做什么的？它创建了一个不会出现在任何地方的无意义元素！ （另外，您忘记了 this.state.greeting 周围的花括号）。

相反，您应该使用以下方法：如果表单尚未提交，则渲染表单，否则渲染答案（这只是一个示例；您可以同时渲染两者（如果可用）等等）：

calculate()
        fetch("api/DisplayName/Greeting")
            .then(response => response.text())
            .then(data => 
                this.setState( greeting: data );
            );
  

render() 
  if ('' !== this.state.greeting) 
    // We already submitted the form, show welcome message
    return <h1>this.state.greeting</h1>
   else 
    // As your code
    // ...
  

编辑：

在您发表评论后，我注意到为什么您的服务器没有收到该名称：这很简单 - 您不发送它！

那么，如何使用 Fetch API 向 ASP.NET 后端发送参数？

我稍后会讨论它；这是一个非常广泛的主题。我想要一个全面的解释，google for "ASP.NET Core Model Binding" 和 "js fetch api"。

让我们从客户端开始：

有一些方法可以使用fetch() 发送数据：最简单的是查询字符串 (http://...?w=x&y=z) 和使用 body 选项，例如，它接受可能是 json 的字符串。

但body 参数不适用于获取请求。所以，我们将使用查询字符串。您的情况很简单，可以简单地连接字符串，对于更复杂的情况，请参阅Setting query string using Fetch GET request。

如下更新您的客户端代码：

// ...
fetch('/api/DisplayName/Greeting?name=' + encodeURIComponent(this.state.name))
// ...

（我们使用encodeURIComponent() 将字符串编码到查询字符串中）。

在服务器端，这是自动的，非常幸运！

但是要学习：发生了什么？

在 ASP.NET 中，有一个名为模型绑定的概念：从请求中获取参数并使它们成为控制器方法的参数的能力。

在 ASP.NET 中有一些内置的模型绑定器（您可以构建自己的，但在大多数情况下您不会），我们重要的是：

1) 查询字符串模型绑定器，它接受查询字符串参数并将它们作为参数同名传递给控制器​​。

2) JSON 模型绑定器，如果内容类型为 json，则解析并传递。

还有更多的模型绑定器。

这些绑定器还可以处理数组（包括查询字符串（以特殊形式）！）、嵌套对象属性（可能导致overposting attack）等等。

所以，您唯一需要做的就是传递参数，然后模型绑定器会自动为您完成所有工作！

【讨论】：

非常感谢@ChayimFriedman！我已经根据您的建议修改了我的代码。但是，我的后端 DisplayName 函数似乎仍然没有读取用户输入。您知道如何将用户输入的名称作为参数传递给DisplayName 函数吗？目前屏幕上呈现的都是“Hello”

我非常感谢您的编辑和解释！ :D