I am trying to display a list of products from a database using signalr and knockout.js. But without any result. Can someone tell me what I'm doing wrong or where is my error? I will be very grateful for the help. This is the view:
<div class="products">
<div class="row" data-bind="template: { name: 'productTemplate', foreach: products }">
</div>
<span class="messageClass" style="color: red;"></span>
</div>
<script type="text/html" id="productTemplate">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<div class="caption">
<h3 data-bind="text: name"></h3>
</div>
</div>
</div>
</script>
This is the script:
<script>
$(function () {
function productViewModel(id, name) {
this.productId = id;
this.name = ko.observable(name);
var self = this;
}
function productListViewModel() {
this.hub = $.connection.voteHub;
this.products = ko.observableArray([]);
var products = this.products;
this.init = function () {
this.hub.server.getAllProducts();
}
this.hub.client.getAllProducts = function (allProducts) {
var mappedProducts = $.map(allProducts, function (item) {
return new productViewModel(item.productId, item.name)
});
products(mappedProducts);
}
}
var vm = new productListViewModel();
ko.applyBindings(vm);
$.connection.hub.start(function () {
vm.init();
});
});
</script>
Here is the hub method for getting all products:
public void GetAllProducts()
{
VoteViewModel viewModel = new VoteViewModel();
viewModel.Products = ProductService.GetProducts(new GetProductsRequest()).Products.ToList();
if (viewModel.Products != null)
{
Clients.All.getAllProducts(viewModel.Products.ToArray());
}
}
If I put on my hub code like this, it will work well (taken from a demo application):
VoteViewModel vm = new VoteViewModel();
vm.Products = new List<Product>() { new Product() { Name = "Sample", Id = 1 } };
Clients.All.getAllProducts(vm.Products.ToArray());
My code that looks like this is not working. (I don’t know why, maybe because my Product object from db has more variables?):
VoteViewModel viewModel = new VoteViewModel();
viewModel.Products = ProductService.GetProducts(new GetProductsRequest()).Products.ToList();
Clients.All.getAllProducts(viewModel.Products.ToArray());
Here is the code from my Product class: (dbcontext class)
[Key]
public int Id { get; set; }
[Required]
public string Name { get; set; }
public string Description { get; set; }
[Required]
public string ImagePath { get; set; }
public virtual ICollection<Vote> Votes { get; set; }
I created a new ProductViewModel class that looks like this:
public class ProductViewModel
{
public int Id { get; set; }
public string Name { get; set; }
public string Description { get; set; }
public string ImagePath { get; set; }
public int VotesAmount { get; set; }
}
db , List IT WORKS NOW!, , signalr (, ).
List<ProductViewModel> prods = new List<ProductViewModel>();
List<Product> products = ProductService.GetProducts(new GetProductsRequest()).Products.ToList();
foreach (var item in products)
{
ProductViewModel prod = new ProductViewModel()
{
Id = item.Id,
Name = item.Name,
Description = item.Description,
ImagePath = item.ImagePath,
VotesAmount = item.Votes.Count()
};
prods.Add(prod);
}
Clients.All.getAllProducts(prods.ToArray());