Kendo MVVM/Templates

Kendo core is an open source javascript framework. This example is built on it.

Separate your model and view. Quickly bind your data to html.
These examples are taken directly from the linked telerik documentation.

Bind in html by using data-bind=ā€¯bindtype: valuePropertyā€¯

List of all binding types.

The default model update is done on the change event, when the control looses focus. To change this use the data-value-update attribute.

Eg.

data-value-update="keyup"

Simple Binding

Javascript

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.607/js/kendo.ui.core.min.js"></script>

<script type="text/javascript">
var viewModel = kendo.observable({
    name: "John Doe",
    displayGreeting: function() {
        var name = this.get("name");
        alert("Hello, " + name + "!!!");
    }
});

kendo.bind($(document.body), viewModel);
</script>

Html

<div id="view">
    <input data-bind="value: name" />
    <button data-bind="click: displayGreeting">Display Greeting</button>
</div>

Bind to Template

Javascript

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.2.805/js/kendo.all.min.js"></script>

<script type="text/javascript">

var Product = kendo.data.Model.define({
  fields: {
    "quantity": {
      type: "number"
    },
    "price": {
      type: "number"
    }
  },
  total: function() { //define the calculated field
    return this.get("quantity") * this.get("price");
  }
});

var viewModel = kendo.observable({
  data: [
    new Product({ "quantity": 1, "price": 2 }),
    new Product({ "quantity": 5, "price": 1.99 }),
  ]
});
kendo.bind($(document.body), viewModel);

</script>

Html

<div data-bind="source: data" data-template="tmp"></div>
  <script id="tmp" type="text/x-kendo-template">
    <div>
      <input data-bind="value: quantity" />
      <span data-bind="text: price"></span>
      <span data-bind="text: total"></span>
    </div>
  </script>

Send viewModel back to service for processing.

var data = viewModel.toJSON();
$.ajax({
    url: "/your/service/path",
    method: "POST",
    data: {
        YourQueryStringName: JSON.stringify(data.YourViewModelPropertyName)
    },
    success: function (data, textStatus, jqXHR) {
        Alert("Data Saved");
    },
    error: function (xhr, textStatus, errorThrown) {
        alert(errorThrown);
    }
});

C# service code

var data = GetPostData();
var myJson = JsonSerializer.DeserializeFromString<YourType>(data["YourQueryStringName"]);

public static NameValueCollection GetPostData()
{
    if (HttpContext.Current.Request.HttpMethod != "POST")
    {
        return null;
    }
    using (var reader = new StreamReader(HttpContext.Current.Request.InputStream))
    {
        // This will equal to 
        // "charset = UTF-8 & param1 = val1 & param2 = val2 & param3 = val3 & param4 = val4"
        var value = reader.ReadToEnd();
        var query = HttpUtility.ParseQueryString(value, Encoding.UTF8);

        foreach (var item in query.AllKeys)
        {
            query[item] = HttpUtility.UrlDecode(query[item]);
        }
        return query;
    }
}

Read More

Read more at mvvm overview.