在之前的文章讲述了使用Websocket调用远程方式的功能,在这基础我们可以简单地使用WebSocket进行数据处理方面的应用;只需要在方法执行相关的数据库操作返回即可,结合jeasyui库所提供丰富的控件进行数据应用处理变得非常简单的事情.下面使用jeasyui和WebSocket实现一个查询Northwind数据订单的应用案例.
首先分析一下以下一个订单查询案例所需要的逻辑功能.
从以上的案例图中可以得到包括的功能如下:
1)雇员查询
2)客户查询
3)订单分页查询
4)订单明细查询
C#代码
针对以上功能可以实现简单的逻辑查询,代码如下:
public class Handler { public IList<BLEmployee> ListEmployees() { Console.WriteLine("List Employees"); IList<BLEmployee> items = new Expression().List<Employee, BLEmployee>(); return items; } public IList<BLCustomer> ListCustomers() { Console.WriteLine("List Customers"); IList<BLCustomer> items = new Expression().List<Customer, BLCustomer>(); return items; } public IList<BLOrderDetail> GetOrderDetail(int orderid) { Console.WriteLine("GetOrderDetail OrderID:{0}", orderid); return (Order.orderID == orderid).List<OrderDetail, BLOrderDetail>(); } public OrderSearchResult ListOrder(OrdersSearch search) { Console.WriteLine("ListOrder Employee:{0}\t Customer:{1}", search.EmployeeID, search.CustomerID); OrderSearchResult result = new OrderSearchResult(); Expression exp = new Expression(); if (!string.IsNullOrEmpty(search.CustomerID)) exp &= Customer.customerID.At() == search.CustomerID; if (search.EmployeeID > 0) exp &= Employee.employeeID.At() == search.EmployeeID; int count = exp.Count<Order>(); result.Orders = exp.List<Order, BLOrder>(new Region(search.Page, search.PageSize)); result.Count = count; return result; } }
借助于开源组件Smark.Data的功能,只需要编写简单的代码就能实现相应的数据查询逻辑处理.
JavaScript
定义websocket连接:
//创建连接 function connect() { channel = new TcpChannel(); channel.Connected = function (evt) { $('#dlgConnect').dialog('close'); setTimeout(listEmployee, 50); setTimeout(listCustomer, 50); listOrder(); }; channel.Disposed = function (evt) { $('#dlgConnect').dialog('open'); }; channel.Error = function (evt) { alert(evt); }; channel.Connect($('#txtHost').val()); }
在连接创建完成事件中进行数据查询操作,由于连续进行3以上的websocket的发送操作会导致发送不成功,之于具体原因暂不清楚.所以只能通过setTimeout来控制初始化的数据查询.连接创建后就可以进行远程方法调用,进行数据查询操作具体相关代码如下:
雇员查询远程调用方法:
//雇员查询 var callListEmployees = { url: 'Handler.ListEmployees', parameters: {} }; function listEmployee() { channel.Send(callListEmployees, function (result) { result.data.unshift({ EmployeeID: 0, FullName: 'null' }); $('#employees').combobox({ data: result.data, valueField: 'EmployeeID', textField: 'FullName' }); }); }
客户查询远程调用方法:
//客户查询 var callListCustomers = { url: 'Handler.ListCustomers', parameters: {} }; function listCustomer() { channel.Send(callListCustomers, function (result) { result.data.unshift({ CustomerID: '', CompanyName: 'null' }); $('#customers').combobox({ data: result.data, valueField: 'CustomerID', textField: 'CompanyName' }); }); }
订单查询远程调用方法:
//订单查询 var callListOrder = { url: 'Handler.ListOrder', parameters: { search: { EmployeeID: 0, CustomerID: null, Page: 0, PageSize: 10} } }; function listOrder() { channel.Send(callListOrder, function (result) { $('#orders').datagrid('loadData', result.data.Orders); $('#pp').pagination('refresh', { total: result.data.Count }); }); }
订单明细远程调用方法:
//订单明细 var callGetOrderDetail = { url: 'Handler.GetOrderDetail', parameters: {orderid:0} }; function getOrderDetail() { channel.Send(callGetOrderDetail, function (result) { $('#gdOrderDetail').datagrid('loadData', result.data); }); }
总结
只需要以上简单的代码就可以实现一个订单查询功能,看上去和传统的ajax应用差不多,而这里使用的服务是基于websocket而不是webserver.
下载代码:WebSocket.Northwind.rar (1.03 mb)
演示地址:http://html5.ikende.com/northwind.htm