Reactjs ASP.NET核心API和React JS_Reactjs_Asp.net Apicontroller

Reactjs ASP.NET核心API和React JS

reactjs

Reactjs ASP.NET核心API和React JS,reactjs,asp.net-apicontroller,Reactjs,Asp.net Apicontroller,我创建了ASP.NET核心API和React CURD实践示例。但我使用了react语义ui来查看。我对react和ASP.NET没有任何建议，因此我可以改进我的代码我可以获取、发布、放置和删除客户记录，但有些小问题或要点我不知道如何实现。这些措施如下： 1-我使用了模式，所以我可以打开窗体作为弹出窗口（AddCustomer是用于添加和编辑记录的窗体），因为我有两个函数来打开和关闭模式，但我不知道如何从Customer.js调用它们，也不知道如何在成功的POST、PUT、DELETE请求中

我创建了ASP.NET核心API和React CURD实践示例。但我使用了react语义ui来查看。我对react和ASP.NET没有任何建议，因此我可以改进我的代码

我可以获取、发布、放置和删除客户记录，但有些小问题或要点我不知道如何实现。这些措施如下：

1-我使用了模式，所以我可以打开窗体作为弹出窗口（AddCustomer是用于添加和编辑记录的窗体），因为我有两个函数来打开和关闭模式，但我不知道如何从Customer.js调用它们，也不知道如何在成功的POST、PUT、DELETE请求中调用它们

2-当我打开表单添加或编辑记录时，我无法将其存储在状态中。当我尝试在输入字段中键入时，它不会存储在名称和地址中

3-你也可以在Customer.js中看到，我正在隐藏表单和删除模式，但我想在POST、PUT和delete任务完成时关闭它们

这是Customer.js

import React from 'react';

import AddCustomer from './AddCustomer';
import CustomerView from './CustomerView';
import DeleteRecord from './DeleteRecord';

export default class Customer extends React.Component {

constructor(props) {
    super(props);
    this.state = {
        isAddCustomer:false,
        isEditCustomer:false,
        isDeleteCustomer:false,
        closeForm:false,
        singleCustomer:{},
        deleteId:{}
    }

}

onCreate = () => {
    console.log("is add customer true ")
    this.setState({isAddCustomer:true})
}

onFormControl = () =>{
    this.setState({
        isAddCustomer:false,
        isEditCustomer:false
    })
}

onDeleteClick = customerId => {
    const headerTitle = "Customer";
    console.log("onDeleteClick")
    this.setState({
        isDeleteCustomer:true,
        deleteId:{
            ID:customerId,
            title:headerTitle,
            open:true
        }
    });
}

//New Customer record
onAddFormSubmit = data => {

    console.log("In add form submit")
    console.log(data)

    let customerApi = 'https://localhost:44387/api/Customers';
    let method = '';

    if(this.state.isEditCustomer){
        console.log("In Edit api")
        console.log(this.state.editCustomerId)
        customerApi = 'https://localhost:44387/api/Customers/' + this.state.editCustomerId;
        method = 'PUT'

    }else{
        console.log("In Add api")
        customerApi = 'https://localhost:44387/api/Customers';
        method = 'POST'

    }

    const myHeader = new Headers({
        'Accept':'application/json',
            'Content-type':'application/json'
    });

    fetch(customerApi,{
        method:method,
        headers:myHeader,
        body:JSON.stringify(data)

    })
    .then(res => res.json())
    .then(
        (result) => {
            this.setState({
                users:result,
                isAddCustomer:false,
                isEditCustomer:false
            })
        },(error) => {
            this.setState({ error });
        }
    )
}

//Edit customer record
onEditCustomer = customerId => {

    //Get ID, name and address
    this.setState({
        editCustomerId:customerId
    });

    const customerApi = 'https://localhost:44387/api/Customers/'+customerId;

    const myHeader = new Headers({
        'Accept':'application/json',
            'Content-type':'application/json; charset=utf-8'
    });

    fetch(customerApi,{
        method:'GET',
        headers:myHeader

    })
    .then(res => res.json())
    .then(
        (result) => {
            this.setState({
                isEditCustomer:true,
                isAddCustomer:false,
                singleCustomer:{
                    customer:result,
                    isEditCustomer:true
                }
            })
        },(error) => {
            this.setState({ error });
        }
    )

}

//Delete Customer

onDeleteCustomer = customerId => {

    const customerApi = 'https://localhost:44387/api/Customers/'+customerId;

    const myHeader = new Headers({
        'Accept':'application/json',
            'Content-type':'application/json; charset=utf-8'
    });

    fetch(customerApi,{
        method:'DELETE',
        headers:myHeader

    })
    .then(res => res.json())
    .then(
        (result) => {
            this.setState({
                isDeleteCustomer:false
            })
        },(error) => {
            this.setState({ error });
        }
    )
}

render() {

    let form;
    if(this.state.isAddCustomer && !this.state.isEditCustomer){
        console.log("Add")
        form = <AddCustomer onAddFormSubmit={this.onAddFormSubmit}
        isAddCustomer = {this.state.isAddCustomer}
        onFormControl = {this.onFormControl}/>
    }else if(this.state.isEditCustomer && !this.state.isAddCustomer){
        console.log("Edit")
        form = <AddCustomer onAddFormSubmit={this.onAddFormSubmit}
        singleCustomer = {this.state.singleCustomer}
        onFormControl = {this.onFormControl}/>
    }else if(this.state.isDeleteCustomer){
        console.log("Delete")
        console.log(this.state.deleteId)
        form = <DeleteRecord onDeleteCustomer={this.onDeleteCustomer}
        deleteId = {this.state.deleteId}
        />
    }

    return (
        <div>
            {form}
            <br/>
            <CustomerView 
                onEditCustomer = {this.onEditCustomer} 
                onCreate = {this.onCreate} 
                onDeleteClick = {this.onDeleteClick}/>
        </div>
    )
}

}

import React from 'react';
import { Button, Form, Modal } from 'semantic-ui-react';

export default class AddCustomer extends React.Component {

constructor(props) {
    super(props);
    this.state = {
        showCreateForm: false,
        addOrdit:false,
        id: "",
        name: "",
        address: "",
        formData: {},
        record: {}
    }
    if (props.isAddCustomer){
        this.state.showCreateForm = props.isAddCustomer;
    }
    else if (props.singleCustomer) {
        console.log("Single customer")
        console.log(props.singleCustomer)
        this.state.id = props.singleCustomer.customer.customerId;
        this.state.name = props.singleCustomer.customer.name;
        this.state.address = props.singleCustomer.customer.address;
        this.state.record = props.singleCustomer.customer;
        this.state.showCreateForm = props.singleCustomer.isEditCustomer;
        this.state.addOrdit = props.singleCustomer.isEditCustomer;
        console.log(this.state.name)

    }else if(props.closeForm){
        this.state.showCreateForm = props.closeForm;
    }

}

handleChangeName = event => {
    const value = event.target.value;
    this.setState({ name:value });
}

handleChangeAddress = event => {
    const value = event.target.value;
    this.setState({ address:value });
}

handleSubmit = event => {
    event.preventDefault();
    if(this.state.addOrdit){

        this.setState({
            record: {
                customerId: this.state.id,
                name: this.state.name, 
                address: this.state.address
            }
        });
    this.props.onAddFormSubmit(this.state.record);

    }else{
        this.setState({
            formData: {
                name: this.state.name, 
                address: this.state.address
            }
        });
        this.props.onAddFormSubmit(this.state.formData);
    }


}

//On cancel button click close Create user form
closeCreateForm = () => {
    this.setState({ showCreateForm: false })
    this.props.onFormControl();
}

//Open Create new Customer form
openCreateCustomer = () => {
    this.setState({ showCreateForm: true })
}

render() {

    let formTitle;
    if (this.state.id !== 0) {
        formTitle = "Edit Customer";
    } else {
        formTitle = "New Customer";
    }

    return (
        <div>
            <Modal size='small' 
            closeOnTriggerMouseLeave={false} 
            open={this.state.showCreateForm}>
                <Modal.Header>
                    {formTitle}
                </Modal.Header>
                <Modal.Content>
                    <Form onSubmit={this.handleSubmit}>

                        <Form.Field>
                            <label>Name</label>
                            <input type="text" placeholder='Name' name="name"
                                value={this.state.name}
                                onChange={this.handleChangeName} />
                        </Form.Field>

                        <Form.Field>
                            <label>Address</label>
                            <input type="text" placeholder='Address' name="address"
                                value={this.state.address}
                                onChange={this.handleChangeAddress} />
                        </Form.Field>

                        <br />
                        <Button type='submit' floated='right' color='green'>Create</Button>
                        <Button floated='right' onClick={this.closeCreateForm} 
  color='black'>Cancel</Button>
                        <br />
                    </Form>

                </Modal.Content>
            </Modal>

        </div>
    )
}

}

从“React”导入React；
从“/AddCustomer”导入AddCustomer；
从“/CustomerView”导入CustomerView；
从“/DeleteRecord”导入DeleteRecord；
导出默认类Customer extends React.Component{
建造师（道具）{
超级（道具）；
此.state={
isAddCustomer：错，
顾客：错，
isDeleteCustomer:错，
closeForm:false，
单一客户：{}，
deleteId:{}
}
}
onCreate=（）=>{
log（“添加客户是否为真”）
this.setState（{isAddCustomer:true}）
}
onFormControl=（）=>{
这是我的国家({
isAddCustomer：错，
顾客：错
})
}
onDeleteClick=customerId=>{
const headerTitle=“客户”；
日志（“onDeleteClick”）
这是我的国家({
是的，
删除ID:{
ID:customerId，
标题：headerTitle，
开放：是的
}
});
}
//新客户记录
onAddFormSubmit=数据=>{
console.log（“在添加表单提交中”）
console.log（数据）
让客户参与进来https://localhost:44387/api/Customers';
让方法=“”；
if（this.state.isEditCustomer）{
console.log（“在编辑api中”）
console.log（this.state.editCustomerId）
customerApi=https://localhost:44387/api/Customers/'+this.state.editCustomerId；
方法='PUT'
}否则{
log（“在添加api中”）
customerApi=https://localhost:44387/api/Customers';
方法='POST'
}
const myHeader=新的头文件({
“接受”：“应用程序/json”，
“内容类型”：“应用程序/json”
});
获取（customerApi{
方法:方法,，
标题：myHeader，
正文：JSON.stringify（数据）
})
.then（res=>res.json（））
.那么(
（结果）=>{
这是我的国家({
用户：结果，
isAddCustomer：错，
顾客：错
})
}，（错误）=>{
this.setState（{error}）；
}
)
}
//编辑客户记录
onEditCustomer=customerId=>{
//获取ID、名称和地址
这是我的国家({
editCustomerId:customerId
});
常数customerApi=https://localhost:44387/api/Customers/“+客户ID；
const myHeader=新的头文件({
“接受”：“应用程序/json”，
“内容类型”：“应用程序/json；字符集=utf-8”
});
获取（customerApi{
方法：'GET'，
标题：myHeader
})
.then（res=>res.json（））
.那么(
（结果）=>{
这是我的国家({
顾客：是的，
isAddCustomer：错，
单一客户：{
顾客：结果，
顾客：是的
}
})
}，（错误）=>{
this.setState（{error}）；
}
)
}
//删除客户
onDeleteCustomer=customerId=>{
常数customerApi=https://localhost:44387/api/Customers/“+客户ID；
const myHeader=新的头文件({
“接受”：“应用程序/json”，
“内容类型”：“应用程序/json；字符集=utf-8”
});
获取（customerApi{
方法：'DELETE'，
标题：myHeader
})
.then（res=>res.json（））
.那么(
（结果）=>{
这是我的国家({
isDeleteCustomer:错误
})
}，（错误）=>{
this.setState（{error}）；
}
)
}
render（）{
让它形成；
if（this.state.isAddCustomer&&！this.state.isEditCustomer）{
控制台日志（“添加”）
表格=
}else if（this.state.isEditCustomer&！this.state.isAddCustomer）{
控制台日志（“编辑”）
表格=
}else if（this.state.isDeleteCustomer）{
控制台日志（“删除”）
console.log（this.state.deleteId）
表格=
}
返回(
{form}


)
}
}

这里是CustomerView.js

import React from 'react';
import { Table, Button } from 'semantic-ui-react';

export default class CustomerView extends React.Component {

constructor(props) {
    super(props);
    this.state = {
        error: null,
        deleteTitle: "customer",
        isLoaded: false,
        formClose: false,
        singleCustomer: [],
        users: []
    }
}

//fetch data 
componentDidMount() {

    const customerApi = 'https://localhost:44387/api/Customers';

    const myHeader = new Headers();
    myHeader.append('Content-type', 'application/json');
    myHeader.append('Accept', 'application/json');
    myHeader.append('Origin', 'https://localhost:44387');

    const options = {
        method: 'GET',
        myHeader
    };

    fetch(customerApi, options)
        .then(res => res.json())
        .then(
            (result) => {
                this.setState({
                    users: result,
                    isLoaded: true
                });
            },
            (error) => {
                this.setState({
                    isLoaded: false,
                    error
                });
            }
        )
}

//Delete Customer

onDeleteCustomer = customerId => {

    const { users } = this.state;
    this.setState({
        users: users.filter(customer => customer.customerId !== customerId)
    });

    const customerApi = 'https://localhost:44387/api/Customers/' + customerId;

    const myHeader = new Headers({
        'Accept': 'application/json',
        'Content-type': 'application/json; charset=utf-8'
    });

    fetch(customerApi, {
        method: 'DELETE',
        headers: myHeader

    })
        .then(res => res.json())
        .then(
            (result) => {
                this.setState({

                })
            }, (error) => {
                this.setState({ error });
            }
        )
}

render() {
    const { users } = this.state;

    return (
        <div>

            <Button color='blue' onClick={() => this.props.onCreate()}>New Customer</Button>
            <br/>
            <br/>
            <Table celled textAlign='center'>
                <Table.Header>
                    <Table.Row>
                        <Table.HeaderCell>ID</Table.HeaderCell>
                        <Table.HeaderCell>Name</Table.HeaderCell>
                        <Table.HeaderCell>Address</Table.HeaderCell>
                        <Table.HeaderCell>Action</Table.HeaderCell>
                        <Table.HeaderCell>Action</Table.HeaderCell>
                    </Table.Row>
                </Table.Header>

                <Table.Body >
                    {
                        users.map(user => (
                            <Table.Row key={user.customerId}>

                                <Table.Cell>{user.customerId}</Table.Cell>
                                <Table.Cell>{user.name}</Table.Cell>
                                <Table.Cell>{user.address}</Table.Cell>

                                <Table.Cell>
                                    <Button color='blue' onClick={() => 
  this.props.onEditCustomer(user.customerId)}>Edit</Button>
                                </Table.Cell>

                                <Table.Cell>
                                    <Button color='red' onClick={() => 
 this.props.onDeleteClick(user.customerId)}>Delete</Button>
                                </Table.Cell>

                            </Table.Row>
                        ))
                    }
                </Table.Body>

                <Table.Footer>
                    <Table.Row>
                        <Table.HeaderCell colSpan='5'>
                            No of Pages
                    </Table.HeaderCell>
                    </Table.Row>
                </Table.Footer>
            </Table>

        </div>
    )
}

}

从“React”导入React；
从“语义ui反应”导入{Table，Button}；
导出默认类CustomerView扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
错误：null，
删除标题：“客户”，
isLoaded:false，
formClose:错，
单一客户：[]，
用户：[]
}
}
//获取数据
componentDidMount（）{
常数customerApi=https://localhost:44387/api/Customers';
const myHeader=新的头（）；
append（'Content-type'，'application/json'）；
append（'Accept'，'application/json'）；
myHeader.append（'Origin'，'https://localhost:44387');
常量选项={
方法：“GET”，
我的头
};
获取（customerApi，选项）
.then（res=>res.json（））
.那么(
（结果）=>{
这是我的国家({
用户：结果，
isLoaded：正确
});
},
（错误）=>{
这是我的国家({
isLoaded:false，
import React from 'react';
import { Button, Modal, Icon } from 'semantic-ui-react';

export default class DeleteRecord extends React.Component {

constructor(props) {
    super(props);
    this.state = {
        ID:'',
        title: "",
        open: false
    }
    if(props.deleteId){
        console.log(props.deleteId)
        this.state.ID = props.deleteId.ID;
        this.state.title = props.deleteId.title;
        this.state.open = props.deleteId.open;
    }

}

//On cancel button click close Create user form
closeCreateForm = () => {
    console.log("Clicked")
    this.setState({ open: false })
}

//Open Create new Customer form
openCreateCustomer = () => {
    this.setState({ open: true })
}

render() {
    const title = "Delete " + this.state.title;

    return (
        <div>
            <Modal size='small' 
            closeOnTriggerMouseLeave={false} 
            open={this.state.open}>
                <Modal.Header>
                    {title}
                </Modal.Header>
                <Modal.Content>
                    <br />

                    Are you sure?

                    <br />
                    <br />
                    <Button floated='right' icon labelPosition='right' color='red'
                        value='true'
                        onClick={() => this.props.onDeleteCustomer(this.state.ID)}
                    >
                        <Icon name='close' />
                        Delete
                    </Button>
                    <Button floated='right' color='black'
                        value='false'
                        onClick={this.closeCreateForm}
                    >Cancel</Button>

                    <br />
                    <br />
                </Modal.Content>
            </Modal>
        </div>
    )
}

}

import { observable, computed } from "mobx"

class OrderLine {
    @observable price = 0
    @observable amount = 1

    @computed get total() {
        return this.price * this.amount;
    }
}