Question

我正在开发一个连接到XSockets via WCF并能够在客户端获取数据的应用。我想使用Grid.Mvc显示这些数据，并看过使用knockout.js的示例，但我不知道如何将其推入我的IEnumerable模型，以便我可以看到View更新。

我尝试使用以下代码

@{
  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方法中接收参数的空值。

模型很简单

 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);
       })

我很感激有关如何实现这一目标的任何指示和指导。非常感谢

更新

我现在能够在删除dataType＆amp;之后在控制器动作方法中获取值。来自ajax调用的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("");
    }

我在成功处理程序中添加了一个vm.push调用，并将结果值传递给它，但它似乎仍然没有在模型中添加新书。看起来我做错了，因为我是淘汰js，jquery＆amp; ajax并试图学习，所以请原谅我的无知

更新2

我做了一些更改。像Uffe说的那样，我已经删除了Ajax调用。我正在将StockViewModel从StockTicker示例调整到我的BookViewModel，并将一个参数添加到ctor以接收我的IEnumerable模型。这适用于＆amp;该项目已添加。 AddOrUpdate工作得很好＆amp;对象被添加到集合中，但是如何在网格中更新模型。

@{
    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);
        }); 
    });
});

ViewModel如下

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));       
};

};

使用Knockout.js更新MVC模型列表

0 个答案: