从KnockoutJS发布到MVC控制器是NULL

Question

看起来像这个已经和死亡讨论过了，但我仍然无法让我的代码正常工作。

我正在尝试使用Knockoutjs的可编辑表格，并将AJAX帖子用于控制器以添加到模型中。但是，该帖子在控制器中始终为空。

这里的模型：

using System.ComponentModel.DataAnnotations; 
using System.Data.Entity; 

namespace Adder_Web.Models 
{ 
    public class User 
    { 
     [Display(Name = "ID")] 
     [Required] 
     [StringLength(9, ErrorMessage = "SSO must be 9 numbers", MinimumLength = 9)] 
     public virtual string ID { get; set; } 

     [Display(Name = "First Name")] 
     [Required] 
     public string FirstName { get; set; } 

     [Display(Name = "Last Name")] 
     [Required] 
     public string LastName { get; set; } 

    } 

    public class UserContext : DbContext 
    { 
     public DbSet<User> Users { get; set; } 
    } 


} 

这里是我试图张贴到控制器。当发布到用户的NULL：

[HttpPost] 
    public async Task<ActionResult> CreateMultiple(IEnumerable<User> users) 
    { 
     if (ModelState.IsValid) 
     { 
      foreach (User oneUser in users) 

      { 
       db.Users.Add(oneUser); 
       await db.SaveChangesAsync(); 
       return RedirectToAction("Index"); 
      } 

     } 

     return View(users); 
    } 

而这里的JavaScript的：

script> 
    var UserModel = function (users) { 
     var self = this; 
     self.users = ko.observableArray(users); 

     self.addUser = function() { 
      self.users.push({ 
       id: "", 
       firstName: "", 
       lastName: "" 
      }); 
     }; 

     self.removeUser = function (user) { 
      self.users.remove(user); 
     }; 

     self.save = function (form) { 

      sendData = JSON.stringify(self.users); 

      $.ajax({ 
       url: '/Users/CreateMultiple', 
       contentType: "string", 
       async: true, 
       type: "POST", 
       data: JSON.stringify(sendData), 
       error: function (jqXHR, textStatus, errorThrown) { 
        console.log("FAIL: " + errorThrown); 
       }, 
       success: function (data, textStatus, jqXHR) { 
        console.log("SUCCES"); 
       } 
      }); 


     }; 
    }; 

    var viewModel = new UserModel([ 
     { id: "123456789", firstName: "John", lastName: "Doe" } 
    ]); 
    ko.applyBindings(viewModel); 

    // Activate jQuery Validation 
    $("form").validate({ submitHandler: viewModel.save }); 
</script> 

Answer 1

@rStackSharper

成全它确保在后端和前端用户模型具有相同的属性。

例子：

你的后端，

class User 
{ 
    public string FirstName { get; set; } 
    public string LastName { get; set; } 
} 

你的前端应该是

，

var user = { FirstName: "John", LastName: "Doe" }; 

，或者如果您创建有一个功能;

function user(){ 

    this.FirstName = "John"; 
    this.LastName = "Doe"; 
} 

那么当您把它送到你必须JSON.stringify（用户）才能被接受

服务器

Answer 2

JavaScript部分：

• 您字符串化的sendData两次
• 你必须设置正确的内容类型（application/json）

C＃部分：

在您的Controller中，您必须通知您的Method，该Model来自您的http post请求的主体。

public async Task<IActionResult> CreateMultiple([FromBody] IEnumerable<User> users) 
{ 
    /*..*/ 
} 

Answer 3

你可以尝试删除Content-Type和stringfy，我希望它西港岛线工作，如果你的AJAX方法是用后一个对象，你不必把[FromBody]属性。你可以像下面这样使用这个属性。

[HttpPost] 
public async Task<IActionResult> CreateMultiple([FromBody] string userCode){ 

} 
[HttpGet] 
public async Task<IActionResult> CreateMultiple(string userCode){ 

} 

Answer 4

不要改变你的AJAX方法如下它可能帮你。谢谢

或者简单地改变AJAX方法数据属性像 例如： - 数据：JSON.stringify（送出数据）数据：（{用户：送出数据}），

注： - 用户“数据：（{用户：送出数据}）”是你的CreateMultiple（IEnumerable的用户）方法的参数名称

$.ajax({ 
      url:'@Url.Content("~/Users/CreateMultiple")', 
      async: true, 
      cache:false,   
      type: 'POST', 
      data: ({users:sendData}), 
      error: function (jqXHR, textStatus, errorThrown) { 
       console.log("FAIL: " + errorThrown); 
      }, 
      success: function (data, textStatus, jqXHR) { 
       console.log("SUCCES"); 
      } 
     }); 

Answer 5

我能得到它通过进行以下更改排序：

AJAX：

self.save = function (form) { 

     sendData = ko.toJSON(self.users); 


     $.ajax({ 
      url: '/Users/CreateMultiple', 
      contentType: 'application/json', 
      async: true, 
      type: 'POST', 
      dataType: 'json', 
      data: sendData, 
      error: function (jqXHR, textStatus, errorThrown) { 
       console.log("FAIL: " + errorThrown); 
      }, 
      success: function (data, textStatus, jqXHR) { 
       console.log("SUCCES"); 
      } 
     }); 


    }; 

控制器：

[HttpPost] 
    public ActionResult CreateMultiple(List<User> users) 
    { 
     if (ModelState.IsValid) 
     { 
      foreach (User oneUser in users) 
      { 
        db.Users.Add(oneUser); 
        db.SaveChanges(); 
      } 
      return RedirectToAction("Index"); 
     } 

     return View(); 
    }