如何使用angularjs mvc#从控制器端发布数组并将其加载到表中？

大家好，我正在为crud操作创建产品的小演示。我有两个表产品和产品项。我想提交time add First product表条目，然后在此productid获取并添加到ProductItems中，但如何使用实体框架实现这一点。我还使用http post方法传递ProductItems数组，但我无法获取服务器端始终获得0计数。因此，您能知道如何实现这一点吗。这里我展示了我的实体，方法如下所列

这是我的产品实体：

[Table("Products")]
public class Products
{
    [Key]
    public int pid { get; set; }

    public string name { get; set; }

    public string description { get; set; }

    public string image_url {get;set;}
}

这是我的ProductItems实体：

    [Table("ProductItems ")]
    public class ProductItems 
   {
    [Key]
    public int id { get; set; }

    [ForeignKey("Products")]
    public int pid {get; set;}

    public int Qty { get; set; }

    public Decimal Rate { get; set; }

    public virtual Products Products { get; set; }
}

这是我的controller.js：

$scope.AddProduct = function () {
        var P =
            {                    
                name : $scope.ProductName,
                description : $scope.description,
                ProIList: $scope.ProItemslist,
                image_url : $scope.Image
            };        

                var GetData = PService.AddPro(P.image_url, P);
                GetData.then(function (msg) {

                }, function (err) {
                });

        }
    }

这是我的service.js

this.AddPro = function (file, P) {
    var formData = new FormData();
    formData.append("file", file);
    formData.append("name", P.name);
    formData.append("description", P.description);
    formData.append("ProIList", P.ProIList);  // this is array list      

    var Response = $http.post("/Product/AddProduct", formData,
        {
            transformRequest: angular.identity,
            headers: { 'Content-Type': undefined }
        })
    .success(function (res) {
        Response = res;
    })
    .error(function () {
    });
    return Response;
}

这是我的控制器方法：

[HttpPost]
    [Route("AddProduct")]
    public string AddProduct(string name, string description, IList<ProductItems> ProIList) // here i m not getting array 
    {
        Products objP = new Products();            
        string Res = "";

                    objP.name = name;
                    objP.description = description;                       
                    db.Promotions.Add(objP); // and here add product is done now want to add ProductItems table entry so how can do 
                   db.SaveChanges();                  
        return Res;
    }

[HttpPost]
[路线（“添加产品”）]
publicstringaddproduct（stringname，stringdescription，IList ProIList）//这里我没有得到数组
{
产品objP=新产品（）；
字符串Res=“”；
objP.name=名称；
objP.description=描述；
db.Promotions.Add（objP）；//在这里添加产品已经完成，现在想添加ProductItems表项，那么怎么办呢
db.SaveChanges（）；
返回Res；
}

---

因此，我在这里清除了所有列出的方法类，现在任何人都知道如何做这件事，请让我知道。

我通常要做的是创建一个对象，然后这就是我将在$http.post中传递的内容。还要确保要发布的对象结构与ProductItems上的结构相同

在您的情况下，您应该有一个视图模型，以便在发布时不会出现问题

例如：

public class ProductsViewModel{
   public string name {get;set;}
   public string description {get;set;}
   public List<ProductItems> productList{get;set;}
}

希望这有帮助

upate： 这是用于图像上载api的

   [HttpPost]
    public async Task<IHttpActionResult> Post()
    {
        try
        {
            if (!Request.Content.IsMimeMultipartContent())
                 throw new 
                HttpResponseException(HttpStatusCode.UnsupportedMediaType);
         //do your upload functions here


         } catch(Exception e){

         }
     }

---

好的，这是一个使用

ViewModel

的好地方

我假设要传递到

服务器的数据格式有一个
名称
字段、一个
说明
字段和一个
产品列表

这就是您在
客户端
的表现方式（而不是您所做的）

以及虚拟机
ViewModel

var clientSideVM = {
  Name: products.name,
  Description: products.description,
  Products: products.productList
};    

将其发布到
服务器

$http.post("AddProduct", clientSideVM)
   .then(function(response) { 
       // Access The Response Object
   }, function(error) {
       // Access The Error Object 
   });

//Server Side Code
//Exactly matching VM
public class CustomViewModel {
   public string Name { get; set; }
   public string Description { get; set; }
   public List<ProductItems> Products { get; set; }
}

[HttpPost, Route("AddProduct")]
public string AddProduct(CustomViewModel viewModel) {
  //here you have all you data from Client Side,
  var name = viewModel.Name;
  // Work on them here
  //Rest of your Code
}

$http.post（“AddProduct”，clientSideVM）
.then（函数（响应）{
//访问响应对象
}，函数（错误）{
//访问错误对象
});
//服务器端代码
//完全匹配的虚拟机
公共类CustomViewModel{
公共字符串名称{get；set；}
公共字符串说明{get；set；}
公共列表产品{get；set；}
}
[HttpPost，路线（“添加产品”）]
公共字符串AddProduct（CustomViewModel viewModel）{
//这里有来自客户端的所有数据，
var name=viewModel.name；
//在这里工作
//代码的其余部分
}
任何人都知道如何从服务器端发布数组？？事实上，我的productItems div处于ng重复状态，有一个按钮点击按钮自动添加div，所以我提交表单，我获取productItems数组，我也发布图像，所以我想使用表单添加数据，所以使用表单数据添加任何想法？您的解决方案如何可以提交图像吗？我编辑它以接受产品阵列。如果你想在angularjsi中附加你的产品，你可以使用array.push（）。当我上传一张图片时，我会使用不同的帖子。检查此项，使用my que上传图像的ngFileUpload指令不可能？？
 Upload.upload({
                    url: apiUrl + '/File',
                    data: { file: file },
                }).then(function (response) {
                    //the api should return the url of your image.
                     //you can now use the code above. add it to the object 
                    //then post it to addproducts
                });

var products= {
   name: "Product 1",
   description: "prod description",
   productList: [
    {
      //put data of product list here
    }
   ]
};

var clientSideVM = {
  Name: products.name,
  Description: products.description,
  Products: products.productList
};    

$http.post("AddProduct", clientSideVM)
   .then(function(response) { 
       // Access The Response Object
   }, function(error) {
       // Access The Error Object 
   });

//Server Side Code
//Exactly matching VM
public class CustomViewModel {
   public string Name { get; set; }
   public string Description { get; set; }
   public List<ProductItems> Products { get; set; }
}

[HttpPost, Route("AddProduct")]
public string AddProduct(CustomViewModel viewModel) {
  //here you have all you data from Client Side,
  var name = viewModel.Name;
  // Work on them here
  //Rest of your Code
}