Как передать идентификатор из компонента React в контроллер ASP.NET?

71
8

Я создаю тестовое CRUD-приложение с помощью React, ASP.NET и EF.

Прямо сейчас у меня возникла проблема с отправкой productID который будет удален контроллером asp.net с сервера.

Я хочу отправить projectID из handleDeleteProduct. В productID аргумент productID в контроллере не получает значения. Я предполагаю, что что-то не так в ProductBox

ProductList.js:

import React, { Component } from 'react';
import $ from 'jquery';
import uuid from 'uuid';
import Product from '../components/Product';

class ProductList extends React.Component {
deleteProduct(productID) {
this.props.onDelete(productID);
}
render() {
let productNodes;
if (this.props.data) {
productNodes = (this.props.data || []).map(product => {
return (
<Product onDelete={this.deleteProduct.bind(this)} name={product.name} key={product.productID}>
{product.description} <span>, </span>
{product.price}
</Product>
);
});
}
return (
<div className="productList">
{productNodes}
</div>
);
}
}
export default ProductList;

My ProductBox.js выглядит так:

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(projectID) {
const data = projectID;
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;

часть кода из app.js:

<ProductBox url="/comments" submitUrl="/comments/new" deleteUrl="/comments/delete" pollInterval={2000}/>

HomeController.cs

[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 :)");
}

спросил(а) 2018-08-09T07:27:00+03:00 2 года, 2 месяца назад
1
Решение
70

Первая проблема заключается в том, что вы не передаете productId родительскому контроллеру. Вот как вам нужно это делать.

<Product onDelete={(e)=>this.deleteProduct(product.productID)}

Во-вторых, убедитесь, что в родительском методе handleDeleteProduct вы получаете этот продукт. Идет третий, проверьте правильность запроса xhr. Вот пример этого

handleDeleteProduct(projectID) {

var xhr = new XMLHttpRequest();
xhr.open("POST", this.props.deleteUrl, true);

//Send the proper header information along with the request
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

xhr.onreadystatechange = function () {//Call a function when the state changes.
if (this.readyState == XMLHttpRequest.DONE && this.status == 200) {
// Request finished. Do processing here.
}
}
xhr.send("productID=" + projectID);
}

ответил(а) 2018-08-09T09:35:00+03:00 2 года, 2 месяца назад
42

Хорошо, после нескольких часов укладки моего приклада, пытаясь понять это, я нашел решение. Я использовал Ajax с jQuery:

handleDeleteProject(projectID) {
$.ajax({
url: './comments/delete',
data: { productID: projectID },
type: 'get',
cache: true,
success: function (response) {
console.log("ok");
},
});
}

Я начинаю думать, что XMLHttpRequest является добрым дерьмом. Спасибо @Justcode за ваше время и усилия.

ответил(а) 2018-08-09T14:24:00+03:00 2 года, 2 месяца назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема