0

我正在开发一个通过 WCF 连接到 XSockets并且能够在客户端获取数据的应用程序。我想使用Grid.Mvc显示这些数据，并且已经看到了使用 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 方法中参数的空值。

模型很简单

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

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

更新

从 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("");
    }

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

更新 2

我还做了一些更改。就像 Uffe 说的，我删除了 Ajax 调用。我正在将 StockTicker 示例中的 StockViewModel 调整为我的 BookViewModel，并向 ctor 添加了一个参数以接收我的 IEnumerable 模型。这有效并添加了该项目。AddOrUpdate 也可以正常工作，并且对象已添加到集合中，但是如何才能在网格中更新我的模型。

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

视图模型如下

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

};

4

0 回答 0