Asp.net mvc 4 使用Knockout.js更新MVC模型列表

我正在开发一个应用程序，它可以连接到客户端并能够在客户端获取数据。我想使用knockout.js显示这些数据，并且已经看到了使用knockout.js的示例，但是我不确定如何将其放入我的IEnumerable模型中，以便可以看到更新的视图

我已尝试使用以下代码

@{
  var initialData = new JavaScriptSerializer().Serialize(Model);  }

$(function() {
     ws = new XSockets.WebSocket("ws://127.0.0.1:4502/Book");

    var vm = ko.mapping.fromJSON('@Html.Raw(initialData)');

    ko.applyBindings(vm);

      //Just write to the console on open
    ws.bind(XSockets.Events.open, function (client) {
        console.log('OPEN', client);

     ws.bind('SendBook', function (books) {

        jQuery.ajax({
                type: "POST",
                url: "@Url.Action("BooksRead", "Home")",
                data: JSON.stringify(books),
                dataType: "json",
                contentType: "application/json",
                success: function (result) {

                 //This doesnt work   
                 /vm.push({Name:'Treasure Island',Author:'Robert Louis Stevenson'});

                //vm.pushAll(result)
                },
                error: function (result){},
                async: false
            });
        });        
    });

我总是在BooksRead JsonResult方法中接收参数的null值

这个模型很简单

 public class BookModel
 {
    public string Name {get; set;}

    public string Author {get; set;}
 } 

我在加载时从主控制器返回BookModel IEnumerable作为我的模型，并希望在套接字绑定中接收新书时将其插入其中。这是因为我正在使用它生成网格

       @Html.Grid(Model).Columns(c =>
       {
         c.Add(b => b.Name).Titled("Title");
         c.Add(b => b.Author);
       })

@{
    var initialData = @Html.Raw(JsonConvert.SerializeObject(Model));
 }

   $(function() {

   vm = new BookViewModel(@Html.Raw(initialData));

    ko.applyBindings(vm);

    ws = new XSockets.WebSocket("ws://127.0.0.1:4502/Book"); 

    //Just write to the console on open
    ws.bind(XSockets.Events.open, function(client) {
        console.log('OPEN', client);

        ws.bind('SendBook', function (msg) {

           vm.AddOrUpdate(msg.book);
        });

        ws.bind(XSockets.Events.onError, function (err) {
            console.log('ERROR', err);
        }); 
    });
});

我将非常感谢任何关于如何实现这一目标的建议和指导。非常感谢

更新

在从ajax调用中删除dataType和contentType参数后，我现在能够在控制器操作方法中获取值。控制器方法如下所示

public JsonResult BooksRead(string books)
    {
        BookModel data = JsonConvert.DeserializeObject<BookModel>(books);

        List<BookModel> bookList = (List<BookModel>) TempData["books"];

        if (bookList != null  && data != null)
        {
            bookList.Add(data);

            var bookString = JsonConvert.SerializeObject(bookList);

            return Json(bookString); 
        }

        return Json("");
    }

var BookViewModel = function(data) {

//this.Books = ko.observableArray(data);
this.Books = ko.observableArray(ko.utils.arrayMap(data, function(book) {
    return new BookItem(book);
}));

this.AddOrUpdate = function(book) { 
               this.Books.push(new BookItem(book));       
};

ViewModel如下所示

public JsonResult BooksRead(string books)
    {
        BookModel data = JsonConvert.DeserializeObject<BookModel>(books);

        List<BookModel> bookList = (List<BookModel>) TempData["books"];

        if (bookList != null  && data != null)
        {
            bookList.Add(data);

            var bookString = JsonConvert.SerializeObject(bookList);

            return Json(bookString); 
        }

        return Json("");
    }

var BookViewModel = function(data) {

//this.Books = ko.observableArray(data);
this.Books = ko.observableArray(ko.utils.arrayMap(data, function(book) {
    return new BookItem(book);
}));

this.AddOrUpdate = function(book) { 
               this.Books.push(new BookItem(book));       
};

---

})

也许我在这里遗漏了一些东西，但如果您使用的是XSockets，为什么还要使用AJAX呢？很明显，您使用的是支持websocket的浏览器。您好，Uffe，感谢您提供了一个很棒的框架。我所要做的就是在bind调用中更新我的C#IEnumerable模型，将接收到的数据推入其中，这样我就可以看到我的网格更新，而无需重新加载。我有点迷路了，你能给我一些建议吗