在现代Web开发中，动态用户界面（UI）的需求日益增长。KnockoutJS作为一个强大的JavaScript库，可以轻松地与ASP.NET结合使用，以实现动态UI。本文将介绍如何使用KnockoutJS的simpleGrid插件与ASP.NET结合，通过HTTP处理程序实现动态UI，例如添加/删除网格中的行。
首先，需要定义一个C#模型来表示数据。这个模型将用于ASP.NET后端生成JSON数据。
public class DataModel
{
public string name { get; set; }
public Int32 id { get; set; }
public double price { get; set; }
}
接下来，需要创建一个HTTP处理程序来生成这些数据。在ASP.NET中，HTTP处理程序是一个接口，它允许自定义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.config文件中注册这个HTTP处理程序。
<system.web>
<httpHandlers>
<add verb="*" path="*/knockout/*" type="WebApplication2.Handler1,WebApplication2" />
</httpHandlers>
</system.web>
接下来，需要在客户端初始化视图模型。这包括引入必要的JavaScript库，如jQuery、KnockoutJS、simpleGrid、mapping和Jquery模板。
<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>
然后，初始化视图模型并设置simpleGrid视图模型。
var ViewModel = function() {
var self = this;
this.initialized = ko.observable(false);
this.items = new ko.observableArray();
}
var vModel = new ViewModel();
ko.applyBindings(vModel);
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
});
接下来，需要在HTML中添加simpleGrid的代码。
<div data-bind='simpleGrid: gridViewModel'>
</div>
当文档准备就绪时，需要发起一个AJAX调用来获取HTTP处理程序返回的数据，并将这些数据绑定到底层的observable数组中。
$(document).ready(function() {
$.ajax({ url: "/knockout/Handler1.ashx", success: function(data) {
ko.mapping.fromJS(data, {}, self.items);
self.initialized(true);
} });
});
最后，需要添加添加/排序按钮到items observable数组中，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;
};
<button data-bind='click: addItem'>Add item</button>
<button data-bind='click: sortById'>Sort by id</button>