Данные JSON в массив

Question

Это моя функция Javascript, которая получает данные из формы HTML.

$(function postProduct() {
  $('#btn').click(function() {
      var productName = document.getElementById("name").value;
      var productDetail = document.getElementById("detail").value;
      var productCategory = document.getElementById("category").value;

      var dimensions = [productName, productDetail, productCategory];
      var keys = $.map(dimensions, function(value, key) {
        return value;
      });

      $.ajax({
        type: "POST",
        url: "api/product/addproduct",
        data: keys,
        success: function(result) {
          alert('successful : ' + result);
          return result;
        },
        error: function(error) {
          alert("Not Working..");
        }
      });
    }

  });
});

Это мой контроллер:

[HttpPost]
[Route("api/product/addproduct")]
public IActionResult AddProduct([FromBody] string[] addproduct)
{
  var pProductName= addproduct[0];
  var pProductDetail= addproduct[1];
  var pProductCategory= addproduct[2];

  Hotel NewProduct = new Product();
  {
      NewProduct.ProductName= pProductName;
      NewProduct.ProductDetail= pProductDetail;
      NewProduct.ProductCategory= pProductCategory;
  }

  _db.Products.Add(NewProduct);
  _db.SaveChanges();

  //create a new route for post method by id
  return CreatedAtRoute(new { id = addproduct}, addproduct);
}

Итак, я пытаюсь передать введенную форму и передать ее контроллеру с помощью AJAX, однако она просто не работает.

Это функция, которую я использую для преобразования данных json в массив:

var dimensions = [productName, productDetail, productCategory];
var keys = $.map(dimensions, function(value, key) {
  return value;
});

Или я должен перекодировать мой контроллер для приема данных JSON. Если да, пожалуйста, дайте мне пример, как это сделать. Извините, я новичок в веб-интерфейсе.

UPDATE: Это мой jsondata:

productName: name
productDeatil: detail
productCategory:category

Это мой массив:

keys:(7) ["name", "detail", "category"]

Answer 1

В вашем Ajax-запросе присвойте ключу данных следующее значение ...

{ productName: document.getElementById("name").value, productDetail:  document.getElementById("detail").value, productCategory: document.getElementById("category").value }

Это типичный объект в формате JSON.

Вы также можете удалить свои переменные и функцию отображения.

Наконец, вам нужно посмотреть, как обрабатывать этот форматированный JSON в вашем контроллере.

Я не уверен, как это сделать в asp.net-core-mvc, но это может быть так просто, как изменить

var pProductName= addproduct[0];

до

var pProductName= addproduct.productName

Answer 2

add data: JSON.stringifly(keys) в ajax решит проблему. Спасибо всем за помощь!

Answer 3

Интервал между NewProduct и такими свойствами, как .ProductName, преднамеренный?

NewProduct .ProductName = pProductName; 

Не должно ли быть так?

Hotel NewProduct = new Product();
NewProduct.ProductName = pProductName;
NewProduct.ProductDetail = pProductDetail;
NewProduct.ProductCategory = pProductCategory;

С упрощенным созданием объекта:

Hotel NewProduct = new Product() {
    ProductName= pProductName,
    ProductDetail= pProductDetail,
    ProductCategory= pProductCategory
};