一个共通的viewModel搞定所有的分页查询一览及数据导出（easyui + knockoutjs + mvc4.0)...

<div class="blogpost-body" id="cnblogs_post_body">
<h4>前言</h4>
<p>大家看标题就明白了我想写什么了，在做企业信息化系统中可能大家写的最多的一种页面就是查询页面了。其实每个查询页面，除了条件不太一样，数据不太一样，其它的其实都差不多。所以我就想提取一些共通的东西出来，再写查询时只要引入我共通的东西，再加上极少的代码就能完成。我个人比较崇尚代码简洁干净，有不合理的地方欢迎大家指出。 <br>这篇文章主要介绍两个重点：1、前台viewModel的实现。2、后台服务端如何简洁的处理查询请求。</p>
<h4>需求分析</h4>
<p>查询页面要有哪些功能呢 <br>1、有条件部输入查询条件（这个不打算做成共通的，因为共通的查询拼接条件那种都很不好用） <br><a href="https://images0.cnblogs.com/blog/533284/201306/02230056-b6de476a1e004959a3cadfc53e8645a4.png"><img alt="image" border="0" height="48" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-afa8ba707e7c77ccc9969f35d4f0ff03.png" style="background-image:none;border-width:0px;" title="image" width="714"></a></p>
<p>2、在条件的右边放置：a查询按钮：根据条件查询数据，b清空按钮：清空条件并查询 <br><a href="https://images0.cnblogs.com/blog/533284/201306/02230057-b733adcb51d04b72885351f228a63253.png"><img alt="image" border="0" height="56" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-7624f437616c5134f00348998180a77f.png" style="background-image:none;border-width:0px;" title="image" width="209"></a></p>
<p>3、数据列表，用easyui的datagrid <br><a href="https://images0.cnblogs.com/blog/533284/201306/02230101-6eea474d6ff046a8a0b8f105aeabfc46.png"><img alt="image" border="0" height="69" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-5c46513f0e7988343514051d73a84f23.png" style="background-image:none;border-width:0px;" title="image" width="775"></a></p>
<p>当然还要包括服务端分页及每个字段的排序功能了 <br><a href="https://images0.cnblogs.com/blog/533284/201306/02230257-ae32f2fe6ea54df6bf47d18e3e6484f6.png"><img alt="image" border="0" height="49" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-2ad9fed7a9c8512f7ae8addcb8de92f5.png" style="background-image:none;border-width:0px;" title="image" width="244"></a><a href="https://images0.cnblogs.com/blog/533284/201306/03074118-d124b04cb9b24f3289443028b9bec0a3.png"><img alt="image" border="0" height="34" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-7cc79c42ef98cfa34ee91cb1722cac9b.png" style="background-image:none;border-width:0px;" title="image" width="244"></a><a href="https://images0.cnblogs.com/blog/533284/201306/03074328-7784a034e4024324b170b976368604c4.png"><img alt="image" border="0" height="34" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-820f9da66b911ebff1601c82a4f2a887.png" style="background-image:none;border-width:0px;" title="image" width="111"></a></p>
<p>4、因为这是个一览页面、还可能有新增数据、修改数据的跳转按钮，以及删除数据、审核数据、及导出数据的功能，所以还要一个工具栏放置这些按钮 <br><a href="https://images0.cnblogs.com/blog/533284/201306/03074329-0ad0fb45d5914f499bbe66e4fd2e2d99.png"><img align="left" alt="image" border="0" height="42" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-839eec74215ea225829a3f43280d7107.png" style="background-image:none;border-width:0px;" title="image" width="354"></a><a href="https://images0.cnblogs.com/blog/533284/201306/03074330-1b93ad32887249fdaf452402eda9725d.png"><img alt="image" border="0" height="78" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-8f4be39bb17e7c246307b4be0e7944fe.png" style="background-image:none;border-width:0px;" title="image" width="113"></a></p>
<h4>技术实现</h4>
<p>前端要实现的就是 <br>1、页面布局 <br>2、绑定每个输入控件及数据列表控件 <br>3、每个按钮操作对应的脚本</p>
<p>后台web api要实现的包括 <br>1、根据前台传过来的每个字段的值定义为什么查询（equal、like、greater…这个本来我是放在前台定义的，考虑到安全性问题，移到后台)，值为空是否要不加为条件。 <br>2、根据这些定义及分页信息、排序信息查询我需要的数据。 <br>3、返回数据到前台</p>
<p>接下来我们开始写代码实现，先说代码要写在哪个位置 <br><a href="https://images0.cnblogs.com/blog/533284/201306/03074331-e726f0020ce74d55911b24e78e212c22.png"><img alt="image" border="0" height="161" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-3e4baa53d087779977ab00295eaf2ced.png" style="background-image:none;border-width:0px;" title="image" width="244"></a></p>
<p>我的项目代码都在对应的区域中，比如我们在Mms项目加一个查询</p>
<p>首先这对应一个页面，所以在Controller中创建一个空的mvc controller，取名RecieveController.cs </p>
<div class="cnblogs_code" style="border:#cccccc 1px solid;">
<pre class="blockcode"><span style="color

一个共通的viewModel搞定所有的分页查询一览及数据导出（easyui + knockoutjs + mvc4.0)...

浏览过的版块