C# 如何使我的项目搜索数据库并将结果返回到表中

我有一个项目，需要React Js搜索mssql数据库中的特定查询，然后返回结果

左边是表单，右边是我希望将数据推送到的位置，它们位于不同的jsx文件中，因此我需要将从数据库返回的数据放入一个数组常量中，并将其传递给父对象，然后返回给右框子对象

我该怎么做呢

左框代码

import React, { Component } from 'react';

import TextInput from '../SmallBits/FormItems/TextInput';

export default class LeftBox extends Component {
    constructor(props){
        super(props);
        this.state = {
            name: '',
            forename: '',
            surname: '',
            caseID: '',
            address: ''
        }
        this.handleSurnameChange = this.handleSurnameChange.bind(this);
        this.handleForenameChange = this.handleForenameChange.bind(this);
        this.handleCaseIDChange = this.handleCaseIDChange.bind(this);
        this.handleAddressChange = this.handleAddressChange.bind(this);
    }

    handleSurnameChange(e) {
        e.preventDefault();
        this.setState({ surname: e.target.value });
    }
    handleForenameChange(e) {
        e.preventDefault();
        this.setState({ forename: e.target.value });
    }
    handleCaseIDChange(e) {
        e.preventDefault();
        this.setState({ caseID: e.target.value });
    }
    handleAddressChange(e) {
        e.preventDefault();
        this.setState({ address: e.target.value });
    }
    handleFormSubmit(e) {
        e.preventDefault();

        const formPayload = {
            name: this.state.surname,
            forename: this.state.forename
        };
        console.log('Send this in a POST request:', formPayload);
    }
    render() {

        return (
            <div className="row">
                <div className="col-md-12 well-mod well-lg">
                    <form>
                        <div className="row">
                            <div className="col-md-12">
                                <div className="col-md-5">
                                    <span className="input-group-addon"><i className="glyphicon glyphicon-user"></i>{nbsp}Forename</span>
                                    <TextInput className="form-control" inputType={'text'} name={'Forename'} controlFunc={this.handleForenameChange} content={this.state.forename} placeholder={'Enter Forename'} />
                                </div>
                            </div>
                        </div>
                        <div className="row">
                            <div className="col-md-12">
                                <div className="col-md-5">
                                    <span className="input-group-addon"><i className="glyphicon glyphicon-user"></i>{nbsp}Surname</span>
                                    <TextInput className="form-control" inputType={'text'} name={'Surname'} controlFunc={this.handleSurnameChange} content={this.state.surname} placeholder={'Enter Surname'} />
                                </div>
                            </div>
                        </div>
                        <div className="row">
                            <div className="col-md-12">
                                <div className="col-md-5">
                                    <span className="input-group-addon"><i className="glyphicon glyphicon-user"></i>{nbsp}Case ID</span>
                                    <TextInput className="form-control" inputType={'number'} name={'CaseID'} controlFunc={this.handleCaseIDChange} content={this.state.caseID} placeholder={'Enter Case ID'} />
                                </div>
                            </div>
                        </div>
                        <div className="row">
                            <div className="col-md-12">
                                <div className="col-md-5">
                                    <span className="input-group-addon"><i className="glyphicon glyphicon-envelope"></i>{nbsp}Email Address</span>
                                    <TextInput className="form-control" inputType={'text'} name={'Address'} controlFunc={this.handleAddressChange} content={this.state.address} placeholder={'Enter Email Address'} />
                                </div>
                            </div>
                        </div>
                        <div className="col-md-12">
                            <div className="col-md-5">
                                <button className="btn btn-sm btn-success navbar-btn pull-right glyphicon glyphicon-search">&nbsp;Search</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
    );
  }
}

import React，{Component}来自'React'；
从“../SmallBits/FormItems/TextInput”导入TextInput；
导出默认类LeftBox扩展组件{
建造师（道具）{
超级（道具）；
此.state={
名称：“”，
名字：''，
姓：''，
案例编号：''，
地址：''
}
this.handleSurnameChange=this.handleSurnameChange.bind（this）；
this.handleForenameChange=this.handleForenameChange.bind（this）；
this.handleCaseIDChange=this.handleCaseIDChange.bind（this）；
this.handleAddressChange=this.handleAddressChange.bind（this）；
}
无手柄开关（e）{
e、 预防默认值（）；
this.setState（{姓氏：e.target.value}）；
}
handleForenameChange（e）{
e、 预防默认值（）；
this.setState（{forename:e.target.value}）；
}
handleCaseIDChange（e）{
e、 预防默认值（）；
this.setState（{caseID:e.target.value}）；
}
手提电话（e）{
e、 预防默认值（）；
this.setState（{地址：e.target.value}）；
}
handleFormSubmit（e）{
e、 预防默认值（）；
const formPayload={
姓名：this.state.姓氏，
名字：this.state.forename
};
log（'在POST请求中发送此信息：'，formPayload）；
}
render（）{
返回(
{nbsp}名字
{nbsp}姓
{nbsp}案例ID
{nbsp}电子邮件地址
搜寻
);
}
}

右框的代码

import React, { Component } from 'react';

export default class RightBox extends Component {
  render() {
    return (
        <div className="row">
            <div className="col-md-12 well-mod well-lg">
                <p>This is the Right Box</p>
            </div>
        </div>
    );
  }
}

import React，{Component}来自'React'；
导出默认类RightBox扩展组件{
render（）{
返回(
这是正确的盒子

);
}
}

主要内容代码

import React, { Component } from 'react';

import LeftBox from '../Boxes/LeftBox';
import RightBox from '../Boxes/RightBox';

import '../../../styles/Cust.css';

export default class MainContent extends Component {
  render() {
    return (
      <div className="ModContainer">
          <div className="col-md-12">
              <div className="col-md-7">
                  <LeftBox />
              </div>
              <div className="col-md-1-mod">

              </div>
              <div className="col-md-4">
                  <RightBox />
              </div>
          </div>
      </div>
    );
  }
}

import React，{Component}来自'React'；
从“../box/LeftBox”导入LeftBox；
从“../box/RightBox”导入RightBox；
导入“../../styles/Cust.css”；
导出默认类MainContent扩展组件{
render（）{
返回(
);
}
}

文本输入代码

import React from 'react';

const InputHeight = {
    height:'50px',
}

const TextInput = (props) => (
    <div className="form-group">
        <input
            className="form-control"
            name={props.name}
            type={props.inputType}
            value={props.content}
            onChange={props.controlFunc}
            placeholder={props.placeholder}
            style={InputHeight}
            required />
    </div>
);

TextInput.propTypes = {
    inputType: React.PropTypes.oneOf(['text', 'number',     'email']).isRequired,
    name: React.PropTypes.string.isRequired,
    controlFunc: React.PropTypes.func.isRequired,
    content: React.PropTypes.oneOfType([
        React.PropTypes.string,
        React.PropTypes.number,
    ]).isRequired,
    placeholder: React.PropTypes.string,
};

export default TextInput;

从“React”导入React；
常量输入权限={
高度：'50px'，
}
常量文本输入=（道具）=>(
);
TextInput.propTypes={
inputType:React.PropTypes.oneOf（['text'，'number'，'email']）。需要，
名称：React.PropTypes.string.isRequired，
controlFunc:React.PropTypes.func.isRequired，
内容：React.PropTypes.oneOfType([
React.PropTypes.string，
React.PropTypes.number，
]).要求，
占位符：React.PropTypes.string，
};
导出默认文本输入；

我将在sql之前为后端添加一层C#，这就是我要寻找的，我将如何将这个搜索按钮连接到C#后端

如果您的C#后端需要提供API端点，我将非常感激。例如，您将定义一个route

/api/search

，它接受查询参数对象并以JSON格式返回结果

在前端，您必须向后端发出HTTP请求，以根据查询检索结果

您的MainComponent将负责调用API并向RightBox提供结果