当我试图添加一个新人时，我得到一个错误 [Object object]

Question

I'm trying to create my first Web API, I wrote backend in C# and front in react js.

When I'm trying to add a new person in the database through the site, I get an error [object Object] .

But when I'm trying to add a new person in the database through Postman, I got an "Added successfully" message.

This is my js file

import React,{Component} from 'react';
import {Modal,Button, Row, Col, Form} from 'react-bootstrap';

export class AddDepModal extends Component{
    constructor(props){
        super(props);
        this.handleSubmit=this.handleSubmit.bind(this);
    }

    handleSubmit(event){
        event.preventDefault();
        fetch(process.env.REACT_APP_API+'department',{
            method:'POST',
            headers:{
                'Accept':'application/json',
                'Content-Type':'application/json'
            },
            body:JSON.stringify({
                borzhnuka_id:null,
                borzh_name:event.target.borzh_name.value
            })
        })
        .then(res=>res.json())
        .then((result)=>{
            alert(result);
        },
        (error)=>{
            alert('Failed');
        })
    }
    render(){
        return (
            <div className="container">

<Modal
{...this.props}
size="lg"

aria-labelledby="contained-modal-title-vcenter"
centered
>
    <Modal.Header clooseButton>
        <Modal.Title id="contained-modal-title-vcenter">
            Додати
        </Modal.Title>
    </Modal.Header>
    <Modal.Body>

        <Row>
            <Col sm={6}>
                <Form onSubmit={this.handleSubmit}>
                    <Form.Group controlId="borzh_name">
                        <Form.Label>Ім'я</Form.Label>
                        <Form.Control type="text" name="borzh_name" required 
                        placeholder="borzh_name"/>
                    </Form.Group>

                    <Form.Group controlId="borzh_last_name">
                        <Form.Label>Прізвище</Form.Label>
                        <Form.Control type="text" name="borzh_last_name" required 
                        placeholder="borzh_last_name"/>
                    </Form.Group>

                    <Form.Group controlId="amount">
                        <Form.Label>Amount</Form.Label>
                        <Form.Control type="int" name="amount" required 
                        placeholder="amount"/>
                    </Form.Group>
                    
                    <Form.Group controlId="Date_of_offer">
                        <Form.Label>Дата приєднання</Form.Label>
                        <Form.Control 
                        type="date"
                        name="Date_of_offer"
                        required
                        placeholder="Date_of_offer"
                        />
                       
                        
                    </Form.Group>
                    <Form.Group>
                        <Button variant="primary" type="submit">
                            Додати
                        </Button>
                    </Form.Group>
                </Form>
            </Col>
        </Row>
    </Modal.Body>
    
    <Modal.Footer>
        <Button variant="danger" onClick={this.props.onHide}>Close</Button>
    </Modal.Footer>
</Modal>
            </div>
        )
    }
}

And this is POST handler in the C# file:

[HttpPost]
public JsonResult Post(Department dep)
{
    string query = @"insert into dbo.All_borzh values
                     ('" + dep.borzhnuka_id + @"',
                     '" + dep.borzh_name + @"',
                     '" + dep.borzh_last_name + @"',
                     '" + dep.amount + @"',
                     '" + dep.Date_of_offer + @"')
                     ";

    DataTable table = new DataTable();
    string sqlDataSource = _configuration.GetConnectionString("EmployeeAppCon");
    SqlDataReader myReader;

    using (SqlConnection myCon = new SqlConnection(sqlDataSource))
    {
        myCon.Open();

        using (SqlCommand myCommand = new SqlCommand(query, myCon))
        {
            myReader = myCommand.ExecuteReader();
            table.Load(myReader); ;
            myReader.Close();
            myCon.Close();
        }
    }

    return new JsonResult("Added successfully");
}

Answer 1

What I meant is this:

• Properly parametrize your SQL query - never ever concatenate together your SQL statement and the values to send to the server! SQL Injection Alert !

• You don't need a DataTable , nor a SqlDataReader - just use .ExecuteNonQuery() and you're done

• Your INSERT statement should really explicitly list the names of the columns you're inserting into - generally accepted Best Practice - just do it

Try this code:

[HttpPost]
public JsonResult Post(Department dep)
{
    // properly **parametrize** your query! 
    string query = @"INSERT INTO dbo.All_borzh(list-of-columns-here) 
                     VALUES (@Id, @Name, @LastName, @Amount, @DateOfOffer);";
    
    string connectionString = _configuration.GetConnectionString("EmployeeAppCon");
    
    // setup connection and command
    using (SqlConnection myCon = new SqlConnection(connectionString))
    using (SqlCommand myCmd = new SqlCommand(query, myCon))
    {
        // add parameters and values
        myCmd.Parameters.Add("@Id", SqlDbType.Int).Value = dep.borzhnuka_id;
        // Here, I'm just *guessing* what those datatypes and string lengths are - adapt as needed!
        myCmd.Parameters.Add("@Name", SqlDbType.VarChar, 100).Value = dep.borzh_name;
        myCmd.Parameters.Add("@LastName", SqlDbType.VarChar, 100).Value = dep.borzh_last_name;
        myCmd.Parameters.Add("@Amount", SqlDbType.Decimal, 20, 4).Value = dep.amount;
        myCmd.Parameters.Add("@DateOfOffer", SqlDbType.Date).Value = dep.Date_of_offer;
        
        // open connection, execute query, close connection
        myCon.Open();
        
        int numberOfRowsInserted = myCmd.ExecuteNonQuery();
        
        myCon.Close();
    }

    return new JsonResult("Added successfully");
}