CRUD React
There are ways of how to perform CRUD operations at the server,
I use axios to do these operations.
To put it to an immediate place , let's start with Create funtionality.
//CREATE or INSERT (POST)
createSupplier(){
if (this.validateSupplier() === true) {
var myData = JSON.stringify({
SupplierID: 0,
CompanyName: document.querySelector(".companyName").value,
ContactName: document.querySelector(".contactName").value,
ContactTitle: document.querySelector(".contactTitle").value,
Address: document.querySelector(".address").value,
City: document.querySelector(".city").value,
Region: document.querySelector(".region").value,
PostalCode: document.querySelector(".postalCode").value,
Country: document.querySelector(".country").value,
Phone: document.querySelector(".phone").value,
Fax: document.querySelector(".fax").value,
HomePage: document.querySelector(".homePage").value
});
const headers = { 'Content-Type': 'application/json' };
axios.post('API/Suppliers', myData, { headers })
.then((data) => {
if (data.status === 201) {
var t = "Saved , OK";
this.ShowMessage("Created successfully....")
}
})
.catch((err) => {
console.log(err);
})
}
}
Server-side C# code:
// POST: api/Suppliers
// To protect from overposting attacks, please enable the specific properties you want to bind to, for
// more details see https://aka.ms/RazorPagesCRUD.
[HttpPost]
public async Task> PostSuppliers(Suppliers suppliers)
{
_context.Suppliers.Add(suppliers);
await _context.SaveChangesAsync();
return CreatedAtAction("GetSuppliers", new { id = suppliers.SupplierID }, suppliers);
}