Client side Model binding with ASP.NET MVC 3 and KnockoutJs Knockoutjs is type safe client side library which provides declarative bindings of DOM with model data, Automatic UI refresh when view model changes etc. You can read more about KnockoutJS on its website. You can read more about AspNet MVC3 on Asp.Net MVC website.
Model
Create Model class on server side MarketPriceModel. its collection class MarketPriceCollectionModel.
public class MarketPriceCollectionModel
{
public List Prices { get; private set; }
public void Add(MarketPriceModel model)
{
if (Prices == null)
Prices = new List();
Prices.Add(model);
}
}
public class MarketPriceModel
{
public string Symbol { get; set; }
public double Open { get; set; }
public double Close { get; set; }
public double Low { get; set; }
public double High { get; set; }
public DateTime TimeStamp { get; set; }
}
Controller: MarketWatchController
This controller class has action method “MarketPriceUI” which return MarketPriceUI view and injecting MarketPriceCollectionModel class as model.
public class MarketWatchController : Controller
{
//
// GET: /MarketWatch/
public ActionResult MarketPriceUI()
{
MarketPriceCollectionModel collection = new MarketPriceCollectionModel();
collection.Add(new MarketPriceModel() { Symbol = "MSFT",
Open = 34.5d, Close = 35.5d, Low = 33.4d, High = 36.5d });
collection.Add(new MarketPriceModel() { Symbol = "Goog",
Open = 54.5d, Close = 58.65d, Low = 52.78d, High = 59.23d });
return View(collection);
}
}
View MarketPriceUI.cshtml @model: contain object returns from controller. We can use this object to show data in view but here I want to convert @model to knockoutJS viewmodel.
var initialData = @(Html.Raw(Json.Encode(Model.Prices)));
viewModel = {prices: ko.observableArray(initialData)
};
ko.applyBindings(viewModel);
@(Html.Raw(Json.Encode(Model.Prices))) converts model data into json and this data is set as observablearray for knockoutjs viewmodel.
“data-bind="foreach: viewModel.prices" statement can loop in this viewmodel to show data on page.
@model MarketWatchWebSample.Models.MarketPriceCollectionModel
@{
ViewBag.Title = "MarketWatch";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<table>
<tr>
<td>
Symbol
</td>
<td>
High
</td>
<td>
Low
</td>
</tr>
<tbody data-bind="foreach: viewModel.prices">
<tr>
<td>
<span data-bind="text:Symbol"></span>
</td>
<td>
<span data-bind="text:High"></span>
</td>
<td>
<span data-bind="text:Low"></span>
</td>
</tr>
</tbody>
</table>
Output
