Client Side Model Binding with ASP.NET MVC 3 and KnockoutJs

• Download source code - 2.1 MB

Knockoutjs is a 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 returns MarketPriceUI view and injects 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: contains 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";
}

var viewModel;
    $(document).ready(function () {

            var initialData = @(Html.Raw(Json.Encode(Model.Prices)));

viewModel = {prices: ko.observableArray(initialData)
                };

           ko.applyBindings(viewModel);
});

}

<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