Knockoutjs grid with Asp.net

  下载示例

介绍  

Knockoutjs为JavaScript实现了Model-View-ViewModel模式。 本文解释了如何使用Knockoutjs的插件simpleGrid，通过ASP.NET使用HTTP处理器。 它可以在需要动态UI的地方使用，例如向网格添加/删除行。  

背景 

这里有一个原始的演示在 Knockoutjs。我已经扩展了原始演示的功能，使用Asp.net HTTP处理器和Ajax。 simpleGrid插件也使用了jquery模板和Knockoutjs映射插件。

网格UI    

使用代码

首先，为数据定义一个C#模型 

public class DataModel
{
    public string name { get; set; }
    public Int32 id { get; set; }
    public double price { get; set; }
} 

HTTP处理器 

 public class Handler1 : IHttpHandler{
 
        public void ProcessRequest(HttpContext context)
        {
 
            var lstData = new System.Collections.Generic.List<DataModel>();
 
            for (Int32 i = 1; i < 75; i++)
            {
                var dm = new DataModel();
                dm.name = string.Format("{0}{1}","Kaiser", i);
                dm.id = i;
                dm.price = 10.75;
                lstData.Add(dm);
            }
 
            var serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
            var result = serializer.Serialize(lstData);
 
            context.Response.ContentType = "application/json";
            context.Response.ContentEncoding = System.Text.Encoding.UTF8;
            context.Response.Write(result);
        }  

在上面的Http处理器代码中，我们将Json数据返回给客户端。 接下来，我们需要在web配置文件中注册我们的Http处理器，如下所示。 

<system.web>
    <httpHandlers>
      <add verb="*" path="*/knockout/*" type="WebApplication2.Handler1,WebApplication2"/>
    </httpHandlers>  

客户端视图模型：  

现在，包含 jQuery, Knockoutjs, simpleGrid,mapping和 Jquery模板JavaScript 文件，如下所示： 

    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="Scripts/knockout-2.1.0.js" type="text/javascript"></script>
    <script src="Scripts/jquery.tmpl.min.js" type="text/javascript"></script>
    <script src="Scripts/knockout.simpleGrid.js" type="text/javascript"></script>
    <script src="Scripts/knockout.mapping-latest.js" type="text/javascript"></script>   

初始化视图模型

var ViewModel = function () {
         var self = this;
         this.initialized = ko.observable(false);
         this.items = new ko.observableArray();
}
 
var vModel = new ViewModel()
     ko.applyBindings(vModel);   

现在，初始化simplegrid视图模型 

        this.gridViewModel = new ko.simpleGrid.viewModel({
             data: this.items,
             columns: [
                  { headerText: "Name", rowText: "name" },
                  { headerText: "Id", rowText: "id" },
                  { headerText: "Price", rowText: function (item) {
                      return "$" +
                        item.price()
                  } 
                  }
              ],
             pageSize: 10
         }); 

这里是simplegrid的html代码

<div data-bind='simpleGrid: gridViewModel'> </div>  

现在，当文档就绪时，对Http处理器进行ajax调用，并将返回的数据使用mapping插件绑定到基础可观察数组。

$(document).ready(function () {
             $.ajax({ url: "/knockout/Handler1.ashx",
                 success: function (data) { 
                     ko.mapping.fromJS(data, {}, self.items);
                     self.initialized(true);
                 }
             });
 
         });  

接下来，我们将把添加/排序按钮添加到基础视图模型中的items可观察数组中，UI将负责更新自身。

 this.addItem = function () {
             self.items.push({ name: ko.observable($("#_name").val()),
                 id: ko.observable($("#_id").val()),
                 price: ko.observable($("#_price").val())
             });
         };
 
         this.removeItem = function (item) {
             self.items.remove(item);
         };
 
         this.sortById = function () {
             this.items.sort(function (a, b) {
                 if (sortAsc)
                     return a.id() > b.id() ? -1 : 1;
                 else
                     return a.id() < b.id() ? -1 : 1;
             });
 
             sortAsc = !sortAsc;
         };
     

这是我们按钮的html代码 

<button data-bind='click: addItem'>
        Add item
    </button>
 
    <button data-bind='click: sortById'>
        Sort by id
    </button>    

总结  

本文展示了如何使用KnockoutJS框架扩展网格功能。