P.Macs P.Macs - 1 year ago 37
ASP.NET (C#) Question

How to reloads the table when clicked using AJAX in reactjs

I was wondering how will I reload only the table, not the whole page on reacts. I've tried using

history.go(0);
however, it reloads the whole page please check how can I reload it, if I was going to use forceUpdate, based on research you should avoid using it. Im trying do an AJAX but i dont know what to put where to put it... it is way different than php..

my code for the onclick

handleSubmit( name, address,department){

const laman = {
'Employee_Name': name,
'Address': address,
'Department': department
}
return fetch('http://localhost:5118/api/employeedetails/PostEmployeeDetail?', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(laman)
})
.then(function(response) {
console.log(response)
return response.json();
})
.then(function (result) {
history.go(0);
})
.catch(function(error) {
console.log(error);

})
}


this is the code for the onclick button plus the table itself

render() {
const isEnabled = this.canBeSubmitted();
let {jsonReturnedValue} = this.state;
return(
<div>
<div className="container">
<h1> Listof Employees </h1>
<button className ='btn btn-warning right ' data-toggle="modal" data-target="#AddEmployee"> Add an Employee</button>
<table className= "table table-bordered" id="result">
<tbody>
<tr>
<th>ID</th>
<th>Name</th>
<th>Address</th>
<th>Update</th>
<th>Delete</th>
</tr>
{jsonReturnedValue.map((d,i) => this.renderItem(d,i))}
</tbody>
</table>
</div>

{/*Updating*/}

<div className="modal fade" id="UpdateEmployee" role="dialog">
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<button type="button" className="close" data-dismiss="modal">&times;</button>
<h4 className="modal-title">ADD Employee</h4>
</div>
<form>

<div className="container">
<div className="modal-body">
<table>
<tbody>
<tr>
<td>Name</td>
<td>
<input type="text"
ref="Employee_Name"
onChange={(e) => this.handleChange(e, "Employee_Name")}
required
/>
</td>
</tr>
<tr>
<td>Address</td>
<td>
<input type="text"
ref="Address"
onChange={(e) => this.handleChange(e, "Address")}
required
/>
</td>
</tr>
<tr>
<td>Department</td>
<td>
<input type="text"

onChange={(e) => this.handleChange(e, "Department")}
required
/>
</td>
</tr>
</tbody>
</table>

</div>
</div>
<div className="modal-footer">
<input type="button" className="btn btn-info"disabled={!isEnabled}
onClick = { this.handleSubmit.bind(
this, this.state.Employee_Name,
this.state.Address,
this.state.Department)
}
value =" Add Employee"
data-dismiss="modal"/>
<button type="button" className="btn btn-default" data-dismiss="modal" >Close</button>
</div>

</form>


PS: IT IS ALSO IN THE SAME PAGE.. the reason i dont know how will I call it

Answer Source

Since you are contructing the table based on state jsonReturnedValue, you need not do anything extra apart from apending the newly added value to this state since, React will Automatically take care of updating only the change

Change the handleSubmit function to

handleSubmit( name, address,department){

 const laman = {
      'Employee_Name': name,
      'Address': address,
      'Department': department
    }
    return fetch('http://localhost:5118/api/employeedetails/PostEmployeeDetail?', {
        method: 'POST',
        headers: {
        'Content-Type': 'application/json'
        },
        body: JSON.stringify(laman)
    })
    .then(function(response) {
      console.log(response)
      return response.json();
    })
    .then((result)=> {
       var jsonReturnedValue = [...this.state.jsonReturnedValue];
       jsonReturnedValue.push(laman);
       this.setState({jsonReturnedValue})
    })
    .catch(function(error) {
      console.log(error);

    })
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download