技术开发 频道

微软MVC框架实战:开源的JS库Knockout

  验证错误

  我们可通过一个CSS类以显示验证错误信息。CSS会循环遍历JSON返回的INPUT控件对象,验证其输入值是否合法如有错误则用红色标记高亮。代码如下:

for (var val in result.ValidationErrors) {

  var element
= "#" + val;

  $(element).addClass(
'validation-error');

  }

 

  Oder Entry Details视图 – Knockout 模版

  在完成Order Shipping Information的编辑之后,用户可查看订单详细列表,并可向订单中添加产品。下面的Order Details View使用Knockout模版功能,实现了无需post–back的前提下,逐行编辑每一个line item。

  Knockout 模版可轻松实现复杂的UI,例如不断重复与嵌套的Block。Knockout模版将模版渲染之结果填充至关联的DOM元素。

  预渲染与格式化数据

  通常情况下,数据在前后端的结构与模式所有不同,特别是对于日期,货币等字段,此时就免不了数据的重新格式化。在传统的ASP.NET Web表单中,多数控件是通过预渲染或数据绑定事件,来实现数据到达给用户之前的重新格式化。在MVC中,我们可以抓取View Model数据,调用服务器端代码,实现在View开始阶段做预渲染操作。下例中,拿到重新格式化的数据后,我们生成了一个订单明细列表。

@model NorthwindViewModel.OrderViewModel

  @{

  ViewBag.Title
= "Order Entry Detail";

  ArrayList orderDetails
= new ArrayList();

  foreach (var item in Model.OrderDetailsProducts)

  {

  var orderDetail
= new

  {

  ProductID
= item.OrderDetails.ProductIDFormatted,

  ProductName
= item.Products.ProductName,

  Quantity
= item.OrderDetails.Quantity,

  UnitPrice
= item.OrderDetails.UnitPriceFormatted,

  QuantityPerUnit
= item.Products.QuantityPerUnit,

  Discount
= item.OrderDetails.DiscountFormatted

  };

  orderDetails.Add(orderDetail);

  }

  }

 

  待数据完成格式化后,我们使用DIV标签加载编码后的JSON对象。稍后,JavaScript将访问该JSON对象,将数据绑定至knockout模版。

  

 

1
相关文章