Hej, piszę do Was, bo się kiszę już od wczoraj nad problemem wysłania productID do metody usuwania w kontrolerze. Wydaje mi się, że mam coś namieszane w handleDeleteProduct
, ale mogę się mylić.
Buduję sobie małą aplikację CRUD, na której testuję różne rozwiązania z React, gdzie mój komponent ProductBox
wygląda następująco:
import React, { Component } from 'react';
import $ from 'jquery';
import uuid from 'uuid';
import ProductList from '../components/ProductList';
import ProductForm from '../components/ProductForm';
class ProductBox extends React.Component {
constructor(props) {
super(props);
this.state = { data: this.props.initialData };
this.handleProductSubmit = this.handleProductSubmit.bind(this);
this.handleDeleteProduct = this.handleDeleteProduct.bind(this);
}
loadProductsFromServer() {
const xhr = new XMLHttpRequest();
xhr.open('get', this.props.url, true);
xhr.onload = () => {
const data = JSON.parse(xhr.responseText);
this.setState({ data: data });
};
xhr.send();
}
handleProductSubmit(product) {
const products = this.state.data;
product.productID = products.length + 1;
const newProducts = products.concat([product]);
this.setState({ data: newProducts });
const data = new FormData();
data.append('Name', product.Name);
data.append('Description', product.Description);
const xhr = new XMLHttpRequest();
xhr.open('post', this.props.submitUrl, true);
xhr.onload = () => this.loadProductsFromServer();
xhr.send(data);
}
handleDeleteProduct(productID) {
console.log(productID);
const data = productID;
const xhr = new XMLHttpRequest();
xhr.open('post', this.props.deleteUrl, true);
xhr.onload = () => this.loadProductsFromServer();
xhr.send(data);
}
componentDidMount() {
window.setInterval(() => this.loadProductsFromServer(), this.props.pollInterval);
}
render() {
return (
<div className="productBox">
<h1>Tutaj React z EF</h1>
<ProductForm onProductSubmit={this.handleProductSubmit} />
<ProductList onDelete={this.handleDeleteProduct.bind(this)} data={this.state.data} />
</div>
);
}
}
export default ProductBox;
W powyższym komponencie do handleDeleteProduct
jest przekazywany productID
, i to działa, ponieważ console.log(productID);
daje mi integer. Następnie przez XMLHttpRequest
próbuję przekazać do poniższej metody kontrolera productID
, niestety przy debugowaniu daje mi ona zero:
[Route("comments/delete")]
[HttpPost]
public ActionResult DeleteComment(int productID)
{
var products = _context.Products;
foreach(var item in products)
{
if(item.ProductID == productID)
{
products.Remove(item);
_context.SaveChanges();
}
}
return Content("Success :)");
}
a poniżej fragment app.js
dla deleteUrl
:
<ProductBox url="/comments" submitUrl="/comments/new" deleteUrl="/comments/delete" pollInterval={2000}/>