CODEWITHSUNDEEP
javascriptreactjsreact-reduxreact-bootstrapwebapi
sandeep pradhan
sandeep pradhan

Reputation: 271

Delete method not working in React js .Not able to delete rows

I am new to react and was trying to implement a delete method to delete the rows in a table. I am using a web api to delete the rows in my sql table. However, I am not able to do that.

Here is the code in visual studio code for react:

class Department extends Component{
    constructor(props){
        super(props);
        this.refreshList = this.refreshList.bind(this);
        this.state={deps:[],addModalShow:false,editModalShow:false}
    }

    componentDidMount(){
        this.refreshList();
    }

    refreshList(){
       const that =this;
       fetch('https://localhost:44363/api/department')
       .then(response=>response.json())
       .then(data=>{
        this.setState({deps:data});
       
       }
       );
       }
        
    

    componentDidUpdate(){
        this.refreshList();
    }

     deleteDep(depid)
     {
         if(window.confirm('Are you sure?'))
         {
             fetch('https://localhost:44363/api/department'+depid,{
                 method:'DELETE',
                 header:{'Accept':'application/json',
                'Content-Type':'application/json'
                }

             })
         }
     }




render(){
    const {deps,depid,depname} = this.state;
    let addModalClose = () => this.setState({addModalShow:false});
    let editModalClose = () => this.setState({editModalShow:false});
    return(
        <div>
        <Table className="mt-4" striped bordered hover size="sm">
            <thead>
                <tr>
                    <th>DepartmentId</th>
                    <th>DepartmentName</th>
                    <th>Option</th>
                </tr>
            </thead>
            <tbody>
              {deps.map(dep =>
                <tr key = {dep.DepartmentID}>
                <td>{dep.DepartmentID}</td>
                <td>{dep.DepartmentName}</td>
                <td>
               <ButtonToolbar>
                <Button
                className="mr-2"
                 variant="info"
                onClick={()=>
                     this.setState({editModalShow:true,depid:dep.DepartmentID,depname:dep.DepartmentName})
                }>
                 Edit
                </Button >
                 <Button className="mr-2"
                 onClick= {()=>this.deleteDep(dep.DepartmentID)}
                 variant ="danger" >
                     Delete

                 </Button>
                <EditDepModal
                show={this.state.editModalShow}
                onHide={editModalClose}
                depid = {depid}
                depname={depname}
                  />
               </ButtonToolbar>


                </td>
                </tr>
                
                )}
            </tbody>
            </Table>
            <ButtonToolbar>
                <Button 
                variant='primary'
                onClick={()=>this.setState({addModalShow:true})}>
                 Add Department
                </Button>
                <AddDepModal
                show={this.state.addModalShow}
                onHide={addModalClose}/>
            </ButtonToolbar>
            </div>
    )

}

}

export default Department;

Here is the Delete method which I am implementing in visual studio:

public string Delete(int id)
        {
            try
            {
                DataTable table = new DataTable();

                string query = @"
                 delete from dbo.Departments where DepartmentID =  " + id;



                using (var con = new SqlConnection(ConfigurationManager.ConnectionStrings["EmployeeAppDB"].ConnectionString))
                using (var cmd = new SqlCommand(query, con))
                using (var da = new SqlDataAdapter(cmd))
                {
                    cmd.CommandType = CommandType.Text;
                    da.Fill(table);


                }
                return "Deleted Successfully";
            }
            catch (Exception)
            {
                return "Failed to Delete";
            }
        }
    }
}

I am using EmployeeAppDB table in my sql table

I am not sure why I am not able to delete. The window pop up is coming however the delete function is not happening. Please help

Upvotes: 0

Views: 922

Answers (2)

sandeep pradhan
sandeep pradhan

Reputation: 271

It was a small mistake . I was missing a slash / in the url 'https://localhost:44363/api/department'.It should have been https://localhost:44363/api/department/

Upvotes: 0

shahrooz bazrafshan
shahrooz bazrafshan

Reputation: 688

1- if you mean that the request not reach server side:

a: i suggest to change http verb in both fetch and server side to "Post" and try it again

b: it seems your fetch have problem, use below link to add then and catch function to fetch: fetch example

2- if you meant client side not be removed after successful server side opt, i dont see any logig for updating state after fetch (you should remove item from deps and update state with this.setState)

Upvotes: 1

Related Questions